Custom Properties and Color Palettes in CSS

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.

Leave a Reply

Your email address will not be published. Required fields are marked *