Free Online Color Picker

1. Drag the Hue slider across the rainbow (0° red, 120° green, 240° blue) to choose a base color.
2. Adjust the Saturation slider — 0% gives gray, 100% gives a pure hue.
3. Adjust the Lightness slider — 0% is black, 50% is the pure hue, 100% is white.
4. Click the copy icon next to Hex, RGB or HSL to send the value to your clipboard.

A color picker maps a point in the HSL cylinder (hue 0–360°, saturation 0–100%, lightness 0–100%) to the sRGB color space defined by IEC 61966-2-1. Hue chooses the dominant wavelength, saturation controls vividness, and lightness controls brightness. Outputs are expressed as 6-digit hex, decimal rgb() triples (0–255 per channel), and hsl() — the three notations CSS understands.

Designers use it to lock in a swatch before exporting to Figma; front-end engineers use it to grab a hex for a Tailwind config or a CSS custom property; QA testers use it to sample a color from a spec and verify the implemented value.

Everything updates locally as you drag — nothing round-trips to a server, so the swatch you're previewing is the swatch you'll ship.