The Elephant Room

Hexadecimal Color Codes

Here's a straight forward and clear explanation of the hexadecimal color system:

Hexadecimal is a numerical system with a base of sixteen unique digits.

Web colors can be defined by a hexadecimal system that goes from the number zero to the letter F.

0 1 2 3 4 5 6 7 8 9 A B C D E F

Count them! There's sixteen digits! Imagine that!

Okay now think of those digits as a sliding scale where zero is all the way off (or black) and the letter F is all the way on (or white).

A color code will look like this - #000000 or #FFFFFF or #FF00FF or any combination of six of those sixteen digits

0 1 2 3 4 5 6 7 8 9 A B C D E F

That's six digits. #00 00 00. When you break the digits up into pairs, you get three pairs. The first pair represents Red. The second pair represents Green. And the last pair represents Blue. Red Green Blue. RGB. RGB is another way you can define color.

So what happens when R is 00, G is 00, and B is 00? All of them are turned off. All of them are black. So #000000 = black. What is #FFFFFF? R, G, and B are all turned on. #FFFFFF = white. As long as all the six digits move in unison #000000, #111111, #FFFFFF, #AAAAAA, their output is varying shades of gray, where #000000 is black and #FFFFFF is white. When R or B or G are not in unison #FF22BB, #8811AA, #DDBBCC, their output will be varying colors.

#FF0000?

#00FF00?

#0000FF?

#FF0000 is RED because only the R (red) is turned on, and the G (green) and B (Blue) are turned off.

#FF0000

#00FF00 is GREEN. Hopefully you see why.

#00FF00

And #0000FF is BLUE.

#0000FF

Now turn on only two colors and keep one off. #FF00FF? #00FFFF? #FFFF00?

You can almost think about it like you're mixing the two colors that are turned on, but that thinking can also lead you astray. Here's why:

#FF00FF would be Red on, Green off, Blue on. That's Red plus Blue = Purple (Actually we'll call it Magenta).

#FF00FF

Okay, that's pretty much what you'd expect.

#00FFFF - Red off, Green on, Blue on. Don't think too hard. This is where it gets fuzzy, because we are actually dealing with mixtures of light and RGB light doesn't mix exactly like RedGreenBlue paint. #00FFFF is Cyan.

#00FFFF

#FFFF00 – Red on, Green on, Blue off. Oddly enough R and G make Yellow. #FFFF00 is Yellow.

#FFFF00

To get ORANGE, you have to turn down the Green a little. The more you turn it down, the more Red will appear and mix with the yellow, making orange. #FF9900 is Orange.

#FF9900

Two last things:
1. There is a short hand to the hexadecimal color code. It can be compressed down to three digits instead of six. #FFFFFF can be #FFF and #000000 can be #000. #FF0000 is #F00. #FF9900 is #F90. What you are doing is taking the repetition out. Whenever there are double of the same digit, you can shorten it to one digit. If you have a case where the hexadecimal color code is something like #F6EE71, you can't shorten it - it can't go down to #F6E71; R, G, and B all have to have their own repeated double digits for you to be able to shorten the hex code.
2. For a hexadecimal color code like #FF5555 (#F55), where one color is dominant and the other two move in unison, treat the two that move in unison as a sliding scale that adds more and more lightness as it goes towards the letter F. #FFEEEE (#FEE) is pink.

F00

F11

F22

F33

F44

F55

F66

F77

F88

F99

FAA

FBB

FCC

FDD

FEE

FFF

That's pretty much all you need to know to be able to read hexadecimal color codes! I know you've always wanted to know! Now go out and read that hexadecimal color code!