BuildUtilities

What is HSL?

A color format using Hue (0-360°), Saturation (%), Lightness (%), far more intuitive than hex for adjusting colors.

HSL stands for Hue, Saturation, Lightness. Hue picks the base color (0° red, 120° green, 240° blue). Saturation controls richness (0% gray, 100% vivid). Lightness controls brightness (0% black, 100% white).

It's vastly easier to work with than hex when building palettes, change just the lightness to get tints and shades, or just the hue to find a complementary color.

Design tokens often store colors as HSL for exactly this reason: it makes theme variations trivial.

A vivid blue

hsl(220, 90%, 56%)

Related tools

Keep reading

Tip Jar