Color Picker

Thinking in hue, saturation and lightness

Composing a color channel by channel in RGB is like steering a boat by adjusting three propellers — possible, but nothing maps to intent. HSL matches how people describe color: which color (hue), how vivid (saturation), how bright (lightness). A productive picking routine uses the sliders top to bottom: park the hue in the right region first — reds near 0°, yellows near 60°, greens around 120°, cyans 180°, blues 220–250°, purples 270–300° — then pull saturation down from pure until the color stops shouting, and finally set lightness for context: text wants the extremes, backgrounds live near them, brand colors usually sit between 35% and 60%.

Slider, wheel or code — same cylinder

Color wheels and sliders visualize the same HSL cylinder: the wheel shows the hue angle with saturation as the radius, and a separate control adds lightness. Sliders trade the wheel’s at-a-glance geometry for precision — each dimension moves independently, keyboard arrows nudge single steps, and the gradient painted on each track previews exactly where you are heading before you move. That preview is live here: change the hue and the saturation track repaints for that hue immediately.

The catch in HSL — and why OKLCH is listed too

HSL’s lightness is a geometric convenience, not a perceptual measurement. Yellow at hsl(60, 100%, 50%) looks far brighter than blue at hsl(240, 100%, 50%) despite the identical number — which is how “same lightness” UI palettes end up with some swatches glowing and others brooding. The format table therefore always shows OKLCH, the modern CSS space whose L value tracks perceived brightness across hues. A practical workflow: compose here in HSL for speed, then compare the OKLCH L numbers of your palette entries — if they differ wildly, the palette will look uneven.

From this page into your project

• CSS: copy the hex row for maximum compatibility, or the oklch() row for modern stylesheets and wide-gamut readiness.
• Design tools: Figma and Sketch accept hex directly; the HSV/HSB row matches their internal pickers.
• Print-adjacent work: the CMYK row is the standard naive approximation — treat it as orientation, not prepress.
• Later use: “Save to my colors” keeps the color in the tray shared by every tool on this site.

Nothing you pick leaves your browser — the page works offline once loaded. When the color you need exists only inside a photo or screenshot, switch to the color picker from image on the home page; and before committing a text/background pair, run it through the contrast checker.