Picking colors for a web page can be simple. Just open up any color picker in a program like Adobe Illustrator or Adobe Photoshop and sample a color from a large colored space. Copy the six-digit hexadecimal code and paste it in your css style sheet.
But What Do Those Digits Mean? And Why Do We Use Them?
Good question. A designer can go on creating web pages for the rest of their life using hexadecimal codes without understanding why they work. But for those who are curious, and for those who want to know how to change colors without resampling a color picker, here is a little primer on what hexadecimal codes are and why they’re used.
A Simpler, Shorter Way to Specify RGB Values
Web pages are based on RGB color models because that’s the color mode for computer screens. RGB values are based on 256 units (labeled 0 to 255) for each color of Red, Green, and Blue light. Combinations of those three colors provide 16,777,216 possible color combinations (that’s 256 x 256 x 256).
It’s perfectly fine to specify colors in CSS code using RGB numerical values on the 0-255 scale. For example, let’s pick an apple red color. (See Figure A to follow along visually.) This color can be coded in RGB values as color: rgb(222,65,65), which means a red value of 222, a green value of 65, and a blue value of 65. But, entering an RGB color code in this manner is cumbersome because you need to enter three different color numbers to get one color value. And it's not something you can do in a manner of seconds.
Hexadecimal codes have an obvious advantage here: it’s just one set of digits. Figure A shows how you can copy and paste one code: #de4141 which will produce the exact same apple red color.
What Those Hexadecimal Numbers and Letters Mean
So in our example, how does #de4141 do the same thing as rgb (222,65,65)?
All is needed is a little understanding of what hexadecimal values are. Hexadecimal is a number system based on 16 different digits, or Base 16. Our normal numbering system is based on ten digits of 0-9, or, Base Ten. So adding six more digits to a numbering system requires the addition of some alpha characters, A-F. Hexadecimal uses a numbering system based on the digits 0-F.
In Figure B, you’ll see a chart showing the “normal” Base Ten numbering with it’s hexadecimal or Base 16 counterparts. What is “10” in Base Ten is “A” in hexadecimal. The “15” in hexadecimal is “F”. That’s the highest single digit possible. What’s next? “10”, but it’s called “one zero” and it’s value in normal Base Ten is “16”.
As you travel down the chart you’ll see that the Hexadecimal values count up using the additional A-F digits to “1F” which is “31” in normal Base Ten, then uses “20” to be equal to “32” in Base Ten.
Therefore, the highest two digit number in hexadecimal is “FF” which would be the same as “255” in Base Ten. Two digits in hexadecimal represent the same value as a three digit number in Base Ten.
How the Hexadecimal Color Codes Are Set Up
Hexadecimal color codes are set up to represent RGB colors by 3 pairs of two-digit codes in one set of six digits. The first two digits are the red value, the next two are the green value, and the final two are the blue value.
In our example six digit hexadecimal color code, #de4141, the first two digits “de” are a hexadecimal equivalent of “222” in Base Ten, which would make it the same red color in RGB. Then the next two “green” hexadecimal digits ,“41”, are the same value as “65” in Base Ten. The last two “blue” digits are identical values to the green color.
That’s how hexadecimal codes are set up. It’s one set of numbers, easy to copy and paste out of a color picker. And with a little understanding of Base 16 numbering, you might learn how to modify a color directly in CSS by altering a pair of digits higher (lighter) or lower (darker).
David Borrink - David Borrink is a graphic designer who lives in Rockford, Michigan and is a partner with his wife in their design and writing business, ...
Join the Conversation