Color Modules in CSS3

In CSS3 there is an additional color module HSL along with RGB. If alpha channel is needed then it has to be delcared as RGBA and HSLA. HSL stands for Hue, Saturation and Lightness. RGB is the combination of Red, Green and Blue colors which are used in monitors. HSL is easy to define color rather than traditional RGB. Hue is the actual color which is defined in degrees from 0 to 360. 0 degree is Red, 120 is Green and 240 is Blue and mathematically 0 and 360 are same so 360 is Red.Hue scale.

Bi hex cone model

HSL

The other colors are defined in various degrees by these color combinations. 60 yellow, 180 cyan, 300 magenta. The Saturation is the scale between the Hue and the monochrome color or the black and white color which is defined by lightness. From the figure on the right it clearly shows the lightness the value between black and white and saturation is the color between lightness and hue. Note that chroma in the figure is actually saturation. In css it is declared as the following example, the obtained color is represented in the comments part of the code snippet.

* { color: hsl(0, 100%, 50%) } /* red */
* { color: hsl(120, 100%, 50%) } /* lime */
* { color: hsl(120, 100%, 25%) } /* dark green */
* { color: hsl(120, 100%, 75%) } /* light green */
* { color: hsl(120, 75%, 75%) } /* pastel green, and so on */

 

Transparency can be obtained by using hsla or rgba. Alpha channel is the fourth channel which gives transparency to the color. Note that the transparency is defined on the scale from 0 to 1. 0 is fully transparent and 1 in opaque.

* { color: hsl(0, 100%, 50%, 0.5) } /* red with 50% transparency */

RGB color module is familiar its the combination of Red Green and Blue. The values are between 0 to 255 or 0 to 100%. The RGB is commonly used so i wont be going deep in explaining RGB.

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      /* integer range 0 - 255 */
em { color: rgba(255,0,0,0.5)   /* red with transparency of 50% */
em { color: rgb(100%,0%,0%) }   /* float range 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* fully opaque */

 

Leave a Reply