The Developer's Guide to Using HSL for CSS Variables

Why HSL Over HEX or RGB?

HEX and RGB define colors by mixing red, green, and blue channels — which is how screens work, but not how humans think about color. HSL (Hue, Saturation, Lightness) maps to how we naturally describe colors: "a slightly desaturated blue" or "a darker shade of green."

This makes HSL ideal for CSS variables because you can programmatically adjust colors by changing a single value:

• Hue (0-360): The color itself — red at 0, green at 120, blue at 240
• Saturation (0-100%): How vivid the color is — 0% is gray, 100% is fully saturated
• Lightness (0-100%): How light or dark — 0% is black, 50% is the pure color, 100% is white

HSL in CSS Custom Properties

The real power of HSL emerges when you store the components as separate CSS variables. This lets you create entire color systems from a single hue value:

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

  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 70%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 40%);
  --primary-muted: hsl(var(--primary-h), 30%, var(--primary-l));
}

By changing just --primary-h, you shift your entire color palette. This is the foundation of dynamic theming.

Building a Dark Mode with HSL

Dark mode becomes straightforward with HSL. Instead of defining completely separate color palettes, you adjust lightness values:

/* Light theme */
:root {
  --bg-l: 98%;
  --text-l: 10%;
  --surface-l: 95%;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-l: 10%;
  --text-l: 90%;
  --surface-l: 15%;
}

body {
  background: hsl(220, 15%, var(--bg-l));
  color: hsl(220, 10%, var(--text-l));
}

The hue and saturation stay consistent — only lightness changes. This ensures your dark mode feels cohesive rather than like a separate design.

Converting Your Existing Colors

If your codebase uses HEX or RGB values, you can convert them to HSL using our HEX to HSL converter. Enter any HEX code like #3B82F6 and instantly get the HSL equivalent — ready to paste into your CSS variables.

Practical Tips for HSL in Design Systems

• Store hue separately: Keep --brand-h as a standalone variable so you can derive your full palette from it
• Use saturation for states: Reduce saturation for disabled states, increase for hover states
• Adjust lightness for hierarchy: Use lighter shades for backgrounds and darker for text within the same hue family
• Keep accessibility in mind: Ensure sufficient contrast ratios by testing lightness differences between text and background

HSL vs. the New oklch()

While oklch() is gaining browser support and offers perceptually uniform lightness, HSL remains the most widely supported and practical choice for CSS variables in 2026. It works in every browser, has excellent tooling support, and is easier to reason about for most developers.

Ready to convert your colors? Try our free Color Converter to instantly convert between HEX, RGB, and HSL formats. You can also explore our Color Palette Generator and CSS Gradient Generator.