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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

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

Okay