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

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

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".

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).

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:

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