What does HSL stand for?

Hue, Saturation and Lightness. Hue is the angle on the color wheel (0–360), saturation is how vivid the color is (0–100%), and lightness runs from black (0%) through the pure color (50%) to white (100%).

How do I convert HSL to HEX?

Pick a color or type an hsl() value into the picker and Color Picker Lab shows the matching HEX code instantly. Click any value to copy it.

What is the difference between HSL and HSV?

Both start from hue and saturation. HSL’s third value is lightness, where 50% is the pure color; HSV’s third value is value/brightness, where 100% is the pure color. HSL is handy for making lighter and darker variants.

HSL Color Picker

Pick a color by hue, saturation and lightness and copy the hsl() or hsla() value — with instant HEX, RGB, HSV, CMYK and OKLCH conversion.

#22C55E LimeGreen

From image

Tints

Shades

Tones

Perceptual 50→950 scale, computed in OKLCH. Copy it as CSS custom properties using relative-color syntax — each stop keeps the base hue and chroma.

--color-50: oklch(from #22C55E 0.97 c h);
--color-100: oklch(from #22C55E 0.94 c h);
--color-200: oklch(from #22C55E 0.87 c h);
--color-300: oklch(from #22C55E 0.78 c h);
--color-400: oklch(from #22C55E 0.68 c h);
--color-500: oklch(from #22C55E 0.58 c h);
--color-600: oklch(from #22C55E 0.5 c h);
--color-700: oklch(from #22C55E 0.42 c h);
--color-800: oklch(from #22C55E 0.34 c h);
--color-900: oklch(from #22C55E 0.26 c h);
--color-950: oklch(from #22C55E 0.18 c h);

No saved colors yet. Pick a color and tap Save to keep it here.

Recent

Colors you pick will show up here.

HEX: #22C55E
HEX8: #22C55EFF
HEX8 (Android): #FF22C55E
RGB: rgb(34, 197, 94)
RGB (%): 13%, 77%, 37%
HSL: hsl(142, 71%, 45%)
HSV / HSB: hsv(142, 83%, 77%)
CMYK: cmyk(83%, 0%, 52%, 23%)
OKLCH: oklch(0.7227 0.192 149.58)
OKLCH (%): oklch(72.27% 0.192 149.58)
Decimal: 2278750

A 9.22:1 vs black

A 2.28:1 vs white

AA normal ≥ 4.5 Pass
AA large ≥ 3 Pass
AAA normal ≥ 7 Pass
AAA large ≥ 4.5 Pass

Recommended text color: black

CSS contrast-color() contrast-color(#22C55E) → black

APCA Lc experimental 59.6 Lc · large or bold text (black text)

WCAG 2.1 AA/AAA is the compliance floor; APCA is an optional readability metric.

Complementary

Analogous

Triadic

Split-complementary

Tetradic

Square

Monochromatic

Roughly 1 in 12 men and 1 in 200 women have some color-vision deficiency. Here is how this color looks under the eight common types.

Dichromacy

Protanopia

#696A77 DimGray

Deuteranopia

#5F537D DarkSlateBlue

Tritanopia

#2A8B8F DarkCyan

Anomalous trichromacy

Protanomaly

#696A77 DimGray

Deuteranomaly

#5F537D DarkSlateBlue

Tritanomaly

#2A8B8F DarkCyan

Monochromacy

Achromatopsia

#ACACAC DarkGray

Achromatomaly

#ACACAC DarkGray

Make colorblind-safe

Adjusted for deuteranomaly — the most common deficiency — so it stays distinguishable.

#22FF14 Lime

What is HSL?

HSL describes a color as hue (its position on the color wheel, 0–360°), saturation (how vivid, 0–100%) and lightness (how light, 0–100%). A value looks like hsl(217, 91%, 60%), and you can add an alpha channel with hsla().

When to use HSL

HSL makes a color easy to adjust by hand: nudge the lightness to make a tint or shade, drop the saturation to mute it, or rotate the hue to find a related color. It is great for theming and quick variations. Pick a color above to read its HSL alongside HEX, RGB and OKLCH.

Frequently asked questions

What does HSL stand for?: Hue, Saturation and Lightness. Hue is the angle on the color wheel (0–360), saturation is how vivid the color is (0–100%), and lightness runs from black (0%) through the pure color (50%) to white (100%).
How do I convert HSL to HEX?: Pick a color or type an hsl() value into the picker and Color Picker Lab shows the matching HEX code instantly. Click any value to copy it.
What is the difference between HSL and HSV?: Both start from hue and saturation. HSL’s third value is lightness, where 50% is the pure color; HSV’s third value is value/brightness, where 100% is the pure color. HSL is handy for making lighter and darker variants.