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
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
000000 Black
111111
222222
333333
444444
555555
666666
777777
888888 True Neutral
999999
aaaaaa
bbbbbb
cccccc
dddddd
eeeeee
ffffff White |
Minor Value Varations
808080 Darker
818181
828282
838383
848484
858585
868686
878787
888888 True Neutral
898989
8a8a8a
8b8b8b
8c8c8c
8d8d8d
8e8e8e
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
118888
228888
338888
448888
558888
668888
778888
888888 True Neutral
998888
aa8888
bb8888
cc8888
dd8888
ee8888
ff8888 Red |
880088 Magenta
881188
882288
883388
884488
885588
886688
887788
888888 True Neutral
889988
88aa88
88bb88
88cc88
88dd88
88ee88
88ff88 Green |
888800 Yellow
888811
888822
888833
888844
888855
888866
888877
888888 True Neutral
888899
8888aa
8888bb
8888cc
8888dd
8888ee
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 Varations 1
Cyan to Red
00ffff Cyan
11ffff
22ffff
33ffff
44ffff
55ffff
66ffff
77ffff
88ffff
99ffff
aaffff
bbffff
ccffff
ddffff
eeffff
ffffff White |
Color Varations 2
Magenta to Green
ff00ff Magenta
ff11ff
ff22ff
ff33ff
ff44ff
ff55ff
ff66ff
ff77ff
ff88ff
ff99ff
ffaaff
ffbbff
ffccff
ffddff
ffeeff
ffffff White |
Color Varations 3
Yellow to Blue
ffff00 Yellow
ffff11
ffff22
ffff33
ffff44
ffff55
ffff66
ffff77
ffff88
ffff99
ffffaa
ffffbb
ffffcc
ffffdd
ffffee
ffffff White |
|
008888 Cyan
118888
228888
338888
448888
558888
668888
778888
888888 True Neutral
998888
aa8888
bb8888
cc8888
dd8888
ee8888
ff8888 Red |
880088 Magenta
881188
882288
883388
884488
885588
886688
887788
888888 True Neutral
889988
88aa88
88bb88
88cc88
88dd88
88ee88
88ff88 Green |
888800 Yellow
888811
888822
888833
888844
888855
888866
888877
888888 True Neutral
888899
8888aa
8888bb
8888cc
8888dd
8888ee
8888ff Blue |
|
000000 Black
110000
220000
330000
440000
550000
660000
770000
880000
990000
aa0000
bb0000
cc0000
dd0000
ee0000
ff0000 Red |
000000 Black
001100
002200
003300
004400
005500
006600
007700
008800
009900
00aa00
00bb00
00cc00
00dd00
00ee00
00ff00 Green |
000000 Black
000011
000022
000033
000044
000055
000066
000077
000088
000099
0000aa
0000bb
0000cc
0000dd
0000ee
0000ff Blue |
For further color exploration, check out these links: