Hey HSLA!

It's been interesting to see the industry slowly shift towards HSL(A) (Hue, Saturation, Light, Alpha). I've recently had the luxury of building a design system from scratch, and decided to use HSL. Given another year I may have chosen LCH instead, but for now HSL seems like a flexible way to manage colours whilst enjoying good browser support.

Given that we have a brand colour that is dark red.

const brandColour = [0, 100, 20]; // "hsl(0, 100%, 20%)"

I can easily "rotate" the hue and create new colours that match the brand. Or we can manipulate the saturation of the colour and lightness to derive various shades.

const contrastColour = [200, 100, 20]; // dark blue
const primaryHighlightColour = [200, 20, 90]; // light pink

This allows us to programmatically define the rules of the colour system. Reducing colour "bloat" and making holistic change easy and safe.

These colours can then be exposed, either as CSS custom properties or through a CSS-in-JS theme. Either way I'll not add the hsl() function to the variable itself.

--brandPrimary: 0, 100%, 20%

When we implement a colour we may need disabled states and other variations. It's useful to have a final bit of flexibility here. By storing the values rather than the function we can easily use the hsla() function instead.

button {
  background-color: hsl(var(--brandPrimary));
}
button:disabled {
  background-color: hsla(var(--brandPrimary), 50%);
}

It will be interesting to see how this approach evolves, but right now the design system I'm building uses just six core brand colours, from which all others are derived. This is simpler by an order-of-magnitude compared to systems I've worked on previously.