041106

Anatomy of html hexadecimal color codes

If you’ve ever looked at the source code of a web page, or used Photoshop’s color picker, you have probably seen a six-symbol code that looked something like this: #6775FC.

Believe it or not, but that is a pretty light blue color. These codes are actually really easy to understand and create once you know how to read them. Usually when I design a web site and I need a color somewhere, I find it faster to just type in a color code instead of using a color picker.

The code is broken up into three parts:

#67 75 FC

Each part stands for one of the three primary colors of light: Red, Green, Blue (otherwise known as RGB). The greater the first number, the more red there is. The greater the second, the more green, and the greater the third, the more blue. A color code of #000000 would be completely black, because all the color values are zero.

The reason there are letters in there is because the color code is based on the hexadacimal (or base 16) number system. In other words:

0 = 0
1 = 1
2 = 2
3 = 3
4 = 4
5 = 5
6 = 6
7 = 7
8 = 8
9 = 9
10 = A
11 = B
12 = C
13 = D
14 = E
15 = F

(If figuring out base 16 numbers hurts your head, the Windows calculator can convert them for you. Switch to scientific view, type in your numbers, and then just flip between hex and dec number systems.)

For the color #6775FC, I can tell by looking at the code that it’s mostly blue, because the blue value (FC) is the highest one. I can tell that it’s a lighter blue because the other two colors are about half-way between 00 and FF, and are both at about the same level. In regular numbers, each color can range in brightness from 0 to 255.

To give you a better idea of how it works, here are some basic colors:

White – #FFFFFF
Black – #000000
Red – #FF0000
Green – #00FF00
Blue – #0000FF
Yellow – #FFFF00
Magenta – #FF00FF
Cyan – #00FFFF
Light Gray – #D3D3D3

Occasionally I have seen some instances where these color codes are followed by a fourth set of digits identical to the other three. That’s used to specify the level of opacity.

In HTML you can also type in the name of the color instead of the code (”black,” “yellow,” etc.), but there are only a limited number of them. Using the hex code gives you access to the whole range of colors.