My color theory students have asked me to explain hexadecimal color notation. Their most often-asked question is “What is it?” I will break it down for you in the simplest terms I can.

Hexadecimal is a 6-position numeric identifier used to define color in html, css and other code. Each color is designated by 3 pairs of characters. The system is based the binary numbering system.

Hexadecimal includes 16,777,216 unique color code combinations. It is an additive system understanding, meaning it represents colors in the Red-Green-Blue (RGB) environment, not the Red-Yellow-Blue (subtractive) color system, which is also known as the Cyan-Magenta-Yellow system.

Hexadecimal is used for the additive color system

Let’s begin with why white light is the blend of 256 red, 256 green and 256 blue — the full amount or amplitude of each of these primaries. Each primary is at its most present at full saturation, or the amount of 256.  How do we get the 256? In digital images of 8-bit color density, the amount of the 3 additive primaries varies between 0 and 256. There are therefore 256 intensity levels for each primary: R, for G and for B. When you combine all 3 additive primaries equally at their full saturation, the result is 256 x 256 x 256, or 16,777,216. That’s white light.

The hexadecimal notation is 6 characters preceded by a hashtag. The 6 characters are a combination of 10 numerals, 0-9, and 6 letters, A-F.

The hashtag ( # ) indicates that what’s coming next in a line of code is a hex color notation.

The Hex String

#000000

There are 3 pairs of binaries in a hex string. Each pair indicates the amount of an additive primary. As the numerals increase, chroma and/or amplitude increase(s).

#000000

The first pair indicates the amount of red

#000000

The second pair indicates the amount of green

#000000

The third pair indicates the amount of blue

#000000

This notation indicates zero amount of each primary. Pixels are all OFF. There is no light, so it’s black, which is the absence of light in the additive color model. Achromatic grays are identified with numbers alone, from 1-9. The higher the numbers are, the lighter the gray is:

Since numerals aren’t adequate to notate the full range of color possibility, letters are used to designate higher numbers so that we can create a full range of colors:

A=10   B=11   C=12   D=13   E=14   F=15

Colors that appear lighter (tints) have more luminance and less intensity. Their hexadecimal notations are indicated with higher numbers, which shows that they are closer to white light (#ffffff). You can think of it this way: the more Fs there are in the notation, the lighter the color is.

Hexadecimal and RGB

Since hexadecimal is a short form expression of RGB amounts, here is a hexadecimal notation compared to an RGB notation:

#FF33CC = 255/51/204

The amount of red is FF or 255, the amount of green is 33 or 51, and the amount of blue is  CC or 204.

Here is a screen shot of my Adobe Photoshop CC color picker. You’ll note the hexadecimal notation along with its RGB, CMYK and HSB (Hue/Saturation/Brightness) and Lab notations:

Resources for hexadecimal color charts:

Color Hex

W3 Schools http://www.w3schools.com/colors/colors_picker.asp

HTML Color Picker

Your turn:

What is your most challenging problem or question regarding color? Ask it in the comments and I’ll answer in another post on this blog.