Wednesday, 23 November 2011

CSS3 HSL Colors Value

CSS3 is introduce with some new features so let’s talk about some new features with colors in CSS3.

With CSS we are using hexadecimal and RGB colors but CSS3 introduce new HSL which is abbreviation of Hue, Saturation and lightness.

HSL contain 3 values the first one is Hue as name suggest it is use to reflect different shades. On color wheel its degree 0 is red, 120 is green and 240 is blue. Saturation is the full colour so the percentage value of it is a 100%. Lightness is for using light colors and for the color setting the percentage is 0% is dark or we can say black, 100% is light here we can say it white and 50% is average color.
Well in HSL has been implemented on Opera 9.5, Safari 3 and Konqueror and Mozilla browsers. With the implementation of these HSL value web designers from website design Florida can give an extensive variety of different colors and its tendency which you can see in following example.
* { color: hsl(0, 100%, 50%) }   /* red */
* { color: hsl(120, 100%, 50%) } /* green */
* { color: hsl(120, 100%, 25%) } /* light green */
* { color: hsl(120, 100%, 75%) } /* dark green */
* { color: hsl(120, 50%, 50%) }  /* pastel green, and so on */

HSL color is more insightful than RGB is the benefits of using HSL over RGB and the another advantage is with HSL you can guess at the colors which you want and then tweak, also you can easily create sets of matching colors.

No comments:

Post a Comment