Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Manipulating Colours Using HSLA & CSS Variables

Manipulating Colours Using HSLA & CSS Variables

Published:

Reading Time: (approx) 2 min

Tags that this post has been filed under.

The main content about Manipulating Colours Using HSLA & CSS Variables

Using CSS Variables to manipulate colours 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 colour 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 colours are set in a circle, and each hue is a degree in the colour-wheel. The chosen colour 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 colour). It’s best to use a value in the range of 10% — 100% since that will allow us to see the base colour.

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

The Alpha Channel Property (optional) — using HSLa instead of HSL allows us to control the colour’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 colour (0% means transparent colour).

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 colour. What colour is #2bba3f or RGB (43,186,63)? it’s a darkish green by the way.

Using a colour 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 colour wheel, as you can see it’s easy to remember the values for key colours.

image of a HSLA colour wheel

Below is an example of how I use the HSL scheme to define my colour palettes. I tend to only use two colours 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 colours 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: Colour Manipulation and Dark Mode, although I find I really don’t need the amount of control and variations that they create.

Working Codepen Example: follow this link

Journal Index

Previous Article: Sitewide Metadata to reuse throughout a site.

Next Article: Full Bleed Layouts Using Simple CSS