No Mind

It's the mind that makes you miss the shot
April 18th, 2010

Css3 – HSLA color model

The css3 candidate recommendation from W3C brings HSL (hue-saturation-lightness) model to web browser. This model is a complement to RGBA model supported by CSS. While RGBA provides a method for defining color, RGBA model reflects how CRT’s understand color. Humans on the other hand have a different thinking process for color. HSL model is closer to how a human would pick a color.

So what is HSL model ?

To understand HSL model, let us first look at how a human would pick a color. When you want to paint your room, how will you choose the color(s) of the wall ?  You will first choose a base color that is,  you will choose whether you want read, blue, yellow, pink or any other color. Then you will decide on the shade and tone of the color, to select the exact color you want. You will never go about piking the values of red, green and blue and mixing them to find the color you want.

Artist follow a more streamlined approach to picking a color. Artist paint a color wheel , in which color hues are organized in a circle.  Once the color hue is decided, an artist would decide on the tone of the color that is, what is the blueness of blue or what is the redness of red, whether to use pure blue or to mix it with some yellow. Tones for a color are generated by mixing pure colors or a shade of gray . Lastly comes the shade of the color or how dark the color will be. Shades of color can be created by mixing white or black, to vary the darkness of the color. When all three; hue, tone and shade are decided, artist arrives at the color he wanted.

HSL model is closer to the way an artist or a normal human would choose a color. HSL is represented by a triple (hue, saturation, lightness). Hue is represents the angle in the color wheel.  Red is 0 or 360, greenis 120, blue is 240 etc. Saturation and lightness are represented by percentages. Saturation varies from 100% for full saturation to 0% for shade of gray. Lightness varies from 100% for white to 0% for black.

HSL model in CSS3

In CSS3 HSL model supports a fourth argument, opacity or the alpha channel. Opacity value of one is fully opaque while opacity value of 0 is fully transparent. Following example defines a semitransparent solid blue using HSL/A model.

p { color: hsla(240, 100%, 50%, 0.5) }

Advantages of HSL model

HSL model is intuitive and closer to how humans think of color. RGBA model on the other hand will require some sort of internal translation by a human, to visualize the actual color.