1. Technology

Do you convert your CSS colors from RGB to hex?

By July 18, 2011

Follow me on:

color theory wheel
It used to be a lot more important to know how to convert RGB to hexadecimal because hex was essentially the only way to use the millions of colors available for web designers beyond the named colors. There are many color converters you can find on the web, but it's easy to convert RGB to hex with a calculator for Windows or a calculator for Macintosh. But my question is, do you still bother? With CSS allowing you to use RGB codes i.e. rgb(255,255,255) instead, is there any reason to convert to hexadecimal? Do you still use hex codes? Why or why not?
Comments
July 18, 2011 at 1:40 pm
(1) Adam G says:

Well, used to use hex as standard practice, but now with some of the CSS3 properties, RGBa is forcing its way back into the routine.

July 18, 2011 at 5:00 pm
(2) Jennifer Kyrnin says:

Technically RGBa is different from RGB. RGBa allows for alpha transparency, by adding a fourth number to the code:

rgba(0,0,0,0.5) would be 50% black or a transparent gray. While rgb(0,0,0) is just black. :-)

July 18, 2011 at 3:52 pm
(3) Gerry W says:

Do you add milk to your tea or tea to your milk? It really doesn’t matter in the end, does it? Likewise, neither Hex codes nor decimal codes are intuitive to the human brain *but* Hex codes do give a relative sense of the mix of the three primary colors. Also, pure primary colors are explicitly recognizable in Hex.

I use the format of whichever tool I happen to be using and if it gives both forms I choose the Hex.

July 18, 2011 at 5:02 pm
(4) Jennifer Kyrnin says:

Okay, then my question to you is why do you choose the Hex if you get both forms?

I agree it doesn’t matter, but I’m curious if you have a specific reason, or if it’s just habit.

As an aside, I tend to choose hex as well, and for me it’s purely habit.

Although, I am starting to use RGBa a lot more which means that for tools that give only hex codes, I’m having to convert to RGB rather than the reverse.

July 18, 2011 at 5:09 pm
(5) Gerry says:

Because I am an ancient Geek and they don’t offer octal or binary. ;-)

July 18, 2011 at 5:14 pm
(6) Gerry says:

.. Okay … thought about it more …
which is easier to type #ffffff or 255,255, 255? Some tools put out the decimal RGB values in 3 different fields & the Hex results are usually cut & paste from a single field. Ease of use is the reason I’ll claim.

July 19, 2011 at 10:45 am
(7) Maureen says:

I agree Jennifer. I use Hex just because that is what I learned to use way back when. I was developing all my web pages using strictly HTML. Now with all the web templates available it is a no brainer to select colors. I still have a color chart with all the hex choices that I use when I want a variance of a color.

July 18, 2011 at 11:54 pm
(8) Mike S says:

I use hex in web pages and Photoshop.

July 19, 2011 at 8:24 am
(9) Arran says:

I’m with Gerry, esp. with CSS short hand which means #fff definitely beats rgb(255,255, 255).

Bring most of my colours in from mock-ups in Photoshop which gives you the rgb value and hex equivalent automatically.

Only time I would use rgb is for rgba values.

July 19, 2011 at 9:50 am
(10) Matt B says:

Hex all the way. If you know why and how the hex system works, you should know relatively what color you’re looking at. Also, i typically sample a color in Photoshop and then copy paste the hex value into my code. with rgb there’s so much more to type, or copy/paste in my workflow. But i agree if you’re using rgba, there’s a reason for it. Maybe they should develop a hex with transparency. ie “#ff00a6,0.5″ ??

July 19, 2011 at 10:02 am
(11) Matt B says:

I guess the hex w/ transparency wouldnt technically work because hex codes are used everywhere. It would need its own property…

July 19, 2011 at 12:40 pm
(12) Cheryl F says:

I use whichever is most convenient at the time. While I have been designing web pages for over 10 years (mostly my own) I am very visual and like a color picker/color wheel.

I was taking a class in Flash last quarter and found it a real hassle that the color picker was in RGB but it was faster to use hex colors in creating the action script or in the property inspector. So I had to go through and pick my colors, convert them to hex and then use them that way. Same problem when creating my style guide, (in Word) use the RGB but then convert them to Hex for use in the program and list both in the Style Guide for easy reference.

July 19, 2011 at 4:19 pm
(13) Eduard P says:

As a programmer with solid skills on math, I have no issue switching between a value like 69, 0×45, 0105, or 001000101b: these are just the same number, on different bases. Switching between bases, especially between hex dec, is something I do on a breeze, barely without a thought. So I more often than not use the more compact hex notation: something like #123456 is just 7 keystrokes, 7 bytes to send over a UTF-8-encoded network stream, while the rgb(18, 52, 86) is 15 chars, more than double.

When opacity kicks in, then I struggle between consistency and productivity/efficiency, and the former tends to win for the sake of maintainability, so on those pages I need rgba() I end up using rgb() notation as well. No surprise that I am one of the supporters of including a #RRGGBBAA hex notation in CSS4 Color.

July 20, 2011 at 12:29 pm
(14) ananda says:

well i never convert it to hex, it’s too complicated foe me anyway but i’ll try it soon

July 22, 2011 at 2:37 am
(15) website designing companies says:

This can be a superb subject to talk regarding. We appreciate you setting up this site. Iím sure there are a lot searching for these kinds of discussion.

August 8, 2011 at 1:46 am
(16) RGB to Hex says:

I almost always use hex but I do get templates from our creative team in RGB and then end up converting them. One of the reasons I bother with this is that it helps create a smaller css file.

Leave a Comment

Line and paragraph breaks are automatic. Some HTML allowed: <a href="" title="">, <b>, <i>, <strike>

©2014 About.com. All rights reserved.