Why You Should Stop Using Hex Codes in CSS Variables

Hex codes (#FF0000) are artifacts of the past. They are excellent for storage and copy-pasting, but terrible for manipulation. As we move toward dynamic theming and programmatic design systems, HSL (Hue, Saturation, Lightness) reigns supreme.

The Problem with Hex

Quick: What is 10% lighter than #4F46E5? You can't calculate that in your head. You can't even calculate it in CSS without complex pre-processors.

The Power of HSL Variables

By defining your colors as HSL channels in CSS variables, you unlock runtime modification.

:root {
  --primary-h: 245;
  --primary-s: 80%;
  --primary-l: 60%;
}

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

.button:hover {
  /* Programmatically darken by 10% */
  background: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 10%));
}
      

Readable Relations

HSL allows you to create relationships between colors. A complementary color is just calc(var(--h) + 180). An analogous color is calc(var(--h) + 30). This is impossible with Hex.