The hsla(); color function
A more intuitive color model
If you are a developer with ties to the design world or just like to manage your color assets like a pro you really should take a look at the HSL color scheme.
Hexadecimal color model
As we know the most common used method for displaying color in web is by using the hex color format. In the world of confusing hexadecimal codes you will likely see something familiar like this:
#ffffff = white#000000 = blackbut what is #5ebf41 or #4152bf?
A hexadecimal color code consists of three hex pairs. #RR GG BB which stands for red, green and blue. FF is the highest (lightest) and 00 the lowest (darkest) value.
So the hexadecimal model is convenient, because it’s short and used for a long time. As developers mostly get their color-codes from designers without the need to experiment or change these colors the development in this sector seems a bit behind. So the hexadecimal system lacks of some important features like recognizing a color, spotting errors or toning and forecasting a color.
RGB color model
The second commonly used method is the RGB-model. Which stands for the mixture of the base colors red, green and blue. All colors you see on nowadays electronic devices origin of these three colors. As mentioned for the #hex part it is a very hard to distinguish which color is implemented in the code. The actual color is created due to the mixture of red, green and blue. We remember #RRGGBB. Which can be kind of tricky to achieve if you are up to some non-standard colors. The extended version of the rgb method for the web is called rgba where the a stands for alpha, which is the transparency value.
//Easyrgba(255, 255, 255, 1) — Every pixel is fully enlightened with red, green, blue and fully visible which results in a solid white.rgba(0, 0, 0, 1) — Every pixel ain’t display any red, green, blue but is fully visible, which is a solid black.rgba(0, 0, 0, 0.5) — You guessed it. 50% transparent black — visible as grey.*****************************//Problemrgba(122, 72, 200, 1) — Ok. What?rgba(72, 50, 190, 0.5) — Eh. All i know is it’s half transparent.
If you would try to find out which exact amount of red, green and blue results in a let’s say shade of dark violet — you would have to know a lot about mixing colors. Definetly more than you have to while doing web design. Thankfully there is another way to get to the exact color you want with ease which you will learn about in the next step.
HSL color model
HSL stands for hue, saturation and lightness. Important to mention is, that there is also a color scheme called HSB which stands for hue, saturation and brightness. This color model lacks the ability to display a color from its lightest version to the darkest while keeping hue and saturation constant. So make sure to use HSL to display the full range of color tones.
With the HSL color model you don’t have to be a bob-ross like color mixing wizard. All you have to keep in mind is the ancient color wheel of good old Newton. Basically an evergreen when it comes to colors.
The syntax for hsl is like rgba extended by the alpha value to display transparency. Which results in a very familiar syntax hsla(hue, saturation, lightness, alpha);
Remember to put a % behind saturation and lightness values. Personally I think it’s a little inconsistent to use percentage here and the syntax would look cleaner without it. Although it would be faster/easier to type.
//Easyhsla(0, 0%, 100%, 1) //Zero hue, saturation but maximum lightness with full visibilty is a solid white.hsla(0, 0%, 0%, 1) //Zero hue, not saturated and no light at all. Must be black. Annotation: Any hue or saturation with zero lightness would be a solid black.//Managablehsla(120, 50%, 50%, 1) //All we have to remember is the color wheel. 180° must be a green with 50 percent saturation and lightness. So problably a pretty standard solid green.hsla(240, 80%, 20%, 0.3) //240 is a strong saturated dark blue, but only 30% visible — therefore 70% transparent.
Conclusion
What have we learned? There a multiple color systems as hexadecimal, rgb or hsl. The latter is not as wide spread as the other ones, but it definetly has advantages as long as you just have to remember the color wheel instead of cryptical numbers. With hsla(hue, saturation, lightness, alpha); you just have to pick a hue and you will be able to mix every tone you want from it. No more guesswork. Nice! 🎉
