Hexadecimal Color: Grey 88

This is a Guest post by illustrator and web designer Gerren Rabideau. You can see the original post here, or check out the rest of his work over at Gerren Design.

Once upon a time I was building a website and one of the colors I had picked out just wasn’t quite right. I kept having to pop in and out of photoshop in order to tweak the color I was using. I didn’t understand the Hex code enough to adjust it on the fly. After about an hour of tediously going back and forth with photoshop I gave up and started scouring the internet for a method of using hex code without another visual tools.

Like most people I discovered multiple sites that explain how HTML uses hexadecimal notation (xxxxxx) to define color. Hex code uses base-16 math to write a shorthand version of the binary code that is used to represent each of the different colors in the RGB color set. For instance, #f9f9f9 would be translated into RGB as 249,249,249 and then into binary as 111110011111100111111001. If that was too confusing, just think of #f9f9f9 as “off-white”.

This article isn’t really about explaining how the hexadecimal color system works. You can find plenty of websites out there that can explain that far better than I can. This article is about developing a method of thinking about hex code that will allow you to read and manipulate it without having to pop into photoshop in order to see the color itself. I’ve been calling this method “grey 88”.

Before I get into that though, lets talk about color sets for a minute…

I come from a fine artist’s background and learned about color by applying it to paint. I had my crayon set and yellow plus blue made green. This is because painting is a subtractive color set based on pigments. The chemicals used in creating the paint would react with each other when mixed and create green. You start with a white canvas and add colors until you get black. CMYK works in the same way. Cyan, Magenta, and Yellow are pigments that are mixed to create darker colors (black is also used, but only to reduce the need of having to mix CMY all of the time).

CMYK (subtractive color) pigment based

cyan (00ffff) magenta (ff00ff) yellow (ffff00) black (000000)

By default, photoshop, your computer monitor, and HTML files use RGB. RGB is an additive color set that is based on mixing light instead of pigments. Your monitor starts with black and adds different spectrums of light until you get white. In RGB the three primary colors are Red, Green, and Blue.

RGB (additive color) light based

red (ff0000) green (00ff00) blue (0000ff) white (ffffff)

Because RGB is based on light it has a much wider gamut of colors than pigment based color sets. In fact, all of the colors in CMYK are also in RGB (the reverse is not true). This means that Hex is unique in the sense that it is really has both RGB and CMYK.

I know, if you go to any other website and read any other description of Hex color they will tell you that Hex color is just RGB, they don’t even mention CMYK. From a mathematical standpoint, they are absolutely right. Your browser converts Hex code into RGB and then into binary and BAM! You’ve got color. However, I submit that as a designer this isn’t the best way to “think” about color when you are working with Hex color.

Let me explain; people generally think of things linearly, from one end to another. White to black. Which, will work in Hex code if you slowly add equal amounts of color into Red, Green, and Blue. In the sample below I do just that. going from 000000 to ffffff works because you are just dealing with value. But, hue doesn’t work in a straight line, it works in a big circle. That is why we have the color “wheel” and not the color “line”.

VALUE MINOR VALUE VARIATIONS
000000 Black 808080 Darker
111111 818181
222222 828282
333333 838383
444444 848484
555555 858585
666666 868686
777777 878787
888888 True Natural 888888 True Natural
999999 898989
aaaaaa 8a8a8a
bbbbbb 8b8b8b
cccccc 8c8c8c
dddddd 8d8d8d
eeeeee 8e8e8e
ffffff White 8f8f8f Lighter

Hex is made up of six character’s that range from 0 to F, with 000000 being black and FFFFFF being white. This is split up into RGB like so rrggbb. This leads most people to believe that 00 is actually the lowest amount of a color you can give something. Unfortunately it’s not; it is actually a negative amount of that color. The lowest amount of any color on the Hex color system is actually 88 which will move that hue to the center of the color wheel. This makes 888888 the only true neutral color in the Hex color wheel. Hence the “grey 88” method.

In order to really understand the way color works in the Hex color system you need to think of it in apposing forces; red vs cyan, green vs magenta, and blue vs yellow. In painting terms these colors are all complimentary colors. Notice in the sample below how I start in the center with Grey 88 and move the color closer to each of the six extremes (there is a much larger sample at the end of the article).

008888 Cyan 880088 Magenta 888800 Yellow
118888 881188 888811
228888 882288 888822
338888 883388 888833
448888 884488 888844
558888 885588 888855
668888 886688 888866
778888 887788 888877
888888 True Natural 888888 True Natural 888888 True Natural
998888 889988 888899
aa8888 88aa88 8888aa
bb8888 88bb88 8888bb
cc8888 88cc88 8888cc
dd8888 88dd88 8888dd
ee8888 88ee88 8888ee
ff8888 Red 88ff88 Green 8888ff Blue

So, by moving the XXxxxx part of a Hex color farther away from neutral 88 and closer to FF it becomes more Red. The farther we push it from 88 to 00 it becomes more Cyan.

When we move the xxXXxx part of a Hex color farther away from neutral 88 and closer to FF it becomes Greener. The farther we push it from 88 to 00 it becomes more Magenta.

With the xxxxXX part of a Hex color when we move it farther away from neutral 88 and closer to FF it becomes more Blue. The farther we push it from 88 to 00 it becomes more Yellow.

Below is a much larger color sampling to further prove my point:

Color Variations 1 Color Variations 2 Color Variations 3
Cyan to Red Magenta to Green Yellow to Blue
00ffff Cyan ff00ff Magenta ffff00 Yellow
11ffff ff11ff ffff11
22ffff ff22ff ffff22
33ffff ff33ff ffff33
44ffff ff44ff ffff44
55ffff ff55ff ffff55
66ffff ff66ff ffff66
77ffff ff77ff ffff77
88ffff ff88ff ffff88
99ffff ff99ff ffff99
aaffff ffaaff ffffaa
bbffff ffbbff ffffbb
ccffff ffccff ffffcc
ddffff ffddff ffffdd
eeffff ffeeff ffffee
ffffff White ffffff White ffffff White
008888 Cyan 880088 Magenta 888800 Yellow
118888 881188 888811
228888 882288 888822
338888 883388 888833
448888 884488 888844
558888 885588 888855
668888 886688 888866
778888 887788 888877
888888 True Natural 888888 True Natural 888888 True Natural
998888 889988 888899
aa8888 88aa88 8888aa
bb8888 88bb88 8888bb
cc8888 88cc88 8888cc
dd8888 88dd88 8888dd
ee8888 88ee88 8888ee
ff8888 Red 88ff88 Green 8888ff Blue
000000 Black 000000 Black 000000 Black
110000 001100 000011
220000 002200 000022
330000 003300 000033
440000 004400 000044
550000 005500 000055
660000 006600 000066
770000 007700 000077
880000 008800 000088
990000 009900 000099
aa0000 00aa00 0000aa
bb8888 00bb00 8888bb
cc0000 00cc00 0000cc
dd0000 00dd00 0000dd
ee0000 00ee00 0000ee
ff0000 Red 00ff00 Green 0000ff Blue

For further color exploration, check out this link: http://www.colourlovers.com/blog/2007/06/30/ultimate-html-color-hex-code-list/

Author: evad
David Sommers has been loving color as COLOURlovers' Blog Editor-in-Chief for the past two years. When he's not neck deep in a rainbow he's loving other things with The Post Family (http://thepostfamily.com/), a Chicago-based art blog, artist collective & gallery.