The HSL color model stands for Hue, Saturation, and Lightness. After waiting for CSS and browser support Can I Use has the status at a 99.45%. This is fantastic news for developers and it’s time we learn a new color mode.
HSL uses a simple approach to color and how we use it. The first number in the HSL code is the hue. This is the base of the color we wish to use. There are 360 degrees in a circle and each number represents a color. The image below displays the color red as 0 and the color magenta as 300.
I know that looking at the color wheel may seem a bit daunting at first so I have a solution to help you along the way. Use the chart below to give you a perfect place to start from. The chart only has 6 positions to work with and you may use it as a point of reference.
Let us say that you were looking for the color purple. The wheel indicates that 300 represents the color magenta. Now add a little blue to give yourself a shade of purple. The color 270 may be perfect for you. You might like a little more blue and the number 265 should work. The color difference is there but it is very slight. I added a gradient to the bottom of the image for you to view as well.
HSL Saturation
The second number in the HSL called saturation and a percentage mark follows the number. The best way to describe the second number is to think of the intensity of the color you desire. If you take the color wheel and look at the outside the color is fully saturated and is the most colorful. As you move inside the wheel the color becomes less saturated and at 0% the color is grey. Have a look at the following image. The second number is the saturation percentage.
HSL Luminosity
The last number in the HSL code is for lightness. It is the amount of brightness or the amount of luminosity the color has. Using percentages the lightness shows the amount of black or white in the color. At 0% the color is black and at 100% the color is white. If the luminosity is set at 50% it means the color has a perfect balance between white and black. Allow me to present another image that gives you a more clear understanding.
The Alpha Channel
We all like to use a little transparency in our code, and yes, HSL has an alpha channel as well. As you would use RGBA(0, 0, 0, 0.5), you may use HSLA( 0, 0%, 0%, 0.5). In case you are not familiar with the alpha channel, it is in reference to adding transparency to the image. In CSS you may be familiar with opacity. If you use the alpha over opacity your child elements will not inherit the transparency.
The Great Part of HSL
The color modes that we use is difficult to know the color with the use of numbers and letters. Using Hex code is a fast way to place colors, but do you know what that color is off the top of your head? RGB is a little easier to understand but still has the same conclusion in the end.
HSL uses only the hue to represent the color. Any changes you make to saturation and the luminosity are up to you. If I decide to use the color green. Using the number 120 on the HSL color wheel will give me a green.
hsl(120, 100%, 50%)
Now I need a darker version of the green as well as a lighter version of the green. I may adjust the last percentage to make it darker or lighter.
hsl(120, 100%, 30%) /*Gives me a darker color of green */ hsl(120, 100%, 70%) /*Gives me a lighter color of green */
I may want to go even further and change the saturation levels on the colors.
hsl(120, 25%, 50%) hsl(120, 50%, 30%) hsl(120, 75%, 70%)
Using one color and making a couple of adjustments to luminosity and saturation I now have 3 colors.
The Problem with HSL
The primary issue with HSL is the lightness attribute. The lightness does not correspond to what we perceive as lightness. HSL only requires the Hue value for the color. The default setting for saturation is 100%. The default for lightness is 50%. The image below displays two colors using the default values. Which color is brighter or lighter?
The yellow color is brighter or lighter on the eyes. The blue color appears darker. This means that HSL is not perceptually uniform. That does not mean that it is not a great way to use and manipulate colors, and I still enjoy using it. I have a firm belief that you will enjoy using HSL as well.
Something New Is On The Way
Today our monitors are able to display more colors than they could years ago. Imagine the mysteries behind the new color spectrum that will soon be available to you. The use of vibrant colors to bring your website to life.
LCH stands for Luminance, Chroma, Hue and will soon be available for us. Currently, most browsers as well as CSS do not support the new color standard. I can not wait until it is available for us to use. It is something to look forward to.
