Hexadecimal Colors
Red, Green and Blue
Hexadecimal numbers are used on web pages to set colors.
The color is defined by its mix of Red, Green and Blue, each of which can be in the range:
0 to 255 (in decimal) , or |
00 to FF (in hexadecimal) |
A color can be made by mixing Red, Green and Blue, so it is called the "RGB Color System". It is also called an "Additive" color system, because it starts at black, and then color is added. |
Color Mixer
Try mixing your own colors to see how it works (or type values into the hexadecimal or decimal boxes):
Also see Interactive Color Wheel.
Hexadecimals
Hexadecimal numbers are "natural" to computers, because computers store and handle binary digits, and four binary digits make one hexadecimal digit (see Binary Digits):
Decimal: | Binary: | Hexadecimal: |
---|---|---|
0 | 0 | 0 |
1 | 1 | 1 |
2 | 10 | 2 |
3 | 11 | 3 |
4 | 100 | 4 |
5 | 101 | 5 |
6 | 110 | 6 |
7 | 111 | 7 |
8 | 1000 | 8 |
9 | 1001 | 9 |
10 | 1010 | A |
11 | 1011 | B |
12 | 1100 | C |
13 | 1101 | D |
14 | 1110 | E |
15 | 1111 | F |
So one hexadecimal digit can have 16 different values (0 to 15 in decimal), and two hexadecimal digits together (called a "byte") can make 16×16=256 different levels of color.
16 Million Colors
Because each of the three colors can have values from 0 to 255 (256 possible values), there are:
256 × 256 × 256 | = 2563 |
= 16,777,216 possible color combinations |
(and this is why you see claims of "16 Million Colors" on computer equipment)
Web Format
The format ("notation") used on web pages is #RRGGBB, where RR is how much Red (using two hexadecimal digits), GG is how much Green, and BB how much Blue.
Example: a nice shade of blue is made up of:
- 64/255 Red,
- 48/255 Green
- 255/255 (i.e. full) Blue
So it is (64, 48,255) in decimal, which is equal to (40, 30, FF) in hexadecimal and is coded as #4030FF.
This may help you remember:
Roses are #FF0000
Violets are #0000FF
Just don't forget,
Grass is #00FF00, too
Some Common Colors
Color |
Decimal (Red, Green, Blue) |
Hexadecimal (#RRGGBB) |
Black | (0, 0, 0) | #000000 |
White | (255,255,255) | #FFFFFF |
Red | (255, 0, 0) | #FF0000 |
Green | (0,255, 0) | #00FF00 |
Blue | (0, 0,255) | #0000FF |
Yellow | (255,255, 0) | #FFFF00 |
Cyan | (0,255,255) | #00FFFF |
Magenta | (255, 0,255) | #FF00FF |
Try entering the hexadecimal code into the color mixer above, and see what you get (you can copy, then right-click the hexadecimal box, and select "paste").
I have also compiled a much longer list of Hexadecimal Colors and their Names.
Color Spaces
RGB is a type of color space.
Another (better) color space is LCH, which stands for Lightness, Chroma and Hue:
- Lightness is how dark or light the color is.
- Chroma is how strong the color is, from gray to full on.
- Hue is a value from 0° to 360° from the color wheel:
Examples: oklch(50% 0.14 240) is a pretty blue using the "oklch" color space, with a lightness of 50%, a chroma of 0.14 and hue of 240 (blue), and oklch(96% 0.08 100) is a light yellow.