How to Read Hex Color Codes

This is an old tip but (I think) it’s a good one….

I had been building websites for years and this one wasn’t obvious until somebody explained to me what was actually going on. But, hex codes that identify colors for HTML and CSS are pretty simple actually. First of all, what’s a color hex code? It’s a numeric representation of the color you want to define. It looks like this #CF00A3. That’s a number? sure it is…

The counting goes like this:
00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, etc, etc, until you get to FF

For our color codes this is what’s happening:

00 = no color
FF = the maximum amount of color

The hex codes for browser colors are (usually) 6 characters long and they are split into 3 pairs of numbers. Browsers display colors as a mix of Red, Green, and Blue. The first two characters represent red, the second two represent green, and the last two represent blue. The higher the number, the greater amount of color there is.

Since, in this scenario, black is the absence of any color, black’s hex code is #000000. There is no red, green, or blue in the color black.

Also, since white is the combination of all colors, white’s hex code is #FFFFFF. White is therefore the combination of the maximum values for red, green, and blue.

Also,
Red = #FF0000
Green = #00FF00
Blue = #0000FF

So now, if you have a color like #CC3300 and you need to crank up the red in it, just adjust the first two characters. Change CC to EE and see what happens…

Related posts:

1. A Ball of Colors – Maybe or Maybe Not!
2. A Complete Guide to Nokia Secret Codes
3. Some Neat CSS Tricks
4. Nokia 5800 Secret Codes
5. Very Simple CSS Tricks

Filed Under: Archive Categories