Context
ActiveCollab
Delivered
November 2024
Author
Duško Stamenić
Challenge Overview

Designers often underestimate how messy colors can get once they leave Figma and land in code. It's not just about picking a pretty palette. You're juggling different color profiles, trying to name tokens in a way that won't confuse your future self (or your teammates), wiring everything into CSS variables that don't break under pressure, and on top of that, making sure your choices are accessible to people with visual impairments. Then there's the headache of themes: light, dark, maybe even high-contrast or custom client themes. Each one adds a new layer of complexity.

What's interesting, though, is that modern CSS gives us a way to think about color relationships instead of hard-coding endless variations. With hsl(), you can define colors relative to a base hue, shifting lightness or saturation in predictable steps. It's not a silver bullet, but it does hint at a more systematic approach — one that makes scaling a design system feel less like patching holes and more like building on solid ground.

Creation Arc

Brighter Choices

HSL stands for hue, saturation, and lightness — three values that describe a color in a way that's easier to reason about than hex codes or RGB. The hue is basically the "color family" (red, blue, green), saturation controls how vivid or muted it looks, and lightness sets how bright or dark it feels. The beauty of HSL in design systems is that you can adjust one property without messing up the others. Want a lighter button background? Just bump the lightness value. Need a subtle hover state? Shift the saturation down a bit. It makes color relationships more intuitive and keeps your palette consistent without adding dozens of hard-coded tokens.

CSS code snippet defining color tokens with HSL
CSS code snippet.

The beauty of working with HSL is that you only define your base color once, and every variation automatically follows. Instead of hard-coding a dozen tokens for "blue-100," "blue-200," and so on, you can describe them as relative shifts of a single base. That way, if the brand team suddenly decides the primary color should lean more toward indigo, you just tweak one value and the whole app adjusts itself.

CSS code snippet with example HSL colors applied to boxes
CSS code snippet with example colors applied to boxes.

Each of these tokens is "relative" to the base color, so you're not repeating yourself. The darkest shade is simply the base color with its lightness lowered by 20, the lighter ones just nudge it upward. It's flexible, readable, and cuts down on maintenance headaches when you need to shift the overall palette.

I have also prepared a small playground on Codepen, so you can try and see how it works: https://codepen.io/DuskoStamenic/pen/qEOwJRB.

Takeaways

Working with HSL isn't just about trimming down the clutter of a color palette. It also opens the door to real flexibility. Because every shade is defined in relation to a single base, you can shift themes, swap brand colors, or even hand over control to users without rewriting half your CSS. That's particularly valuable for products that thrive on customization, where a user might want to pick their own accent color and see the whole interface adapt instantly. And since lightness and saturation are easy to tweak, accessibility improvements — like nudging contrast for better readability — become much less of a chore.

Additional Resources