The Basic Principles of Web Design: A Guide to using HSL - What is it and is it better than RGB?

The Basic Principles of Web Design: A Guide to using HSL - What is it and is it better than RGB?
0

Introduction

Hello Coders, I hope everything is all good at your end. :slight_smile:

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 :stuck_out_tongue_winking_eye:). 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? :thinking:

5 Likes

I have never delved into the HSL model. Therefore, this profound explanation provides a great possibility to learn the basic stuff about HSL and how to integrate it in CSS. Excellent work, Madalena.

1 Like

Thank you very much @Joerg. :slight_smile:

To be fair, neither have I. Every time I get to learn it from somewhere, I always get confused and eventually put off to use it. So, when I did further research and experimenting on the HSL model, I felt dumbfounded by how easy it was to use.

However, this is my personal experience of why I have never used it before. But, I do wonder that despite HSL is so simple, why has HSL failed to attract the attention of everyone else. Could it be a lack of information? Or, the way it has been explained could be improved?

Great article, as always! Very informative :slight_smile: I personally never used HSL values for colors, but instead always gone with either HEX or RGB. Then again, to be fair, I mostly use tools to get the color I want (like, for example, the W3Schools color picker, or even the built-in pickers that some code editors have - I use VS Code, don’t know about the others) :sweat_smile:

After reading this, however, I really have a feeling that HSL is much more intuitive than other systems, so it is surprising that it’s not used more often. Although, it might be because people are already used to representing colors with the RGB model. I guess breaking a habit is never easy, even if it makes your life easier (plus, as you’ve mentioned, there’s the issue of compatibility with older browsers) :smiley:

1 Like

@kristina_v thank you so much! :blush:

Everything you have said above is definitely correct, and I couldn’t agree more. I have always stuck to the HEX or RGB using either the colour slider or colour picker via in-built tools as well. So, I guess that when we become so comfortable using the process we have used for so long, it becomes “natural” for us (even if it does take more time). Like you have said - breaking a habit is never easy! :stuck_out_tongue:

But, what about for someone who lacks awareness in how colours work. 0r someone who start learning to code in HTML/CSS level, if they are yet to learn about HEX and RGB. Could it be better to learn first about the HSL model to understand the concept of colours and then learn about RGB/HEX? That would be of course if there weren’t any browser compatibility issues.

My goodness, I feel like a little child with so many questions to ask about life. :joy:

1 Like

@Madalena.design All great questions! :smiley: From a developer perspective, I guess it would be easier to wrap your head around HSL values than trying to compute which colors you need to mix and in what ratio in order to get RGB (not to mention HEX which looks even more obscure than RGB, although it’s shorter and I guess it looks least cluttering in a code) :sweat_smile:

And plus, apart from the compatibility issues, I don’t see any particular shortcomings of HSL. It even has a variant with opacity, just like RGB, so who knows, maybe the new generations of designers and web developers will mostly use HSL :slight_smile:

By the way, I’ve come across this article which also advocates for the usefulness of HSL, and there’s this one other cool benefit of the system that the author mentions, and I’m quoting: “if you start with a color and you want to get its complimentary one, all you need to do in CSS is to add 180° to the value of the Hue”! So logical and yet it didn’t even cross my mind, so I just thought I’d share! :smiley:

1 Like

Oh yes, there is a hsla() function as well! Dang! I could have brought this up in the topic :see_no_evil: Hopefully, this will be enough to get anyone started. :wink:

I think HSL got the potential to fit in as one of the common models to use in the digital projects. Will it beat RGB? That, I do not know. But, I can see developers (especially those who do not want to take interest in colour concepts) using this more.

I had a skimmed through it and it looks like a great read. Especially, the next article is all about colour schemes and complementary colours, this looks really useful! Thank you so much for this @kristina_v! :blush:

So, this is like if I created a hue base colour and the Hue value is 30° (I believe that would be an Orange colour). That would mean the value of Hue for the opposite colour would be 210°, which would be a blue-green colour (if I am correct)…wow, it is so logical!

Right, tea is on and I am getting into that article! Again, thank you so much!

1 Like

No problem! Thank you for an amazing article and I can’t wait to read the next one :blush:

1 Like

I suppose it’s just the power of habit. People are used to the RGB model and have a somewhat unconscious aversion to switch fearing HSL might be more complicated than RGB. But working with the saturation value seems to be pretty easy and it’s perfect to create a layout where the colors are in harmony almost on the fly. There’s a proverb that says: The chains of habit are too weak to be felt until they are too strong to be broken. This may be applicable to the HSL/RGB issue.

1 Like

That is exactly it. Imagine for someone who has a small understanding of colour theory and got to use RGB for their project, they may just struggle to create a colour, let’s alone a colour with a specific level of saturation.

Although, I agree that it is a hard habit to break for someone who is used to the RGB. However, for someone who is completely new to both web development and design, learning about colours with HSL first, and RGB later may be more helpful for them to learn.

Weldone job to you. Although, I haven’t go through the content yet and I hope to do so very soon. Thanks for the tutorial!!

1 Like

My two big takeaways are: 1) HSL is nifty. Use it. And 2) If you have a decent color picker UI, the color model doesn’t matter.

BTW, check out Sass’s color manipulation functions. Instead of manipulating HSL values directly, you can do stuff like darken(desaturate(red, 20%), 10%)

1 Like

oh! I didn’t realise we could pass a function within another function in SASS, that is a smart, yet simple trick you have provided. :open_mouth:

As I love SASS so much, I will definitely look more into this and play around with these functions. Thank you fpr this :blush:

You are very much welcome. :blush: I hope you get to enjoy and find this helpful!

Thank you very much for the in-depth summery to HSL :blush: :+1:

Could it be, that there is a small mistake on the degree numbers? I guess orange should be at 30° and not 60°(for both colour wheels - but I guess, it is the same image anyway)?

1 Like

You are correct, this is indeed a mistake! A very big thank you for pointing this out! :scream:

I am going to see if I can fix this up, however, I am glad to hear that you have found this to be in-depth and I hope this was an enjoyable read as well as helpful. :blush:

EDIT: Images are now corrected. :slight_smile: