How to Use HSL Colors in CSS Like a Pro

HSL is the most underrated color format in CSS. While most developers default to HEX, HSL gives you intuitive control that makes building design systems dramatically easier.

🎨 Try it free: Color Format Converter — Convert any color to HSL instantly.

---

HSL Syntax

hsl(hue, saturation%, lightness%)
hsl(hue saturation% lightness% / alpha) /* modern */

• Hue — 0–360° on the color wheel (0=red, 120=green, 240=blue)
• Saturation — 0% (grey) to 100% (vivid)
• Lightness — 0% (black) to 100% (white), 50% = pure color

---

Why HSL Beats HEX for Scalable Projects

With HEX, making a color darker means guessing a new code. With HSL, you just change one number:

/* Want a darker version? Just reduce lightness */
--blue-base:  hsl(220, 90%, 55%);
--blue-dark:  hsl(220, 90%, 40%);
--blue-light: hsl(220, 90%, 75%);

---

Building Color Scales with HSL

:root {
  --primary-50:  hsl(225, 95%, 97%);
  --primary-100: hsl(225, 95%, 93%);
  --primary-500: hsl(225, 95%, 58%); /* base */
  --primary-700: hsl(225, 95%, 38%);
  --primary-900: hsl(225, 95%, 18%);
}

🎨 Try it free: Tints & Shades Generator — Auto-generate complete HSL scales.

---

HSL for Dark Mode

:root {
  --bg:   hsl(0, 0%, 100%);
  --text: hsl(0, 0%, 10%);
}
[data-theme="dark"] {
  --bg:   hsl(0, 0%, 10%);
  --text: hsl(0, 0%, 95%);
}

Just flip the lightness values. Clean, logical, maintainable.

---

HSL with CSS Custom Properties + Tailwind

// tailwind.config.js
colors: {
  primary: 'hsl(var(--color-primary) / <alpha-value>)',
}

:root { --color-primary: 225 95% 58%; }

This pattern gives you opacity support AND theme switching in one.

---

FAQs

When should I use HSL vs HEX? Use HSL for design system tokens and CSS variables. Use HEX when copying from design tools.

Does HSL support transparency? Yes — hsl(220 90% 55% / 50%) or the legacy hsla(220, 90%, 55%, 0.5).

Is HSL supported in all browsers? Yes, since 2010. Modern space-separated syntax works in all current browsers.

---

Conclusion

HSL is the best format for maintainable CSS color systems. Use Format Converter to convert your existing colors to HSL, then build scales with Tints & Shades Generator.