Welcome to our web color community. Here you'll find the latest web-focused Palettes and Patterns, as well as Blog, Trends and Forums to help guide your next web design project.

Channels»Web»Blog
Hexadecimal Color: Grey 88

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

VALUEMINOR VALUE VARIATIONS
000000 Black808080 Darker
111111818181
222222828282
333333838383
444444848484
555555858585
666666868686
777777878787
888888 True Natural888888 True Natural
999999898989
aaaaaa8a8a8a
bbbbbb8b8b8b
cccccc8c8c8c
dddddd8d8d8d
eeeeee8e8e8e
ffffff White8f8f8f 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 Cyan880088 Magenta888800 Yellow
118888881188888811
228888882288888822
338888883388888833
448888884488888844
558888885588888855
668888886688888866
778888887788888877
888888 True Natural888888 True Natural888888 True Natural
998888889988888899
aa888888aa888888aa
bb888888bb888888bb
cc888888cc888888cc
dd888888dd888888dd
ee888888ee888888ee
ff8888 Red88ff88 Green8888ff 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 1Color Variations 2Color Variations 3
Cyan to RedMagenta to GreenYellow to Blue
00ffff Cyanff00ff Magentaffff00 Yellow
11ffffff11ffffff11
22ffffff22ffffff22
33ffffff33ffffff33
44ffffff44ffffff44
55ffffff55ffffff55
66ffffff66ffffff66
77ffffff77ffffff77
88ffffff88ffffff88
99ffffff99ffffff99
aaffffffaaffffffaa
bbffffffbbffffffbb
ccffffffccffffffcc
ddffffffddffffffdd
eeffffffeeffffffee
ffffff Whiteffffff Whiteffffff White
008888 Cyan880088 Magenta888800 Yellow
118888881188888811
228888882288888822
338888883388888833
448888884488888844
558888885588888855
668888886688888866
778888887788888877
888888 True Natural888888 True Natural888888 True Natural
998888889988888899
aa888888aa888888aa
bb888888bb888888bb
cc888888cc888888cc
dd888888dd888888dd
ee888888ee888888ee
ff8888 Red88ff88 Green8888ff Blue
000000 Black000000 Black000000 Black
110000001100000011
220000002200000022
330000003300000033
440000004400000044
550000005500000055
660000006600000066
770000007700000077
880000008800000088
990000009900000099
aa000000aa000000aa
bb888800bb008888bb
cc000000cc000000cc
dd000000dd000000dd
ee000000ee000000ee
ff0000 Red00ff00 Green0000ff Blue

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


Related Articles

16 Comments
Showing 1 - 16 of 16 Comments

prantives

holy crap that was excellent

Reinvent

Fantastic. I've been looking for this sort of way to work with hex but have always found the basic "how-it-works" dealio. This really helps!

RobotWisdom

Actually it's 80 (or 7F) not 88. FF = 255, 80 = 128, 7F = 127, 88 = 136.

bunigrl33

Totally cool. Great article.

b4upannu

Superb Post!.. Never read like this before..

Gerren

Hi robotwisdom, thanks for commenting,

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"

kokopoko

Damn! That was an insane breakdown!

Vid the Kid

Actually, #808080 is NOT the truest neutral color. (#BBBBBB is closer.) The Standard RGB color space is not linear. The smaller the number in RGB, the smaller the actual change in brightness of the little phosphors on the monitor. It's close to how we percieve color differences, but it's not mathematically correct. If anyone wants to know more about this, look up "Gamma Correction". Anyway, if you're just tweaking colors so they look right, it doesn't matter if you're doing the math right. Also, if you're going to stick to coarse values like #4488CC in CSS, you can actually shorthand that to #48C, for example.



I tweak the hex codes similarly, with three general scales of coarseness. There's fourths: 00, 40, 80, BF (one less than C0) and FF. I tend to "round down" for the upper half. If I need finer control, I go to sixteenths: 00, 10, 20, 30, 40, 50, 60, 70, 80, 8F, 9F, AF, BF, CF, DF, EF, FF. If I need still finer control, I go to sixty-fourths: ... 30, 34, 38, 3C, 40, 44, 48, 4C, 50 ... CF, D3, D7, DB, DF, E3, E7, EB, EF ...



On the other hand, if I'm working with multiple colors at once, I have a program that works kind of like Notepad but with colors instead of text characters. It'll do math like gradients and inversion, and it does this in a linear version of RGB so mixing looks right, and of course it can give the sRGB hex to use the colors in other programs. (Eventually I'll have this program available for download at either http://vidthekid.info/pandora/ or http://vidthekid.info/produce/ .)

Gerren

Vid, #BBBBBB might visually be closer to a true neutral in value (I admit a lack knowledge when it comes to gamma correction), but it is certainly not the center of the color wheel (it occurs to me now that perhaps I should have referred to #888888 as the center of the color wheel and not true neutral). If you expand out from #BBBBBB to the extremes (#BBBBFF and #BBBB00) you get very muted versions of the primary colors in the respective color sets. Maybe there is something I'm missing, but that just doesn't seem right to me.

Side note: in addition to declaring color in just three values, you can also declare it directly in RGB and HSL (http://www.w3.org/TR/css3-color/#colorunits)

tr67

I still vary off combos of old "web safe" intervals. [00,33,66,99,CC,FF] I find it's easier to calculate compliments that way.

AndyLP

Wow.. this info is priceless.. THANKS! I needed this for my classes :D

beekman

I was just noticing the RGB and HEX inconsistencies last night - for the first time.
Thanks so much for the article and the followup discussion!

Post a Comment

You must be logged in to post a comment.

Search The Blog

Subscribe & Share

Our Latest Tweets

Counters and Calc(): Two Little-Known CSS Features Explained http://t.co/MNKONuUKpI http://t.co/YmgXul9VAF
about 56 minutes ago
Tweet this ArticleFollow @COLOURlovers

Latest Web Blog Posts

//View More ›

Tags

Latest Web Colors

//View More ›

Latest Web Palettes

//View More ›

Latest Web Patterns

//View More ›