HSL Color Picker

A slider-driven picker for HSL — the color model most CSS designers think in. Each rail visualizes what the slider varies along, so it's easy to see what saturation 0 looks like at your current hue, or how lightness flips between black, your color, and white. Output is offered in HEX (with optional 8-digit alpha), rgb() / rgba(), hsl() / hsla(), and a Tailwind arbitrary-value wrapper.

HSL is convenient because its axes match the words designers already use, but its lightness is not perceptual lightness. Yellow at 50% reads as a bright colour and blue at 50% reads as a dark one, even though the number is identical, so a palette built by holding L constant across hues comes out visibly uneven. That is the specific problem the newer CSS colour spaces address: OKLCH keeps a fixed lightness looking fixed. If you are generating a scale rather than picking one colour, it is worth knowing which of the two you need.

Saturation in HSL is also not the same quantity as saturation in HSV, though the sliders look alike. HSL reaches pure white at L 100 and pure black at L 0 regardless of the other two values, which means both ends of the lightness rail collapse: every hue looks the same there, and the hue and saturation you set are still stored but no longer visible.

The conversion to and from hexadecimal is lossy in one direction. Whole-number H 0–359, S 0–100 and L 0–100 give 360 × 101 × 101 ≈ 3.67 million triplets, far fewer than the ~16.7 million sRGB colours, so rounding a colour to HSL merges many hex values into one triplet, and converting back cannot always return the original. Typing a hex value, reading the HSL and typing it back can therefore land you one step away from where you started. The hex output is the authoritative value. In the 8-digit form the alpha byte comes last, which is the CSS order and the reverse of the convention some design tools use.