DEV Community

Cover image for How to use HSL and calc functions in CSS to build darken and light colors
Dany Paredes
Dany Paredes

Posted on

How to use HSL and calc functions in CSS to build darken and light colors

#css #webdev

Sass provide darken and lighten mixins to make our colors looks darken or lighten, but how to do it without a preprocessor, only with the power of CSS ?

We will learn how to use hsl and calc functions to build darken and light colors.

Demo

Feel free to see the Final

Our goals

  • How to use HSL for colors.
  • Using the calc function.

Colors in HSL.

To begin, we want 3 version of red company color, the hex version is #ff0000, and taking it as reference how I can change it ? The HSL come to help us.

The HSL() help us to define a color according to its hue, saturation, and lightness, so the red #ff0000 and converting it to HSL the result is hsl(0, 100%, 50%).

How to conver hex to hsl

We can use hsl(0, 100%, 50%) to create the company red color and store it into the variable.

--color-company-red: hsl(0, 100%, 50%);
Enter fullscreen mode Exit fullscreen mode

It works, but how can I change the light or darken ? First split the color values, and use hsl function to create it again.

  --color-company-red-h: 0;
  --color-company-red-s: 100%;
  --color-company-red-l: 50%;
  /* using hsl create the default red*/
  --color-company-red: hsl(var(--color-company-red-h), var(--color-company-red-s), var(--color-company-red-l));
Enter fullscreen mode Exit fullscreen mode

Perfect, first step complete, we have the default red color.

Using calc function for darken and light.

Now that you’ve been decouple the red color, we use the calc CSS function to change the value of light.

The calc() CSS function lets us perform calculations in values example (eg: width: calc( 3 + 100px));).

Using the calc function with + or - operator over the CSS custom property --color-company-red-l, we can reduce or increase, the light so, with less light is dark and more is lightened.

  /* light version*/
  --color-company-red-light: hsl(
    var(--color-company-red-h),
    var(--color-company-red-s),
    calc(var(--color-company-red-l) + 15%)
  );
  /* dark version*/
  --color-company-red-darken: hsl(
    var(--color-company-red-h),
    var(--color-company-red-s),
    calc(var(--color-company-red-l) - 25%)
  );
Enter fullscreen mode Exit fullscreen mode

It’s time, use the colors and to override to using the red color versions.

/* Every class override the value of --box-bg with the version of red color */

.red {
   --box-bg: var(--color-company-red);
}

.red-light {
  --box-bg: var(--color-company-red-light);
}

.red-darken {
 --box-bg: var(--color-company-red-darken);
}

.box {
  background: var(--box-bg);
}
Enter fullscreen mode Exit fullscreen mode

The demo

Done! We have the darker and lighten based of our red company color without any preprocessor.

Photo by zero take on Unsplash

Top comments (2)

Collapse
 
parenteaukamryn34 profile image
parenteaukamryn •

In CSS, the HSL function combined with the calc function can be a powerful tool for creating shades and tints of colors, similar to how a box company can customize packaging to suit different products. To darken a color, you would decrease the lightness value by using calc, like background-color: hsl(30, 100%, calc(50% - 20%)); for a color 20% darker. Conversely, to lighten a color, you'd increase the lightness value, e.g., background-color: hsl(30, 100%, calc(50% + 20%)); for a color 20% lighter. This method allows for dynamic styling and can be especially useful when needing to adjust color based on user interaction or different states within a component, ensuring your design is as adaptable and responsive as the services offered by a versatile box company.

Collapse
 
tracyjackson12 profile image
Tracy Jackson •

To build darken and light colors using HSL (Hue, Saturation, Lightness) and the calc() function in CSS, you can manipulate the lightness value of the HSL color. This allows you to create variations of the base color by making it darker or lighter. Here's how you can do it:

Darken a Color:

To darken a color, you can decrease the lightness value of the HSL color. You can use the calc() function to dynamically adjust the lightness value based on the percentage you want to darken the color by.

/* Base color */
.my-color {
  background-color: hsl(210, 50%, 50%);
}

/* Darken color by 10% */
.my-dark-color {
  background-color: hsl(210, 50%, calc(50% - 10%));
}
Enter fullscreen mode Exit fullscreen mode

In this example, the calc() function subtracts 10% from the base lightness value (50%), resulting in a darker color.

Lighten a Color:

To lighten a color, you can increase the lightness value of the HSL color. Similarly, you can use the calc() function to dynamically adjust the lightness value based on the percentage you want to lighten the color by.

/* Base color */
.my-color {
  background-color: hsl(210, 50%, 50%);
}

/* Lighten color by 10% */
.my-light-color {
  background-color: hsl(210, 50%, calc(50% + 10%));
}
Enter fullscreen mode Exit fullscreen mode

n this example, the calc() function adds 10% to the base lightness value (50%), resulting in a lighter color.

Example:

Here's a complete example demonstrating how to use HSL and the calc() function to create darken and light colors:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HSL and calc() Example</title>
<style>
  /* Base color */
  .my-color {
    background-color: hsl(210, 50%, 50%);
    padding: 20px;
    margin-bottom: 20px;
  }

  /* Darken color by 10% */
  .my-dark-color {
    background-color: hsl(210, 50%, calc(50% - 10%));
  }

  /* Lighten color by 10% */
  .my-light-color {
    background-color: hsl(210, 50%, calc(50% + 10%));
  }
</style>
</head>
<body>
  <div class="my-color">Base Color</div>
  <div class="my-dark-color">Darken Color by 10%</div>
  <div class="my-light-color">Lighten Color by 10%</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

n this example, the base color is a shade of teal with a hue of 210, a saturation of 50%, and a lightness of 50%. The .my-dark-color class darkens the color by 10%, while the .my-light-color class lightens the color by 10%.

You can adjust the percentages in the calc() function to achieve the desired level of darkness or lightness for your specific use case.

EpyTV

Read next

waelhabbal profile image

Mastering CSS unicode-bidi Property

waelhabbal -

jamescroissant profile image

What is ”this” in JavaScript？

Yu Hamada -

iamdevmarcos profile image

Content Delivery Network Explained 🌎⚡️

Marcos Mendes -

thejoernal profile image

Add basic animations to your site using Animate.css and wow.js

Joseph Ochego -