HSL color picker
Hue, saturation and lightness sliders with instant HEX/RGB values — the most direct way to make a color lighter, darker or more vivid.
Loading…
Need every format at once? Open the universal color picker →
FAQ
What does each HSL slider do?
Hue (0–360°) rotates around the color wheel; saturation (0–100%) controls intensity; lightness (0–100%) mixes toward black at 0% and white at 100%. At 50% lightness you get the "purest" version of a hue.
When is HSL the wrong model?
When building lightness ramps: HSL lightness is not perceptual, so a yellow and a blue at "50%" look very different in brightness. Use the OKLCH tab for perceptual scales.
What is HSL used for in CSS?
hsl(210 80% 45%) is a first-class CSS color. Design systems often define hues in HSL and then tune lightness per role.
Related tools
Universal picker — HEX, RGB, HSL, HSV, OKLCH and CMYK in one place, with an eyedropper.
RGB Color PickerPick colors by RGB channels — live preview, HEX and HSL output, contrast info.
Color ConverterHEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLCH and XYZ in one place.
HEX Color PickerPick a color and read it as a HEX code — sliders, native picker and instant copy.