Colors Management, Why HSL()/HSLA() is always forgotten.
Everybody knows each function to definized a color in CSS. The most famous are X11, RGB() and RGBA() or HEX.
Least famous but equally important, HSL() and his counterpart HSLA() are functions to manage shadows and brightness in a chromatic circle.
Take back the features of each functions for a good comprehension of HSLs’ differents
The RGB() : Red Green Blue.
RVB is the most popular function of color management, is used by webdesigner, grafist, UX, because it’s not exclusive for web, and you could used that with design software like Adobe Suit.
It’s a system of coding color based on screen features. A screen is composed of billion pixel and each is composed of the three color’s luminophores (red green and blue)
The function target each pixel for actived a number of luminophores
This function is the basis of color management systems.
X11 or the current library of window
The X11 is an arbitrary list of colors preset in text file *.txt directly in a library of Windows système : /lib/X11/rgb.txt .
It’s a predefined a RGB() color list which called directly by their name.
HEX or Hexadecimal format
The HEX system is an other method to represent colors values. A hexadecimal colors is defined by #RRGGBB format: RR for red, GG for green and BB for blue. This hexadecimal has an integer in the range 00 to 99 and/or a Alphabetic range from AA to FF
Therefore, The HEX model is simply an other way to represented RGB() colors
The HSL()/HSLA(), think differently
The HSL() / HSLA() as for it is based on a different mode of colors’ representation with a Hue (H), a Saturation (S) and a Lightness (L). The positionnement degree on a preset chromatic circle, will indicated the level of red, yellow, green, cian, magenta and blue.
To the reverse of RGB() colors which targeting each pixel, HSL() function bring new hues with a luminophores mix
So, the Hue(H) will get a color value on this chromatic circle, for exemple, the range from 330° to 30° it will be Red nuances, from 30° to 90° it will be yellow nuances, from 90° to 160° it will be green nuaces, from 160° to 210° it will be Cian nuances, from 210° to 270° Blue nuances and to closing the loop, from 270° to 330° it will be Magenta nuances.
The Saturation value as for it is noticed from 0 to 100%
The Lightness value is noticed from 0 (black) to 100%(white), 50% is a basis hue
Nuaces and Shadows in a HSL() structure
The first advantage is the capacity to definized the hue’s nuaces (light colors) and shadows (dark color). And for that, you can change luminosity value.
/* Basis Hue */
color: hsl(14, 76%, 55%);
/* darkier */
color: hsl(14, 76%, 75%);
/* lightier */
color: hsl(14, 76%, 35%);The complementary colors.
If you played with Hue parameters, it’s possible to get a complementary color. For that, you have to add 180° to hue value on chromatic circle.
/* Basis Hue*/
color: hsl(14, 76%, 55%);
/* complementary color */
color: hsl(194, 76%, 55%);
It’s possible to get others adjacents complementaires colors to adding 120° and 240° again
/* Complementary adj. 1 */
color: hsl(134, 76%, 55%);
/* Complementary adj. 2 */
color: hsl(254, 76%, 55%);
Analogous colors
With Hue parameters, it’s also possible to get analogous colors. For that, you could add or remove 30° to the Hue value.
/* Analogue 1 */
color: hsl(44, 76%, 55%);
/* Analogue 2 */
color: hsl(344, 76%, 55%);
Monochromes colors
In the end, with the Saturation parameter, we could get a monochrome colors panels
/* Desaturation */
color: hsl(14, 46%, 55%);
/* stronger desaturation */
color: hsl(14, 16%, 55%);
Conclusion
There are a lot of advantages to used HSL() functions, but the main contrainst is that the value model is not standard . The design software like photoshop doesn’t use the same model HSL than CSS. the combinaison of value are not the same between two software. It’s not possible to catch the value to use directly in your CSS, and you must to convert it with tools like:
The second contrainst is that functions are not supported with less version of IE9.
