Introduction
Hello Coders, I hope everything is all good at your end.
First of all, if you have not read the introduction post, I would suggest reading here as you would have a better understanding of what this is all about. Also, it is strongly recommended to read the previous article on Colour Theory. That is because you would have a better understanding of the RGB colour model, its colour values, and how they are compared with the HSL model. It is also beneficial to know the meaning of all the technical terms that were mentioned and explained.
Also, if you have been following the series on the Principles of Web Design, you probably would have been expecting this to be about creating a colour scheme and palette. Sadly, not in this article. There will be a slight delay in publishing the topic on colour schemes, but it is ongoing and in working mode. So, I apologised, but please bear with me!
To make it up for this, I decided to take a mini-break on this, and create a guide on using HSL in your CSS. In the previous article, a suggestion has been made by a fellow FFC member that HSL could have been brought up and explained since it is not widely used and known. He has made an excellent point. For that reason, I thought this is a great opportunity to get into HSL, especially after learning about the colour theory.
Let’s get started!
What Exactly is HSL?
HSL stands for Hue, Saturation, and Lightness (or in some cases, you would hear Luminance).
It is an additive colour model just like the RGB model, it has its colour values, and its colour wheel. Also, when it comes to creating colour harmony, the HSL wheel can be used as a base to find the right colours. Some would think since HSL and RGB share the same purpose (that is creating colours on screen), what is precisely the point of using one or another? The difference between the RGB and the HSL colour model is the structure of how the colours are defined and how we use it to get that specific colour we want.
Colour Technical Terms Memory Booster
Hue
The standard colours that you see on the colour wheel. They are at its purest form, which means only primary colours were used in the mixing process to create secondary or tertiary colours. No black, white, and grey were used in the mixing process.Saturation
Saturation is the intensity of the colour (hue). If the colour is completely saturated, then this means the colour is at its fullest level of intensity and that it is not weakening down with either black, white, or grey. If the colour is entirely unsaturated, then the colour will appear like a shade of grey.Note
To avoid confusion, when I am talking about a hue, saturation, or lightness relative to the colour theory, I will write these words with the first letter in lowercase. If I am talking about Hue, Saturation, or Lightness based on the HSL model, I will write it with the first letter in uppercase.In the previous article, I have explained two things about how RGB colour values work:
Setting the amount of light
I have demonstrated each primary colour slider as if they are light dimmer switch. When an RGB colour value was at 0, that colour light was switched off and appear as pitch black. Otherwise, if we move the slider and set it to the value of 255, the light is entirely on at full blast and show the specific colour at its brightest and vividness.The colour-mixing process
I also show how we can use the RGB primary colours and mix them to create another colour as well as shade and tint. To create them, this would depend on how much of the primary colour lights were used to mix them together.Although the Lightness (of HSL) works similar to the RGB’s light dimmer switch approach, adjusting the values of HSL to create colours works very differently overall. The values of Hue, Saturation, and Lightness do not represent the primary colours, nor they are used together to mix and create a different colour.
There is also an HSL colour slider, and I will be using one for visual demonstration purpose. Here is an HSL colour slider by the W3School, and feel free to follow along on what I am doing. Note that this will be useful to keep as a tool for your future web design projects if you were to use the HSL model.
Also, here is the HSL colour wheel to get the visual idea. Its layout of colours are almost exactly the same as the RGB colour wheel, only it is horizontally flipped over.
Now you have seen the HSL colour wheel and slider, let’s go through each one and see how they work.
HSL - Hue Values
Note
Before I explain ahead, make sure the Saturation value is set to 100, and the Lightness value is 50. You will understand why shortly.If you look at the HSL slider, it shows a spectrum of colours throughout the scale and the values for Hue ranges from 0 to 360. That is because those colours are formed on the HSL colour wheel. Thus the colours in the slider are laid out in particular order. When you pick a specific colour, that colour’s Hue value is based on the position of the HSL wheel using the 360 degrees. To explain this better, I will include a case example.
I want to pick that pure blue hue (an RGB primary colour). On the Hue slider, I would drag its value to 240 because, on the HSL wheel, the angle of that pure blue colour is at 240 degrees. Or if I want to pick a distinct colour like pinkish-red, I could drag the Hue value to somewhere around 339. This would mean this particular colour is located at a 339 degree angle on the HSL wheel and is almost at the top to the hue red.
HSL - Saturation Values
Once you have found your perfect colour after playing around with the Hue values, the next step is to determine how saturated you want that colour to be. The saturation values go from 0 to 100 and are based on the percentage (%) unit. So, if the Saturation value is at 100%, that would mean the colour is fully saturated, and the colour would appear as vivid and bright. If the Saturation value is all the way down to 0%, this is where your colour will be replaced with a shade of grey.
Using the previous example where I have created a pinkish-red colour (Hue value is set to 339), the Saturation value should be initially set to 100%. Right now, the colour is looking bright and funky (yep, I used that word because I am so old-school ). But if I wanted the colour to be softer, could set the Saturation value to somewhere around 50%. In my case, I dragged it down to 45%, and as you can see, the colour has weakened and is no longer vibrant. But there is still an appearance of colour to the eye and now look more like a dark warmish pink colour.
This is great to use the Saturation value when wanting to create softer colours or even colours that has more grey in it, but still show a hint of colour like this one below. I have toned down the value to 25%.
When Adjusting Saturation Values SHOULD be Applied
If you have read the previous article on colour theory, I went into details of saturation and how it should be used appropriately. I have used the colour Magenta as an example to explain how it must be carefully applied. This colour is heavily saturated. It could strain the user’s eyes from looking at the web design layout, mainly if this is used as a background colour to the whole page.
I will provide you with an example of when you are including a heavily saturated colour and how to adjust the Saturation value without losing its vibrancy. Instead of Magenta, let’s do a different colour - Cyan.
First, let’s set the Hue value to get a Cyan colour, which is positioned at 180 degrees. With the Saturation value pointed to 100 and Lightness to 50, I think it is safe to say that the Cyan colour is already straining our eyes. Let slight decrease the Saturation value and see what difference it could make visually.
As you can see, Cyan is still looking like vibrant colour, even with the new changes to the Saturation value. But, those small tweaking on Saturation has helped to prevent our eyes being strained. That does make a massive difference to the website’s users as they now will be comfortable to stay on the page.
HSL - Lightness Values
Earlier, I have pointed out that the structure of Lightness is similar to the light dimmer switch approach used in the RGB colour slider. Well, it is, and it isn’t. The Lightness values also range from 0 to 100, and it goes by percentage (%) of how much light was used.When the Lightness value is at a low number, the colour is dark. But, as the value increases, the colour gets lighter. Thus, that could be relative to the dimmer switch approach. However, what is different from the RGB values, is that when then the value is set to 100%, it does not show the colour lightly at full blast. Instead, the colour appears as white.
This is where I will use a different approach to explain how the Lightness value works. First, set the Saturation value back to 100% and then to keep the demonstration simple, I will choose a primary colour, Red. There are two Hue values for pure Red - 0 and 360 (take your pick).
When the Lightness value is set at 50%, this is equivalent to an RGB colour value set at 255, meaning the colour is on at full blast. But, if the Lightness value decreases below 50%, the colour gets darker and become Black once it hit around the bottom at 0%. If the value increases above 50%, the colour gets lighter and goes white once the value hits 100%.
This is the concept I have come up with for the structure of Lightness:
-
Any values below 50% are to create a shade of the provided colour
-
Any values above 50% are to create a tint of the provided colour
How do we use it in CSS?
In CSS, there is a function to create a colour set in the HSL format. Here are the syntax and an example used in coding:
Syntax
hsl(Hue, Saturation, Lightness);
Example
div {
Background-color: hsl(280, 75%, 85%);
}
The <div>
background colour will now have a nice Lavender colour.
The Process of using RGB vs Using HSL to create a specific colour
This is to show you the normal flow of finding sophisticated colours and applying shades or tints in both RGB and HSL format. I will include the colour sliders in both forms. Here is a link to the RGB colour slider for visual purpose.
I am going to use a complex colour, a dark Teal colour.
RGB Process
First, it is best to look at the RGB colour wheel, and by my judgement, Teal would be more toward in the Cyan hue family. For simplicity, let’s create a Cyan colour first. To do this is to mix Green and Blue by setting their colour values to 255.
If you remember, to get a darker shade of the colour is to decrease the value of both two primary colours, Green and Blue, evenly. I have dropped the value down to 112 for both Green and Blue.
What if I wanted to add a slight of grey (desaturation) to the Teal colour? If you remember that when using the two primary colours to create another colour, the third primary colour is used to create a tint. However, the current colour we have created is already being darkened and weaken down.
Here is the logic using colour paints. We have pure colour, then we darkened it by adding Black paint. When we add White paint to the colour, technically you are also mixing Black with White, not just Black with the specific colour. By doing this, it becomes Grey (hence, that is how you create desaturation).
But with the RGB model, you have to be careful on how much you use the third primary colour to create either a tint or saturation. Thus only a small amount can be used. In my case, I will increase the Red slider to 20.
HSL Process
To create that exact colour of Teal in the HSL format merely is easy. Using the HSL slider, first, adjust the Hue value to 180 degrees to get the Cyan colour that I have mentioned above.
Since the colour is heavily saturated, we want to tone that down by decreasing the Saturation value to 75%.
The Cyan colour is now looking much visually comfortable. But, we are after the Teal colour, so we need to create a shade of the hue Cyan. That would mean to adjust the Lightness value, and I decreased it to roughly around 25%.
Pros & Cons of HSL Model
The Advantage of using HSL
When you compare the process of creating colour in HSL format to RGB, the HSL format, it does make a massive difference. As you can see above, producing colour in the RGB mode requires a good knowledge about how colours are mixed to create either a different colour, shade, or tint. With the HSL process, it is a time-saver method and also very simple, especially for someone with little knowledge in colour theory.The Disadvantage of using HSL
Well, this actually does not represent the fundamentals of the colour theory and how colours work based on a scientific concept. If you do have good knowledge in colour theory, then it shouldn’t be a problem to use this model (at least in my opinion).Also, even though the hsl() function is now widely supported across different browsers, it should be used with caution. Internet Explorer and Opera have introduced the support of hsl() function in later versions (IE - 9 and Opera - 9.5). This means the users of those two browsers in earlier versions may not see the defined colours on their screen as it will not be recognised.
However, that is not to say you cannot use the hsl() function at all. But, it is only best to be used when you are at the stage of finding colours you want. Then, you can convert the HSL values to either Hex values or RGB values once the code goes into live production.
Conclusion
I personally have always used the RGB model when I am working on digital design projects and when I am using a graphic editor for it. My reason for this is it is a model that I have used for a long time, and I have become comfortable in using it. Thus, it is why I have never looked into the HSL model.That is not to say that it is not recommended to create colours in HSL format. In fact, when it was suggested that I could do an explanation on HSL. I thought it could be an excellent opportunity to be adaptable and go into research and play around with the model. Boy, am I glad I did! But, after doing my research on HSL, it has left me with a couple of thoughts.
After playing around with it, I can definitely say that using the HSL model is far easier to create colours than with the RGB model. Therefore it is no surprise why it has been encouraged upon the web designers and developers community to use it. But, despite its positive attention HSL received, it is still a debate on when one model should be used over another.
Although it can be beneficial to use the HSL model, it is still vital to have an understanding of the colour theory and the use of the RGB model.
So, what is your thought on this? If you haven’t use the HSL model before, would you now after reading this?