(Updated: please see update at the end of this post)

Inspired by the recent article “Less” on “Stuff & Nonsense” by Andy Clarke (@malarkey), I finally jumped the wagon and had my first round with the CSS-pre-processor Less.

My usecase is a rather large website that changes it’s colour-scheme to complement the look of the corresponding print-magazine, which is published roughly every two to three months.

I have a rather simple colour-scheme, with a solid basecolour and three variants that are basically results of overlaying the base with different transparent whites (50%, 80%,90%), along with some solid white, black and grey (not discussed here):

scheme-450x172

Lighten Up!

So my firstmost interest in Less was with it’s colour-functions, esp. the lighten() function seemed to me like a very good idea:

Color functions
LESS provides a variety of functions which transform colors. Colors are first converted to the HSL color-space, and then manipulated at the channel level […]
lighten(@color, 10%); // return a color which is 10% lighter than @color
[…]

So, assuming (and not quite understanding how the HSB (Hue|Saturation|Brightness) Colourspace works), that this is exactly what I needed, I eagerly wrote my first set of rules:

@base : #4d4962;
@c50 : lighten(@base,50%);
@c80 : lighten(@base,80%);
@c90 : lighten(@base,90%);

I thought, if I add a 90% white layer over my basecolour in Photoshop, (resulting in #ececee), “lightening” my basecolour in Less by 90% would do the same (and likewise for the other two values).

What I expected (coming from photoshop) was:

.base {#4d4962}
.c50 {a4a2af}
.c80 {dadadf}
.c90 {ececee}

Boy, was I wrong. What finally ended up in the compiled css-file was:

.base {#4d4962}
.c50 {#d1cfdb}
.c80 {#ffffff}
.c90 {#ffffff}

So you’re thinking, wtf? – Welcome to the club.

To cut a long story short, after comparing the “Less” values (again, in photoshop) with the declarations and the basecolour in HSB-mode (250°|26%|38%), I observed that the new “B” Value (remember, brightness) apparently gets computed by taking the B-value of the basecolour and add the value from the lighten() function.

If the result of that operation is greater than 100, the resulting colour is white.

So if you try to make a colour, say, by 35% lighter, and the colour has a “B”-value that’s already at 70%, you’ll end up with 105% aka white. What I expected was something like “if the colour is at 70%, and I’ll make it 30% lighter, that’ll be 30% of 70%, i.e. 23%, so the result will be 93%, i.e. slightly darker than white (o.k., bad example, but I hope you get the drift…)

I am still unsure if this is the correct behaviour and/or if the description on the Less page is misleading.

You Spin Me Right Round Baby Right Round Like A Record Baby Round Round

Another thing that puzzles me is the spin() function. Here, the “hue” value is modified, or “rotated” around the HSB/L cone by the value given in the function.

In @malarkey’s article, at one point he writes:

@col : #468DB6; // Base colour
@comp : spin(@col, 180); // Complementary colour

Without getting to deep into colour-theory, a Complementary Colour is the colour that sits opposite to the basecolour on the colour-circle, and is used often to contrast and enhance the basecolour.
So computing that colour via Less seems like a good idea, but again, there’s some hair in the soup…

This time, the “rotation” affects the “Hue” value only, and again the resulting colour is not exactly what one would expect.

Using photoshop’s “invert” function, the Complementary Colour of my basecolour
#4d4962 (250°|26%|38% in HSB)
should be
#b2b69d (70°|14%|71% in HSB).
Using spin(@base,180), Less will give me
#5e6249
which equals to (70°|26%|38%) in HSB.

Note how only the first value differs from the basecolour’s HSB-code and how the resulting colour is not what is desired.

So the conclusion for me is not to rely on the colour-functions of Less, if I need to create visually harmonic schemes.
I’m totally at loss about the “lighten” thing, since simulating a transparent white overlay to get the resulting colour seems not to work with Less, I have no idea how to circumvent the photoshop-route…

What do you think?

Update

I have made some more tests, and there is one huge difference between the HSB colorspace (what Photoshop offers in it’s colorpick menu) and the HSL colorspace (which is used internally in Less), and it took me a while to spot it: Photoshop says that #4D4962 is 250|26|38 in HSB. After I found a way to debug the HSL-values in Less, I was surprised to see 250|15|34 in HSL. So no wonder that the HSB values put into HSL will not result in the expected color. :-/