why-css-hsl-colors-are-better!

With the Power of CSS Variables

Elad Shechter

Introduction

One of the most fundamental concepts in CSS is colors. It’s a basic concept everywhere, but in this article, we’ll be focusing on its representation when targeting browsers.

On the web, every color is a combination of 3 colors: red, green, and blue. It’s as if every pixel on the screen consists of three light-bulbs: green, blue, and red. The most common method for representing colors in CSS is the “Hexadecimal colors” method, and the next common method is the RGB/RGBA one. The two approaches differ in the way they represent the values of those colors.

pixels view from close look

The hexadecimal colors method— each of the three colors is represented using a double-digit HEX number, and a ‘#’ sign precedes the three figures. Each of the double-digit numbers defines the intensity of its respective “light-bulb”. The first double-digit number is for the pixel’s red light-bulb , the second number is for the green light-bulb, and the last one is for the blue light-bulb. We can also add double-digits number at the end, that will define the color’s opacity.

As you probably know, the hexadecimal base means that a digit’s value can be between 0 and 15, with the values of 10–15 represented by the letters A to F. In each of the double-digit numbers, the lowest number, 00, means that the bulb is shut off, and the highest number, FF, is the strongest light of this specific color. There are 256 intensity levels for each of these three colors. With those three light-bulbs that make up every pixel of color, we can create any color displayed on our screen. The two optional digits that define the color’s opacity are also a double-digit hexadecimal number. The highest value, FF, means full opacity, and the lowest value, 00, means total transparency. The numbers in between make the element semi-transparent, i.e., the color blends with the background color.

Here is an example of the red color(only the first light-bulb is on, the other bulbs are off):

.box{

background-color: #ff0000;

width: 100px;

height: 100px;

}

The RGB/RGBA colors method —this method is also based on each color being a combination of red, green, and blue. There are, however, two differences between this method and the hexadecimal one. First, this method uses decimal values as opposed to hexadecimal values in the previous way. Second, the syntax isn’t a string of numbers but a function — rgb() or rgba(). The functions accept a three-digit number between 0 and 255 for each of the red, green, and the blue “light-bulbs”. 0 means that the bulb is off, and 255 indicates that the light-bulb is with full brightness intensity. The rgba() function accepts a fourth parameter — the opacity. Its value is a decimal fraction, where 0 means full transparency, and 1 means full opacity, and the fractions in between are the element’s transparency percent.

Here is an example of the red color in RGB method:

.box{

background-color: rgb(255, 0, 0);

width: 100px;

height: 100px;

}

Working with the methods based on the color being a combination of red, green, and blue, raises a few challenges. The first is that this method isn’t intuitive — it isn’t how our minds perceive colors. When we look at a color, our brains don’t separate it into red, green, and blue. Therefore when writing the colors in such a way, we can’t easily recognize a color by its RGB number, whether hexadecimal or decimal.

Another potential challenge is maintenance. Web designers might sometimes want many shades of each color, for example, 30 types of blue, 20 types of orange, etc. When trying to maintain these many variations with CSS variables, we might end up with too many variables. What’s worse is that even though the colors might be different shades of the same color, their RGB representations aren’t connected in any way. Therefore if the web designer wants to change the blue scheme into a green scheme, it might require updating ten or more separate CSS variables.

The HSL/HSLA color method — HSL stands for hue, saturation, and lightness.

HSL works in the same way our brain perceives colors: a color that we can manipulate with lightness and saturation.

The Hue Property is a color picked from a palette of 360 colors. The colors are set in a circle, and each hue is a degree in the color-wheel. The chosen color is the base from which we’ll create other shades by adding saturation, lightness, or both.

The Saturation Property describes the color’s saturation. 0% means no color (the color will be grey), and a value of 100% will show the color in its most vibrant color. It’s best to use a value in the range of 10% — 100% since that will allow us to see the base color.

The Lightness Property describes the lighting intensity. The extreme values will eliminate the color: 0% will look black, and 100% will look white. Therefore we prefer to use numbers between 10% and 90% since that will allow us to see the base color.

The Alpha Channel Property (optional) — using HSLA instead of HSL allows us to control the color’s opacity. It’s best to use values in the range of 10% — 100% since that will enable us to see the base color (0% means transparent color).

The HSL method solves both problems we mentioned earlier. It corresponds with the way our mind perceives colors, and it also addresses the maintenance problem. Now web designers can be satisfied by choosing as little as 3–5 base colors and use them to create as many color variants as they like.

Now that we understand what an HSL color consists of, all we need is to structure it elegantly.

The web designer can choose between three and five base colors from the Hue palette, giving us 3 to 5 numbers, which are degrees on the hue palette’s color wheel.

These colors will be the basis on which the web designer can create many combinations with the lightness, saturation — and optionally the opacity — parameters.

The HSL method gives the web developer and the web designer a single place in which they control the website’s base colors. That’s where they can check and update the colors according to their needs.

Base Starting Points for the Saturation, Lightness and Opacity Parameters

As there are infinite color combinations that we can create from those base colors, I have created smart parameter values to start from:

  • Saturationbegin with the default of 50% — mid-range (has to be bigger than 0% value. Because 0% saturation value will make the color look grayish).
  • Lightnessstart with the default of 50% because it should be larger than 0% and smaller than 100% value; otherwise, the color will look either black or white.
  • Opacity — start with the default of 100%. If you are working with HSLA, you have a parameter for opacity, and full opacity is best. The 100% value means full opacity, while the 0% value will cause the color to be transparent.

To elegantly create color variations, we’ll first define each base color’s hue degree as a CSS variable. Example:

/**  common-colors  **/ 

:root{

/* base color 1 */

--base-color1: 60;

/* base color 2 */

--base-color2: 120;

/*base color 3*/

--base-color3: 200;

}

Then we can create other shades from each of those base colors. Here is an example of creating other shades of colors from base-color1.

In this example, we define a 50% value for saturation and change the lightness values to create the variations:

/** common-colors **/

:root{

/* base color 1 */

--base-color1: 60;

--color1-light: hsla(var(--base-color1), 50%, 75%, 100%);

--color1-normal: hsla(var(--base-color1), 50%, 50%, 100%);

--color1-darker: hsla(var(--base-color1), 50%, 35%, 100%);

}

Now, we’ll apply this method to the rest of the base colors:

/**common-colors**/ 

:root{

/* base color 1 */

--base-color1: 60;

--color1-light: hsla(var(--base-color1), 50%, 75%, 100%);

--color1-normal: hsla(var(--base-color1), 50%, 50%, 100%);

--color1-darker: hsla(var(--base-color1), 50%, 35%, 100%);

/* base color 2 */

--base-color2: 120;

--color2-light: hsla(var(--base-color2), 50%, 75%, 100%);

--color2-normal: hsla(var(--base-color2), 50%, 50%, 100%);

--color2-darker: hsla(var(--base-color2), 50%, 35%, 100%);

/*base color 3 */

--base-color3: 200;

--color3-light: hsla(var(--base-color3), 50%, 75%, 100%);

--color3-normal: hsla(var(--base-color3), 50%, 50%, 100%);

--color3-darker: hsla(var(--base-color3), 50%, 35%, 100%);

}

That’s it! We’ve created a smart color scheme with HSL/HSLA colors, structuring it with the same base colors. The advantage is that now we can easily update the base colors, affecting all of their depending colors accordingly.

HSL Colors Pallet Result

This power serves both web developers and web designers. They can both play with those base colors and see how the website changes all its colors with those minimal base colors.

Codepen Live Example

Making More Common Rules for the Params of the HSL/HSLA

If you are a web developer who wants to take things one step further, you can generate CSS variables for the rest of the parameters (saturation, lightness & opacity), to target the most commonly used values. For example:

:root{ 

/** commonly used saturation/lightness/opacity levels **/

--saturation-level1: 20%;

--saturation-level2: 50%; /* mid range - normal */

--saturation-level3: 80%;

--lightness-level1: 75%;

--lightness-level2: 50%; /* mid range - normal */

--lightness-level3: 35%;

--opacity-level1: 100%; /* no opacity - normal */

--opacity-level2: 80%;

--opacity-level3: 60%;

}

Now you can use various combinations of these parameters to create better synchronization between the other colors. Example:

--color1-light:  hsla( var(--base-color1),  

var(--saturation-level2),

var(--lightness-level1),

var(--opacity-level1) );

Full Example on CodePen

That’s all.

I hope you’ve enjoyed this article and learned from my experience in using a better method for working with colors on the web.

If you like this post, I would appreciate applause and sharing 🙂

You can follow me via Twitter.

More of my CSS posts:

The New Responsive Design Evolution

New CSS Logical Properties!

CSS Position Sticky — How It Really Works!

Who Am I?

I am Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture. I work at Investing.com.

You Can find me in my Facebook groups:

CSS Masters

CSS Masters Israel

47 comments

  1. Its like you learn my thoughts! You appear to know so much about this, such as you wrote the ebook in it or
    something. I feel that you could do with some percent to drive
    the message home a bit, however instead of that, that is fantastic blog.
    A great read. I will certainly be back.

  2. Good post. I learn something new and challenging
    on blogs I stumbleupon every day. It will always be useful to read content from other authors and practice something from
    their sites.

  3. Spot on with this write-up, I truly think this website needs a great deal more attention. I’ll probably be back again to read
    more, thanks for the advice!

    My web site … Justina

  4. I truly love your website.. Excellent colors & theme. Did you
    make this web site yourself? Please reply back
    as I’m wanting to create my own personal site and
    would like to learn where you got this from or just what the theme is named.

    Many thanks!

    Stop by my blog post Royal Casino Malaysia

  5. Hello there, I found your website via Google even as searching for a related
    topic, your web site got here up, it seems to be great.
    I’ve bookmarked it in my google bookmarks.[X-N-E-W-L-I-N-S-P-I-N-X]Hello there,
    just turned into aware of your weblog thru Google, and located that it’s really informative.
    I am going to watch out for brussels. I’ll appreciate
    when you proceed this in future. Numerous other folks will be benefited out of your writing.
    Cheers!

    My homepage; https://mpc-install.com/

  6. Interesting blog! Is your theme custom made or did you download it from somewhere?
    A theme like yours with a few simple tweeks would really make my
    blog shine. Please let me know where you got your design. With thanks

    Also visit my blog post clubriders.men

  7. Definitely imagine that that you stated. Your favourite justification appeared
    to be at the net the simplest factor to bear in mind of. I say to you, I certainly get annoyed whilst other people think about concerns that they plainly don’t know
    about. You managed to hit the nail upon the highest as neatly as defined
    out the entire thing with no need side effect , people can take a signal.
    Will probably be again to get more. Thank you!

    Have a look at my blog; chengdian.cc

  8. Hey this is somewhat of off topic but I was wondering if blogs use WYSIWYG editors
    or if you have to manually code with HTML. I’m starting a blog
    soon but have no coding know-how so I wanted to get advice from someone
    with experience. Any help would be enormously appreciated!

    Look into my webpage; kebe.top

  9. I in addition to my buddies were reading the best tips and hints found
    on the blog while unexpectedly I had a horrible feeling I had not thanked the website owner for those
    tips. All of the men are already for this reason thrilled to learn all of them and now have extremely
    been tapping into them. Appreciate your getting so considerate as well as for utilizing such tremendous information millions of individuals
    are really needing to learn about. Our honest apologies
    for not expressing gratitude to earlier.

    Feel free to visit my page: anapa-alrosa.com.ru

  10. If you would like to improve your know-how only keep visiting
    this site and be updated with the most recent news posted here.

    my website Nina

  11. I wanted to follow up and allow you to know how , a great deal I loved discovering your site today.
    I might consider it a good honor to operate at
    my workplace and be able to operate on the tips discussed on your
    website and also participate in visitors’ reviews like this.
    Should a position regarding guest article writer become
    on offer at your end, i highly recommend you let me know.

    My web blog; kebe.top

  12. Simply want to say your article is as astonishing. The clarity in your post is simply great and
    i can assume you’re an expert on this subject.
    Fine with your permission allow me to grab your feed to
    keep up to date with forthcoming post. Thanks a million and please continue the enjoyable work.

    My webpage :: Keto Vibe Pills Reviews

  13. hello there and thank you for your info ? I?ve definitely picked up anything new from right here.
    I did however expertise several technical issues using this web site, as I experienced
    to reload the site a lot of times previous
    to I could get it to load correctly. I had been wondering if your hosting is OK?

    Not that I am complaining, but slow loading instances times will sometimes affect
    your placement in google and can damage your high quality score if advertising and marketing with Adwords.
    Well I?m adding this RSS to my email and could look out for a lot more of your respective exciting
    content. Make sure you update this again soon..

    Feel free to surf to my website; http://www.goldenanapa.ru

  14. Do you mind if I quote a couple of your posts as long as I provide credit
    and sources back to your website? My blog site is in the exact same area of interest as yours and my visitors would truly benefit from some of the
    information you present here. Please let me know if this alright with you.
    Cheers!

    Here is my blog :: Compoise CBD Gummies

  15. Link exchange is nothing else except it is simply placing
    the other person’s website link on your page at appropriate place and other person will also do similar in favor of you.

  16. Great blog! Do you have any tips and hints for aspiring
    writers? I’m planning to start my own blog soon but I’m a little lost on everything.

    Would you suggest starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m
    totally confused .. Any tips? Many thanks!

  17. Hey! I just wanted to ask if you ever have any problems with hackers?
    My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no back up.
    Do you have any methods to stop hackers?

  18. Hi there! This post couldn’t be written any better! Looking at
    this article reminds me of my previous roommate! He constantly kept
    talking about this. I will send this information to him.
    Pretty sure he’ll have a good read. Thanks for sharing!

  19. You’re so awesome! I don’t think I’ve read through anything
    like this before. So good to find another person with unique thoughts on this subject matter.

    Really.. many thanks for starting this up. This site
    is something that’s needed on the internet,
    someone with some originality! quest bars http://bitly.com/3C2tkMR quest
    bars

  20. Magnificent goods from you, man. I’ve understand your stuff previous to and you’re
    just extremely fantastic. I actually like what you’ve acquired here,
    really like what you’re stating and the way in which you say it.
    You make it enjoyable and you still take care of to keep it wise.
    I can’t wait to read much more from you. This is
    really a wonderful website. cheap flights http://1704milesapart.tumblr.com/ cheap flights

  21. Hi there, i read your blog occasionally and i own a similar one and i was just curious if you get
    a lot of spam responses? If so how do you stop it, any plugin or
    anything you can recommend? I get so much lately
    it’s driving me mad so any support is very much appreciated.
    scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  22. Wonderful beat ! I wish to apprentice while you amend your site, how can i
    subscribe for a blog web site? The account aided me a acceptable deal.
    I had been a little bit acquainted of this your broadcast provided bright clear concept ps4 https://bit.ly/3z5HwTp ps4 games

  23. Pingback: how to keto

Leave a Reply

Your email address will not be published.