HSL: the conceptual model

What color? How much color? How bright?

 
° % %

Using HSL

(26 sec.)
Then use the number controls above to experiment with this model.

You can work with HSL and RGB models together on our Demo page, and see both models discussed in our Video.

To use the HSL model for Web stylesheets (css), the format is: "hsl(hhh, sss%, lll%)", where "hhh", "sss", and "lll" represent the hue, saturation, and light values that you have set in the controls above.