Hex is Dead: Why You Should Be Using HSL for Web Design

Quick: looking at #8A2BE2, can you tell me a lighter version of this color? Can you tell me its complementary color? No. Because Hex codes are designed for computers, not humans.

Understanding HSL

HSL stands for Hue, Saturation, and Lightness. It maps color to a coordinate system that matches how humans perceive light.

The Power of Programmatic Palettes

With HSL, creating a hover state is simple math. You don't need a color picker. You just increase the Lightness.

:root {
  --primary-h: 220;
  --primary-s: 90%;
  --primary-l: 50%;
}

.button {
  background: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

.button:hover {
  /* Just make it 10% lighter */
  background: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%));
}

This allows you to theme entire applications by changing a single Hue variable. Try our Color Converter to translate your legacy Hex codes into HSL and start designing with logic.