Mark Allen Neil photo

Mark Allen Neil.com

An online résumé, blog, biography and digital sandbox

Articles

Creating a color scheme

Posted 2009-10-11 in Web

Finding a new look

So while I really like the structural aspects of Fluid 960 Grid System, I decided that the gray color scheme could use a little spicing up. Blue is my favorite color, so I thought I’d change the scheme to incorporate some blue into the palette.

Coming up with “bluer” palette

The palette which comes with the Fluid 960 system follows a linear gray scale progression from black to white… progressing from #000 to #FFF in steps of #111. I’m very familiar with the way RGB triplets are used to define color in computer systems, but had to look up how CSS maps something like #444 into an RGB triplet.

CSS allows for a shorthand notation to define colors, where a three-digit hexadecimal number can substitute for the six-digit hexadecimal numbers needed to define computer colors (Red, Green and Blue values each taking a value from 0-255… which is #00 to #FF in hexadecimal). It seems CSS will replicate each digit of a three-digit color value, so #456 becomes #445566. I imagine the original reason for this was to save internet bandwidth… or perhaps to web page construction time… but it hardly seems an advantage for modern web situation. For instance, this web pages on this site include JavaScript code of roughly 75Kb (compressed)… so saving a few bytes using shortcut colors hardly seems worth the trade-offs to me.

So knowing now how CSS maps three- into six- digit colors, I then understood that Fluid960 colors progress from #000000 (black) to #FFFFFF (white) in steps of #111111. So there are 16 distinct shades of gray in the color palette. The following table shows the default gray-scale Fluid960 palette.

Scheme 00010203 04050607 08091011 12131415
Gray 000000 111111 222222 333333 444444 555555 666666 777777 888888 999999 AAAAAA BBBBBB CCCCCC DDDDDD EEEEEE FFFFFF

So what I want to do is add some blue, while ideally keeping the same 16-step progression. For a color to appear bluish, one would imagine that the blue component of the color had a greater intensity (value) than the other components. So I can start with the darkest color #000000 (black) and add some blue to it… but how much blue? At first thought, why not just add a fixed quantity of “blue” to each value in the palette? Well that doesn’t work when you get to the “white” end of the scale, as you cannot exceed #FF for any color. So we need a sliding scale of blue values, starting at something >0 and progressing over 16 steps to #FF.

We can represent each triplet of the gray-scale palette using the following formula: C = RGB( 17*i, 17*i, 17*i ) where i is an index from 0 to 15 (note that 17 = #11). So what I want is a new formula of the form C = RGB( 17*i, 17*i, A + B*i) where “A” is that “extra blue” in each color and “B” is some number less than 17 such that A + B*15 = #FF (255). I created a spreadsheet which allowed me to assess the different values of A and B on the color palette. I tend to be somewhat anal, so I stuck with integer values of B… but for all practical purposes one could round non-integer results and no one would be the wiser. To simplify creating the tables in this article, I used the text manipulation features in the spreadsheet program (Sun OpenOffice 3.0) to create the table entries which I then pasted herein.

The following table shows a few A/B combinations and the resulting palette… note that the first row “(0, 17)” is the same as the gray-scale palette.

(A, B) 00010203 04050607 08091011 12131415
(0, 17) 000000 111111 222222 333333 444444 555555 666666 777777 888888 999999 AAAAAA BBBBBB CCCCCC DDDDDD EEEEEE FFFFFF
(15, 16) 00000F 11111F 22222F 33333F 44444F 55555F 66666F 77777F 88888F 99999F AAAAAF BBBBBF CCCCCF DDDDDF EEEEEF FFFFFF
(30, 15) 00001E 11112D 22223C 33334B 44445A 555569 666678 777787 888896 9999A5 AAAAB4 BBBBC3 CCCCD2 DDDDE1 EEEEF0 FFFFFF
(45, 14) 00002D 11113B 222249 333357 444465 555573 666681 77778F 88889D 9999AB AAAAB9 BBBBC7 CCCCD5 DDDDE3 EEEEF1 FFFFFF
(60, 13) 00003C 111149 222256 333363 444470 55557D 66668A 777797 8888A4 9999B1 AAAABE BBBBCB CCCCD8 DDDDE5 EEEEF2 FFFFFF
(75, 12) 00004B 111157 222263 33336F 44447B 555587 666693 77779F 8888AB 9999B7 AAAAC3 BBBBCF CCCCDB DDDDE7 EEEEF3 FFFFFF
(90, 11) 00005A 111165 222270 33337B 444486 555591 66669C 7777A7 8888B2 9999BD AAAAC8 BBBBD3 CCCCDE DDDDE9 EEEEF4 FFFFFF
(105, 10) 000069 111173 22227D 333387 444491 55559B 6666A5 7777AF 8888B9 9999C3 AAAACD BBBBD7 CCCCE1 DDDDEB EEEEF5 FFFFFF
(120, 9) 000078 111181 22228A 333393 44449C 5555A5 6666AE 7777B7 8888C0 9999C9 AAAAD2 BBBBDB CCCCE4 DDDDED EEEEF6 FFFFFF
(135, 8) 000087 11118F 222297 33339F 4444A7 5555AF 6666B7 7777BF 8888C7 9999CF AAAAD7 BBBBDF CCCCE7 DDDDEF EEEEF7 FFFFFF
(150, 7) 000096 11119D 2222A4 3333AB 4444B2 5555B9 6666C0 7777C7 8888CE 9999D5 AAAADC BBBBE3 CCCCEA DDDDF1 EEEEF8 FFFFFF
(165, 6) 0000A5 1111AB 2222B1 3333B7 4444BD 5555C3 6666C9 7777CF 8888D5 9999DB AAAAE1 BBBBE7 CCCCED DDDDF3 EEEEF9 FFFFFF
(180, 5) 0000B4 1111B9 2222BE 3333C3 4444C8 5555CD 6666D2 7777D7 8888DC 9999E1 AAAAE6 BBBBEB CCCCF0 DDDDF5 EEEEFA FFFFFF
(195, 4) 0000C3 1111C7 2222CB 3333CF 4444D3 5555D7 6666DB 7777DF 8888E3 9999E7 AAAAEB BBBBEF CCCCF3 DDDDF7 EEEEFB FFFFFF
(210, 3) 0000D2 1111D5 2222D8 3333DB 4444DE 5555E1 6666E4 7777E7 8888EA 9999ED AAAAF0 BBBBF3 CCCCF6 DDDDF9 EEEEFC FFFFFF
(225, 2) 0000E1 1111E3 2222E5 3333E7 4444E9 5555EB 6666ED 7777EF 8888F1 9999F3 AAAAF5 BBBBF7 CCCCF9 DDDDFB EEEEFD FFFFFF
(240, 1) 0000F0 1111F1 2222F2 3333F3 4444F4 5555F5 6666F6 7777F7 8888F8 9999F9 AAAAFA BBBBFB CCCCFC DDDDFD EEEEFE FFFFFF
(255, 0) 0000FF 1111FF 2222FF 3333FF 4444FF 5555FF 6666FF 7777FF 8888FF 9999FF AAAAFF BBBBFF CCCCFF DDDDFF EEEEFF FFFFFF

An interesting thing happened as a result of writing this journal entry… I’d initially created my spreadsheet hard-coding the values (30, 15) … this is the scheme I then entered manually into the appropriate CSS files. After modifying the spreadsheet to be more flexible to create the table above… and then viewing the table… I decided to go with the (75, 12) scheme instead. A bit more bluer and less “battleship gray.” Sadly I’d already made the first changes to the three CSS files impacted… so changing my mind put me back into search-and-replace mode. What would be really cool would be if I had a Sass version of the CSS… one way Sass augments CSS is in adding variables… and obviously life would be easier if I could just define my colors in one place using some naming scheme. Perhaps I’ll port the Fluid960 CSS to Sass as a future project, would be good fodder for another journal entry.

Website Credits | Symphony | Fluid 960 Grid System