HSL Color Picker

Pick any HSL color — get instant HEX, RGB, CMYK conversion, CSS code, palettes & accessibility info.

Quick Color Converters

HSL → RGB HSL → HEX HSL → CMYK RGB → HSL HEX → HSL

Popular HSL Colors

Browse by Color Family

Free Color Tools

Contrast Checker

Check WCAG AA & AAA contrast ratios for accessible color combinations.

Color Blindness Simulator

Preview how your colors appear to users with Protanopia, Deuteranopia & Tritanopia.

Palette Generator

Generate beautiful color palettes from any HSL color automatically.

Gradient Generator

Create CSS gradients between any two HSL colors with live preview.

Image Color Extractor

Extract dominant HSL colors from any image instantly.

HSL Color Picker

Interactive picker with real-time HSL, HEX, RGB conversion and copy buttons.

How HSL Color Works

Hue (H) — 0° to 360° on the color wheel

0° Red60° Yellow120° Green180° Cyan240° Blue300° Magenta360°

Saturation (S) — 0% to 100%

S=0%

S=25%

S=50%

S=75%

S=100%

hsl(210, 0%, 50%) = gray → hsl(210, 100%, 50%) = full blue

Lightness (L) — 0% to 100%

L=0%

L=25%

L=50%

L=75%

L=100%

hsl(210, 80%, 0%) = black → hsl(210, 80%, 100%) = white

HSL Color Examples with HEX & RGB Codes

Color	HSL	HEX	RGB	CSS
Red	hsl(0, 100%, 50%)	#FF0000	rgb(255, 0, 0)	color: hsl(0, 100%, 50%);
Orange	hsl(30, 100%, 50%)	#FF8000	rgb(255, 128, 0)	color: hsl(30, 100%, 50%);
Yellow	hsl(60, 100%, 50%)	#FFFF00	rgb(255, 255, 0)	color: hsl(60, 100%, 50%);
Green	hsl(120, 100%, 40%)	#00CC00	rgb(0, 204, 0)	color: hsl(120, 100%, 40%);
Cyan	hsl(180, 100%, 50%)	#00FFFF	rgb(0, 255, 255)	color: hsl(180, 100%, 50%);
Blue	hsl(240, 100%, 50%)	#0000FF	rgb(0, 0, 255)	color: hsl(240, 100%, 50%);
Purple	hsl(270, 70%, 50%)	#6B1FD9	rgb(107, 31, 217)	color: hsl(270, 70%, 50%);
Pink	hsl(330, 100%, 71%)	#FF6BAD	rgb(255, 107, 173)	color: hsl(330, 100%, 71%);