Tip - Manipulating Colors using HSLa and Css Variables

by Will Moody

Approximate Reading Time: 2 minutes

Using Css Variables to manipulate colors in your Css has never been easier. Why use HSLa you ask?

The appeal of the HSLa model is it’s intuitive and straightforward for us humans to understand exactly what the color will be like when you change the H (hue), S (saturation), L (lightness) and a (alpha or opacity) values.

The Hue Property is in the range of 0o and 360o, with both 0o and 360o being reds. 120o is where greens are and 240o are blues. Use anything in between 0-360. 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 is where 0% is completely desaturated (grayscale). 100% is fully saturated (full 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. 0% is completely dark (black). 100% is completely light (white). 50% is average lightness. Therefore it's preferred 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. 0 is fully transparent and 1 is fully opaque. 0.5 is 50% transparent, 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).

My main reason for moving to HSLa was that I found it difficult when I used hex or RGB to relate the values to a color. What color is #2bba3f or RGB (43,186,63)? it's a darkish green by the way.

Using a color wheel like the one below it's very easy and straightforward to remember green is 120 and then work with the saturation and lightness that is required.

Below is an HSL color wheel, as you can see it's easy to remember the values for key colors.

Below is an example of how I use the hsl scheme to define my color palettes. I tend to only use two colors and their variants for most websites, so I name them primary and secondary, simple and effective.

:root {
    --primary-color-hsl: 335, 80%;
    --primary-color: hsl(var(--primary-color-hsl), 50%);
    --primary-color-light: hsl(var(--primary-color-hsl), 70%);
    --primary-color-dark: hsl(var(--primary-color-hsl), 30%);
    --primary-color-translucent: hsla(var(--primary-color-hsl), 50%, .35);
}

As I use Css variables to define my colors it's simple to override them as needed as the code below. This will override the initial :root value for this one instance, changing the saturation from 80% to 50%.

div {
--primary-color-hsl: 335, 50%;
background-color: var(--primary-color);
}

Tunghsiao Liu goes into much more depth in their great article, CSS Variables Guide: Color Manipulation and Dark Mode, although I find I really don't need the amount of control and variations that they create.

You can find my final code in the Codepen embed below, I hope this is useful.

See the Pen HSLA colours using Css Variables by Will Moody (@FatBuddha) on CodePen.