HSL vs HEX: Why I Moved My Design Tokens to HSL

I used to define every color in my CSS as a hex code. #3b82f6 here, #1e40af there. It worked fine — until the day I needed a hover state, a disabled state, and a dark-mode variant of the same blue. Suddenly I was doing mental math on hex pairs and hoping the result looked right.

The problem with hex is that it's written for machines, not humans. You can't look at #2563eb and guess what it looks like 15% darker. HSL fixes that by describing color the way we actually perceive it: a hue on a wheel (0-360 degrees), a saturation percentage, and a lightness percentage.

Take the blue #2563eb. In HSL it's hsl(221, 83%, 53%). Want a darker shade for a hover state? Drop the lightness: hsl(221, 83%, 43%). Want a lighter tint for a page background? Raise it: hsl(221, 83%, 93%). No calculators, no hex arithmetic — you move one number and the color does exactly what you expect.

This becomes even more powerful with CSS custom properties. Instead of scattering hex values across your stylesheet, store the channels once:

:root {
  --brand-h: 221;
  --brand-s: 83%;
  --brand-l: 53%;
}
.btn-primary {
  background: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
}
.btn-primary:hover {
  background: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 10%));
}

Now your entire theme derives from three numbers. Dark mode becomes a single media query that swaps lightness values. Tailwind's shade scale (50 through 950) is essentially lightness variations of one hue — which is why it feels so cohesive out of the box.

If you're still thinking in hex, try this experiment: pick your brand color, convert it to HSL, and spend a day using the lightness slider instead of hunting for "a slightly darker blue" on color-picker websites. It's a small mental shift, but it makes your color system dramatically easier to maintain — and it's one less tool you need when someone asks for "the same blue but a bit lighter."

💡 When I need to explore shades or convert between formats, I use the CodeToolbox Color Picker — it shows HEX, RGB, and HSL side by side with live sliders, so I can watch how changing lightness ripples through all three formats in real time. Everything runs locally in the browser, so the color I'm working on never leaves my machine.