Standard CSS color keywords are limited to 149 named shades; the hexadecimal (or “hex”) color method has access to the full RGB gamut. The key to learning hex is understanding the hexadecimal counting system.

Unlike our familiar base-10 system, with integers from 0 to 9, the hexadecimal system has 16 digits: 0 to 9, followed by a to f. In the most common variant, hex color components - red, green and blue - are represented by two pairs of digits each.

Used in pairs this way, the lowest value of a color component would be 00. One step higher would be 01, followed by 02, etc. After 09, the number pair moves to 0a, then 0b, until it gets to 0f. At that point, the first digit rolls over like an odometer, and the last one resets, becoming 10. At that point, the last digit starts ticking upwards again.

The higher the value for a component, the more “strength” or “input” it has in the final color - 00 represents no input of a color component, and ff represents a total commitment of a component. The complete hexadecimal color is preceeded by a # symbol. So #000000 would represent black - no input from red, green or blue - while white would be #ffffff, and #ffff00 yellow.

Remembering Hexes

A simple mnemonic to remember base-16 for color is to think of each color component (red, green and blue) as a seperate flashlight with an appropriate filter on it. In hex, 00 means “off”, and ff means “flashlight full on”.

Used in a dark room, turning on only the red flashlight (#ff0000) will make everything appear to be red. Turning on the red and green flashlights and converging their beams (#ffff00) will make the room appear yellow.

Taken further, you can think of each flashlight with a dimmer switch - from 00 to ff, so #777777 would be a mid-level grey, and #440000 would be a dark red.

Shortcuts

“Web safe” colors are created when the number in each color pair is the same (00, 77, ee, etc). These colors used to be particularly relevant when screen displays had a very limited color range; they’re not common or necessary now.

If you happen to use a web safe color, it does have one advantage - all web safe colors provide the option to shortcut the hexidecimal code. For example, black becomes #000, pure red #f00, etc. For example:

p {
    color: #000;
}

The hexadecimal values do not have to be the same for each pair: #3fa027 is a perfectly valid hex color, but can’t be shortcut.

It’s important to understand that hexadecimal allows access to the same gamut as the two other primary CSS color systems (RGB and HSL); the color variety is not greater or less in hex.

Alpha in Hex

The latest specification for CSS color allows hexidecimal colors to include an an alpha or opacity component, added as #RRGGBBAA or #RGBA. I discuss this in a separate article.

Advantages & Disadvantages

As a color system for web design and development, hexadecimal has both strengths and weaknesses:

Advantages

• Simple primaries like red, black and white are very quick to write, especially as shortcuts.
• Hexadecimal color codes are understood by absolutely every browser.

Disadvantages

• With the exception of primaries, hex color codes are difficult to write and adjust accurately, usually requiring use of a third-party application to get right.
• Hexadecimal color codes are challenging and counter-intuitive for designers.

For further details, see the “Which CSS Color System to use Where” article.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.