Publishers of technology books, eBooks, and videos for creative people

Home > Blogs > Choosing the Right Color Value

Choosing the Right Color Value

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 changing colors using JavaScript. For example if you are animating a color 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.