Open In App

Build Dark and Light Color using HSL and Calc functions in CSS

Improve
Improve
Like Article
Like
Save
Share
Report

You must know that Sass provides the darken and lighten mixins to display the colors looks darken or lighten, but have you ever wondered that how can we do that without any preprocessor i.e using only using CSS? To build this, we are going to use HSL and Calc() functions.

What is HSL?

HSL stands for hue, saturation, and lightness. The HSL() functional notation is used to express an RGB color in accord with its hue, saturation, and lightness components. The color values of HSL are supported mostly in Firefox, Chrome, Safari, and in Opera. HSL color values are specified with: the following.

hsl(hue, saturation, lightness)
  • Hue is a degree on the wheel of color ranging from 0 to 360. Here, 0 is red, 120 is green, and 240 is blue.
  • Saturation is a color percentage value in which 0% represents a shade of gray and 100% represents a full color.
  • Lightness is also a percentage color value in which 0% is black, and 100% is white.

Calc(): The calc() function is from CSS which allows us to perform calculations when specifying CSS property values. This function can be used anywhere where a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

width: calc(100% - 80px);

Colors in HSL: To begin building, we require 3 versions of the “forestgreen” color and the hex version is #228B22 taking it as a reference how we can change it? For that, HSL comes as it helps us in defining a color according to its hue, saturation, and lightness, so now the forestgreen #228B22 and converting it to HSL will give the output as:

hsl(0, 100%, 50%)

Now, we can use this hsl(120, 61%, 34%) value to create “forestgreen” color and store it in one variable as shown below.

--color-forestgreen: hsl(120, 61%, 34%);

So, now let’s change the light or dark color. To do that, split the color values, and use the HSL function to build it again as shown below.

--color-forestgreen-h: 120;
--color-forestgreen-s: 61%;
--color-forestgreen-l: 34%;

/* using hsl create the default forestgreen*/
--color-forestgreen: hsl(var(--color-forestgreen-h), 
        var(--color-forestgreen-s), 
        var(--color-forestgreen-l));

Our HSL is done and we got the default red color.

Using calc() function for darkening and light:

CSS




/* light color version*/
--color-forestgreen-light: hsl(
      var(--color-forestgreen-h),
      var(--color-forestgreen-s),
      calc(var(--color-forestgreen-l) + 15%)
);
  
/* darken color version*/
--color-forestgreen-darken: hsl(
      var(--color-forestgreen-h),
      var(--color-forestgreen-s),
      calc(var(--color-forestgreen-l) - 25%)
);


Now use the colors and override to using the forestgreen color versions.

CSS




/* Every class override the value of --box-bg with the version of forestgreen color */
.forestgreen {
      --box-bg: var(--color-forestgreen);
}
    
.forestgreen-light {
      --box-bg: var(--color-forestgreen-light);
}
    
.forestgreen-darken {
      --box-bg: var(--color-forestgreen-darken);
}
  
.box {
     background: var(--box-bg);
}


Let us see an example to see how all of the above code CSS works in an HTML code.

Example: Below example demonstrates how to darken and lighten based on our “forestgreen” company color without any preprocessor in CSS. Hover over the box container and see how the “forestgreen” color of different shades changes into dark colors from lighter.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8" />
    <title>GeeksforGeeks</title>
    <style>
        body {
            
            /* split hsl forestgreen color values */
            --color-forestgreen-h: 120;
            --color-forestgreen-s: 61%;
            --color-forestgreen-l: 34%;
            
            /* using hsl create the default forestgreen*/
            --color-forestgreen: hsl(var(--color-forestgreen-h),
             var(--color-forestgreen-s), 
            var(--color-forestgreen-l));
            
            /* Using hsl and calc function to add more or less light 
             using + or - on the calculation 
             and getting the expected value for dark or light */
            
            /* light color version*/
            --color-forestgreen-light: hsl(
                var(--color-forestgreen-h),
                var(--color-forestgreen-s),
                calc(var(--color-forestgreen-l) + 15%)
            );
            
            /* dark color version*/
            --color-forestgreen-darken: hsl(
                var(--color-forestgreen-h),
                var(--color-forestgreen-s),
                calc(var(--color-forestgreen-l) - 25%)
            );
            --box-bg: rgb(78, 78, 241);
        }
        h1{
            color: green;
        }
            
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            border-radius: 5px;
            margin: 1rem;
            color: white;
            text-align: center;
            background-color: var(--box-bg);
            cursor: pointer;
            transition: all 0.4s ease-in;
        }
            
        .box:hover {
            --box-bg: black;
        }
            
          /* It overrides --box-bg with the colors */
        .forestgreen {
            --box-bg: var(--color-forestgreen);
        }
            
        .forestgreen-light {
            --box-bg: var(--color-forestgreen-light);
        }
            
        .forestgreen-darken {
            --box-bg: var(--color-forestgreen-darken);
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>Build Dark and Light Color using HSL
            and Calc functions in CSS</h3>
        <div class="box">
            default box-background-color
        </div>
        <div class="box forestgreen">
            forestgreen
        </div>
        <div class="box forestgreen-darken">
            forestgreen dark
        </div>
        <div class="box forestgreen-light">
            forestgreen light
        </div>
    </center>
</body>
  
</html>


Output:

 



Last Updated : 02 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads