Q: Should I use Hex or RGB values to define colors in CSS?
The short answer is RGB.
The slightly longer answer is that Hex values have become the de facto standard for use in CSS code and both developers and designers are used to them.
The long answer is that, in the final design on the screen, there is no difference between using Hex or RGB values in your code. Which system you use is really a matter of you own personal preference (and those of the team you are working with) as to whether or not you use Hex or RGB values to define colors.
Adobe's Kuler Web application (kuler.adobe.com) lets you choose a color palette and see each colors value in multiple formats, including HEX and RGB.
The benefit of using Hex values is that they are compact, only ever
taking up 7 digits—a number sign plus the 3 couplet values
corresponding to the red, green, and blue values—which can be
abbreviated to only 4 digits if the couplets use the same value (eg.
#336699 is the same as #369). However, this is really the only
advantage I find for Hex.
The main benefit of RGB values is that, since most human beings use base-10
rather than base-16 to count, it’s easier to understand and imagine the general
color an RGB value represents. This is especially true if you are dynamically
change, you almost have to use RGB since it’s difficult to write a loop that
will increment in base-16.
However, the single most important argument for using RGB over Hex is
that a new color standard is being introduced in CSS Level 3 that will
not only allow you to specify the color hue, but also the opacity value
for the color fill. The new RGBA value adds an alpha channel (that’s
what the A stands for) with a value between 0 (transparent) and 1
(opaque). So, rgb(91, 21,46) is a nice dark wine colored red and
rgba(91, 21,46, .35) is the same color, but at 35% opacity.
The bad news is that RGBA currently only works in Safari and Firefox.
However, once it is adapted by Internet Explorer, RGBA will quickly
become a designer's new best friend and, since the colors can only be
defined using RGB values, and not Hex, I recommend that you get used to
coding your colors in RGB now.
For more information about color, CSS, and Web typography, check out Jason’s new book, Fluid Web Typography. Jason is also the author of more than 13 books on digital media, including Speaking In Styles: The Fundamentals of CSS for Web Designers.
Follow Jason on Twitter:@jasonspeaking.
Ask a question, win a book!
Jason will be answering Web design questions each week, and each week
the person whose question he chooses will win a copy of his new book Speaking In Styles.