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

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%);

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));

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%)
  );

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);
}

The demo

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

Photo by zero take on Unsplash

Comments

[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.

[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%));
}

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%));
}

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>

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.

Premium IPTV