Hexadecimal Color: Grey 88
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 tweek 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 on without an other 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".
Value |
Minor Value Varations |
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:
Color Varations 1 |
Color Varations 2 |
Color Varations 3 |
|
|
|
|
|
|
|
|
For further color exploration, check out these links:
Isn't the True Neutral rather #808080? :)
Or #7f7f7f, depending on how your round (00+ff)/2. You can repeat all these these examples for almost every color with R==G==B. The post does seem to suggest a nice mental model though, if you start working with RGB coming from paint!
However, going for an absolute hue on the Web is an exercise in futility since 99% of all monitors used are uncalibrated and will show different tones for the same RGB value.
Firefox has a lovely plugin called ColorZilla that has a Photoshop-like colorpicker and a colorsampler, by the way.
Hi guys, thanks for commenting on my site.
So mathematically you are correct, #808080 is the truest neutral color because 255/2 is equal to 127.5 and #808080 is 128,128,128 in RGB (#7f7f7f could also be the center if you round down). However, #888888 is the center of the Hex color wheel, which is what I needed to make my explanation. This anomaly is caused by the conversion into RGB. Each character in Hex has 16 possible values, so each pairing is 16x16 which equals 256. Since the highest value possible is 255 the remainder is dropped and that causes the slight shift you are referring to. I could have mentioned this in my article, but I thought it might confuse people and take away from the idea of "apposing forces"
Hullo, how are you doing? I truly like ur blog! I am wondering if u might assist me (I am sure some other readers might also be interested). I would also like to get into creating a blog also and I at the moment use a blog with Word Press, but it is very confusing for me to build and I would like to try to make my blog using movable type instead to check if it will be easier. As a movabletype webmaster yourself, do u perhaps know were i could find online tutorials to do this myself?? Thank you
Update