DEV Community

James
James

Posted on • Edited on

1

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%)"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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%
Enter fullscreen mode Exit fullscreen mode

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%);
}
Enter fullscreen mode Exit fullscreen mode

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.

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay