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.

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more