Color Picker
Pick colors visually and read out HEX, RGB and HSL — ready to paste into CSS.
Free · No sign-up · Runs locally in your browser · Also available in Chinese (中文)
What is Color Picker?
A color picker combines a visual selection surface with numeric readouts: drag around a saturation-lightness field and a hue slider, and every notation updates live. It removes the guesswork of nudging hex values by hand until something looks right.
For design work the HSL readout is quietly the most useful: hue, saturation and lightness map to how humans describe color, so 'same hue, 10% lighter' becomes a one-field change. The picker also supports eyedropper capture where the browser allows it, so you can sample any pixel on screen.
How to use it
- 1Drag in the saturation/lightness square and slide the hue bar.
- 2Or paste an existing color value to start from it.
- 3Read the HEX, RGB and HSL outputs as they update.
- 4Copy the format your stylesheet or design tool needs.
Common use cases
- Deriving a palette of tints and shades from one brand color.
- Sampling a color from a screenshot to match it in CSS.
- Teaching or learning the HSL color model interactively.
Frequently asked questions
▸Why does my picked color look different on another screen?
Displays differ in gamut and calibration. sRGB values are absolute, but physical rendering varies — for brand-critical work, verify on the target device.
▸Can I pick colors from a webpage?
Use the browser's eyedropper support where available, or take a screenshot and sample from it — the values are identical.