The Aesthetics of Hex Rounding

~~ In which I coin a phrase, "hex rounding," as applied to color selection for the web ~~

A web project underway is for a Floridian audience, and needs to have a local feel. In choosing a color palette, the obvious first choice is "orange." But you can't use the Orange and Blue of the University of Florida fans w/ offending Seminole sensibilities. Similar issue for Orange Green of University of Miami. Can't use Miami Dolphins colors either. Note: I lived in Orlando for seven years, and graduated from UCF.

I was inspired by rainbow sherbet: the orange and green from that, plus a very light yellow, seemed Floridian to me. Please don't argue that with me, blogoshpere; I know its subjective, it's not the point of this blog, just the setup.

Working with a very talented web designer, we google-imaged "rainbow sherbet" and got enough results to color sample a few. Dropping them into the page layout and tweaking for readability netted the following palette:

orange #FB9E03 (251,158,3)
green #B7DF40 (183,223,64)
yellow #FEFF95 (254,255,149)



I have no training in color theory, but I grok the basics of color families. Color families can be colors that have the same hue, in different saturations. Or different tints. Whatever, you change some values but keep others the same and you'll get colors that "go well together." In computers, these colors are expressed in numbers that share similarities. In hex, base 8. Math aesthetics, you see?

And I remember my days of teaching "web design" back in ~1996, before CSS, when we had to worry about "web safe colors". Web safe colors were in the 256 color "Windows palette" of 8 bit graphics. Web safe octets were 00,33,66,99,CC, and FF. In decimal, that is 0, 51, 102, 153, 204, and 255. So the first round of my "hex rounding" netted:

orange #FF9900 (255,153,0)
green #B7DF00 (183,223,51)
yellow #FFFF99 (255,255,153)

So my orange and yellow were now "web safe", and the last octet of my green was "safe". But I'm not really caring about web safe these days. I'm just using it as the most convenient direction to push them, mathematically, into the same color family.

I like working in http://www.colourlovers.com for web palettes, only because it is easy to share successful results with remote people. And this is color picking, not just math. But COLOURlovers doesnt let you input RGB, only hex. I imagine they think people are mostly clicking and dragging around the color picker.

I continue to work on the green. 183 is between my 153 and 204. I test pushing it all the way to 204, and the color works for me. Somewhat lighter. RGB = colors of light, so bigger numbers = "more lights on" and (no pun here, thats where the word comes from:) lighter color.

223 I push to 255 but now my color is yucky bright lime. Lets add blue: from hex 00 go to 33, still yuck, 66, 99 oops too far. I'm now at pistachio ice cream and I'm still aiming for lime sherbet so lets split the difference. Translating to decimal, I need a number between 102 and 153. 127.5 splits the difference. 7F. Check it, yes that works.

orange #FF9900 (255, 153, 0)
green #CCFF7F (204, 255, 127)
yellow #FFFF99 (255, 255, 153)

And here is my palette, hex rounded. Not necessarily better, just mathematically based. Sorta: