Custom properties work especially well for managing HSL color palettes. HSL stands for hue, saturation, lightness. It’s a light-based color model that’s similar to RGB. We can use HSL values in CSS thanks to the hsl() and hsla() color functions. The hsl() function accepts three arguments: hue, saturation, and lightness. The hlsa() function also accepts a fourth argument, indicating the color’s alpha transparency (a value between 0 and 1).
While an RGB system expresses color as proportions of red, green, and blue, HSL uses a color circle where hue is a degree position on that circle, and the tone or shade are defined using saturation and lightness values. Saturation can range from 0% to 100%, where 0% is gray and 100% is the full color. Lightness can also range from 0% to 100%, where 0% is black, 100% is white, and 50% is the normal color.
4-1. An HSL color wheel
Chromatic Wheel by CrazyTerabyte from Openclipart.
In the HSL color system, the primary colors red, green, and blue are situated 120 degrees apart at 0 degrees/360 degrees, 120 degrees, and 240 degrees. Secondary colors—cyan, magenta, and yellow—are also 120 degrees apart, but sit opposite the primary colors, at 180 degrees, 300 degrees, and 60 degrees/420 degrees respectively. Tertiary, quaternary, and other colors fall in between at roughly ten-degree increments. Blue, written using HSL notation, would be hsL(240, 100%, 50%) .
Here’s where it gets fun. We can set our hue values using a custom property, and set lighter and darker shades by adjusting the saturation and lightness value:
:root {
–brand-hue: 270deg; /* purple */
–brand-hue-alt: .25turn; /* green */
/*
hsl() and hsla() can accept comma-separated or space-separated arguments, but older browsers (such as Internet Explorer 11) only support comma-separated arguments.
*/
–brand-primary: hsl( var( –brand-hue ) 100% 50% );
–brand-highlight: hsl( var( –brand-hue ) 100% 75% );
–brand-lowlight: hsl( var( –brand-hue ) 100% 25% );
–brand-inactive: hsl( var( –brand-hue ) 50% 50% );
–brand-secondary: hsl( var( –brand-hue-alt ) 100% 50% );
–brand-2nd-highlight: hsl( var( –brand-hue-alt ) 100% 75% );
–brand-2nd-lowlight: hsl( var( –brand-hue-alt ) 100% 25% );
–brand-2nd-inactive: hsl( var( –brand-hue-alt ) 50% 50% );
}
The CSS above gives us the palette shown below.
This is a simple version, but you can also use custom properties to adjust saturation and lightness values.
Another idea is to combine custom properties and the caLc() function to generate a square color scheme from a base hue. Let’s create a square color scheme in our next example. A square color scheme consists of four colors that are equidistant from each other on the color wheel—that is, 90 degrees apart:
:root {
–base-hue: 310deg; /* Hot pink */
–distance: 90deg;
–color-a: hsl( var(–base-hue), 100%, 50% );
–color-b: hsl( calc( var(–base-hue) + var( –distance ) ), 100%, 50% );
–color-c: hsl( calc( var(–base-hue) + ( var( –distance ) * 2 ) ), 100%, 50% );
–color-d: hsl( calc( var(–base-hue) + ( var( –distance ) * 3 ) ), 100%, 50% );
}
This bit of CSS gives us the rather tropical-inspired color scheme shown below.
Custom properties also work well with media queries, as we’ll see in the next section.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.