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).
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
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
RGB - Red Green Blue
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. It's how computer and television screens display the color - through varying degrees and mixtures of those three colors.
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.
What would #FF0000 be?
#00FF00?
#0000FF?
#FF0000 is RED because only the R (red) is turned on, and the G (green) and B (Blue) are both turned off.
| #FF0000 |
#00FF00 is GREEN. Hopefully you see why.
red=0 (off), green=F (on), blue=0 (off)
| #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 notes:
1. Hex Color Code Short Hand
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. Hex Color Code Tinting and Shading
Tinting
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 |
Shading
If you move the dominant color down the scale, while the other two stay the same at 0, you then are darkening the color:
| F00 | E00 | D00 | C00 | B00 | A00 | 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 000 |
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!
~Josh