Mark Allen Neil.com

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.

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.

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.