Summary

When I customize a web site template, I always replace the color palette looking for a consistent set of colors. In this series I’ll tell how I managed to speed up the whole process, by building a set of Razor functions and push the Razor syntax inside a CSS stylesheet.

PS: We won’t use LESS.

Refreshing a pre-cooked template

One of the tasks I have to accomplish anytime I start a new web project is how to design the interface and chose consistent colors. Nonetheless, especially for little projects or back-office web sites, what I need mostly is to customize the default web site template that comes with Visual Studio ASP.NET MVC3 projects.

The process of customization is basically a combination of two tasks: customizing the color palette and defining a new layout; if you are using the default ASP.NET MVC3 template, those tasks implicate the manipulation of a couple of files: “/Content/Site.css” and “/Views/Shared/_Layout.cshtml”.

As you can see running you project (or reading the Site.css code):

/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/

Unfortunately replacing the base color (#5c87b2)doesn’t suffice, since quite all the elements of the page are tuned with it, providing a consistent look. What you should really do is chose a new base color and build a set of harmonious colors based on it.

A starship travel

It is probable that the simplest way to build a consistent color palette is to chose a base color and then stretch a gradient around it, both towards shadows and highlights.

Each color is defined in the RGB space by a triplet of integer numbers ranging from 0 to 255, known as Red, Green and Blue channels. This is a convenient way to think a color, since it is the nearest to how our eyes-brain system perceives lights and how electrical devices create colored light (just think about CRT and LCD displays). But if have to build shadowed or highlighted version of a color, you cannot start from its RGB representation. A more useful starting point is to convert the RGB triplet into an HSL triplet (that is similar to take a starship and travel from the RGB universe to the HSL universe. In this case, the black hole that let out starship change universe is a transformation function),

The HSL acronym stands for Hue, Saturation and Lightness (of course you can find more info here). In this space, the Lightness is all we want to change (zero means absence of light, that’s to say BLACK, maximum value means maximum light, that’s to say WHITE). Any color with a minimum amount of light is defined by the two other coordinates: Hue and Saturation.

Talking about Microsoft .Net and C#, you can easily travel to the HSL space, but System.Drawing can only sell you a  one-way ticket: you can extract Hue, Saturation and Lightness from a System.Color but you cannot build a System.Color from an HSL triplet.

Confusing enough, you extract a Hue via Color.GetHue() method, Saturation via Color.GetSaturation() method, BUT Lightness via Color.GetBrightness().

Moreover, GetHue() ranges between 0 and 360 (degrees),  but GetSaturation() and GetBrightness() range from 0 and 1 (ok, we can live with it.. just multiply them by, say, a 240 scale value to get handy integer values to deal with).

The following LINQpad snippet lets you travel to the HSL space at light speed!

var colors = from n in new[]{"Red","Green","Blue","White","Black","DarkBlue"}
    let c = Color.FromName(n)
    select new {
     c.Name,
     c.R, c.G, c.B,
     H = (int)c.GetHue(),
     S = (int)(240*c.GetSaturation()),
     L = (int)(240*c.GetBrightness())

colors.Dump();

This is the result:

In order to automate the creation of a nice gradient, we need to:

• Get the HSL of our base color
• Vary the Lightness value towards shadows or highlights (easy like adding or subtracting a number)
• Build the RGB triplet from the rendered HSB color.

As we have seen, Step 1 is provided courtesy by Microsoft and Step 2 is simple math. But Step 3 means traveling back to the RGB space, and Microsoft starship doesn’t fly there.

In my next post I’ll tell how to find a star gate back to the RGB space and build a convenient set of Razor C# functions to easily manipulate all this colored stuff. Finally we will integrate this rocket science technology to the CSS language, building a system similar to LESS (but LESS-less)

Happy programming and stay tuned!

..or go to Part 2.