HSL Color Picker

How to use the HSL color picker

1. Pick the hue first, since that angle from 0 to 360 decides whether you are in reds, greens or blues before anything else.
2. Set saturation low for a muted, professional tone or high for a color that demands attention, like an alert.
3. Use lightness to build variants: hold hue and saturation, then lower it for a pressed state or raise it for a tint.
4. Have a code in another model? Run it through the HEX to HSL converter or RGB to HSL converter and edit it here.

What is an HSL color?

HSL describes a color by hue, saturation and lightness, written like hsl(210, 100%, 56%). Rather than mixing light, it lines up with how people talk about color: which color, how strong, how light or dark. It is the friendliest model for adjusting a color by hand.

What can HSL color picker do for you?

An HSL color picker lets you choose a color by hue, saturation and lightness, then copy its code to use anywhere. Because the three values match how people actually think about color, you can dial in an exact shade, lighten or darken it, or mute it without guessing at numbers, then grab the result as HSL, HEX or RGB.

How to control each value in an HSL color picker

How to use HSL colors

Reach for HSL when tuning a color by hand. Because lightness is its own slider, making a hover state or a dark-mode variant is a single nudge. To turn one base color into a full set, the Shades Generator and Scheme Generator take it from here.

Why HSL is best for tweaking

For nudging a color by hand, nothing beats HSL. Because lightness has its own slider, building a hover state or a darker variant is a single move rather than a guessing game across three channels. A common workflow is to design in HSL and ship HEX.