October 12, 2006
Color work
Posted by bopuc at October 12, 2006 08:13 PM
- #003
- #015
- #027
- #039
- #36B
- #69D
- #9CF
- #030
- #150
- #270
- #390
- #6B3
- #9D6
- #CF9
- #C00
- #D20
- #E40
- #F60
- #F94
- #FC8
- #FFC
- #1A
- #333
- #4D
- #666
- #80
- #999
- #B3
- #CCC
- #E6
- #000
- #fff
Explanation:
This is a normalized, cleaned up, new color palette for GlobalVoices. I had Jeremy quickly document our (ok ok my) crazy color use on the existing site and oh man what a mess. In my mad rush to add stuff over the last year, I strayed in my color choices. I have 4 different shades of dark blue going! Ayeee!
So I grabbed our three core colors, and twiddled to get 3 shades lighter and darker for each. Because I am picky, I made sure that
a) the hex values for the colors were "clean" (003399, vs 0134e9)
b) the steps between shades were all mathematically equivalent across the hues
Notice how the orange fades into giving us a bonus deep red and light yellow. For use on alerts and other more subtle attention grabbing needs in the UI.
The process was actually quite involved; the 2 median darker shades were culled from an 8 step gradation, the 2 lighter ones, from a 7 step one. Except for the orange which required a 5 step gradation which actually gave me 7 (no idea...). The grays are a 10 step from 333 to white. (I wanted to have the four "full" grays: 333, 666, 999, CCC, between 000-black and FFF-white.)
(The hexadecimal color values here are in shorthand: 039 expands to 003399, E6 expands to E6E6E6.)
Of course we will not necessarily use all these colors, but we have them on hand if we need, say, a lighter shade of something for a rollover effect, or a darker one for a header, etc...
Fun.
To dig deeper into the geekiness here... if I had followed the same process of hex number/letter shifting, the third color would be a sort of mauve. But I needed the orange. Hence the 039 -> 390 -> F60 sequence. Picking the C00 red for dark orange and the FFC pale yellow for the light orange was done by following patterns in a standard hex color map and plotting relative positions by eye... Worked out real well, me thinks!!
Comments
> E6 expands to E6E6E6
What!? Since when?
Funnily, I was just thinking a day or so ago that it would be nice if that 2-digit and 1-digit short-hand colors would be supported. But they're not, right? :)
Posted by: Patrick at October 13, 2006 01:21 AM
Hahahaha, no they aren't. It's just for annotation. :)
Posted by: Boris at October 13, 2006 01:30 AM
CSS Level Bo :)
Posted by: Patrick at October 13, 2006 01:42 AM
CSS color units are given into CSS 3 Color for coming possibilities and CSS 2 for now.
Posted by: karl at October 13, 2006 03:09 AM
oh et un octave = DO RE MI FA SOL LA SI DO => 8 bits.
Il devrait être facile d'associer des sons à des couleurs en gardant le 8 bit du RGB 0 à 255.
Posted by: karl at October 13, 2006 03:14 AM
i thought these were paint chips for the office. so, we're staying white, right?
Posted by: hugh at October 13, 2006 11:46 AM