Using HSL in Jquery

HSL is another way to set colours in CSS3, however you will need a fallback to support ancient browsers. Jquery on the other hand automatically converts these into RGB, eliminating the fallback. Yay!
By default a pure colour has 100% Saturation and 50% lightness. Example : "red" or "#F00" is done like this : hsl(0,100%,50%)

Dynamically coloured boxes : (Click a box!)

1
2
3
4
5
6
7
8
9
10
Saturation
Lightness

The key to this is using HSL (Hue, Saturation, Lightness) instead of rgb or hex. If you use HSL, you set the saturation/lightness of the colour and then use an expression to drive the "H" - the hue. The hue will then shift colour according to whatever you feed it. In this demo I just used the text of the div, you can use the array count or whatever magic number system you'd like.

Less hassle on setting up mouseover colours

Why not set your un-mouseovered colour to 15% Saturation of the element?


(Note : These are using HSL in pure CSS, so if you inspect the element it won't be converted to RGB like the rest of the Jquery elements)

9 shades of gray

1
2
3
4
5
6
7
8
9
10

Easy Grayscale :
Setting H & S to 0, adjusting the lightness can give you the grayscale accurately to the percent. If you're after a colour gradient, all you have to do is set the saturation to 50% on top.

Example :
H : 0, S : 0%, L : 0% = Black.
H : 0, S : 0%, L : 20% = Charcoal.
H : 0, S : 0%, L : 100% = white