HSL Color Picker

Adjust hue, saturation and lightness independently — the most intuitive color model for building palettes and design systems.

#155EEF

Native Color Picker

HSL Values

Hue (H) 0-360

Saturation (S) 0-100

Lightness (L) 0-100

All Formats

HEX

What Is an HSL Color Picker?

An HSL color picker lets you adjust color using three independent properties: hue (the color itself, 0-360°), saturation (how vivid, 0-100%) and lightness (how light or dark, 0-100%). HSL is the most intuitive model for design work because you can shift each property without affecting the others.

How to Use This Tool

Adjust hue (H) from 0° (red) through 120° (green) to 240° (blue)
Adjust saturation (S) — 0% is gray, 100% is fully vivid
Adjust lightness (L) — 0% is black, 50% is the pure color, 100% is white
Copy any output format

Why HSL Is Better for Design

HSL aligns with how humans think about color. Want a darker shade? Lower L. Want a muted version? Lower S. Want a different hue at the same vividness? Change H. This is why design systems use HSL to generate color scales.