Pick any color visually and get its value in every format at once — HEX, RGB, HSL, HWB, HSV, CMYK, LAB, LCH, OKLab, OKLCH and XYZ. An alpha slider adds transparency, one click copies any value, and the closest CSS color name is identified automatically. Everything runs in your browser.
Generated locally in your browser — your colors, settings and code never leave this page.
A picker that finishes the job
Native color pickers end where real work begins: you chose a color, and now you need it as HSL for the stylesheet, OKLCH for the tokens file, CMYK for the print vendor and a name for the meeting. This page wraps the browser’s native picker — keyboard-accessible, eyedropper-equipped in Chromium — and surrounds it with the complete translation table, updated live on every adjustment.
The twin hex field matters more than it looks: it makes the picker bidirectional. Paste a hex to load a color into the visual picker; drag the picker to generate a hex. Designers and developers meet in the middle.
The twelve formats, briefly justified
HEX and RGB for deployment; HSL and HWB for human editing; HSV/HSB because every design tool’s dialog speaks it; CMYK (marked approximate) because print questions arrive weekly; LAB and LCH for measurement work; OKLab and OKLCH for modern perceptual editing and CSS; XYZ because it is the reference everything else is defined against. Each row is one click to copy — the difference between a reference table and a workflow.
| Need | Copy this format |
|---|---|
| Stylesheet, config, email | HEX |
| Manipulating channels in JS | RGB |
| Hand-tuning a variant | HSL or OKLCH |
| Design-tool dialog | HSV/HSB |
| Print conversation | CMYK (nominal) |
| Design tokens | OKLCH |
Alpha, handled properly
The opacity slider switches every alpha-capable format to its transparent spelling — 8-digit hex, slash-syntax rgb() and hsl() — while formats without an alpha concept show the solid color with a note, rather than inventing nonsense. The preview composites over a checkerboard so 40% opacity looks like 40% opacity.
Where to go next with a picked color
The picker deliberately links onward: name and identity at the Color Name Finder, full analysis (luminance, contrast, temperature, CVD) at the Color Analyzer, variants at Shades & Tints, and scheme-building at the Harmony Generator. Pick once; the color travels.
How to use the Online Color Picker
- Click the color well and pick visually, or type a hex code in the twin field.
- Add transparency with the alpha slider if you need it.
- Every format updates live; the closest CSS name is identified underneath.
- Copy any single value or the whole format list.
Frequently asked questions
How is this different from my browser or OS color picker?
It answers the follow-up questions in the same view: the value in twelve formats at once, the closest CSS name, and one-click copies for each. The native picker gives you one number; this gives you the number in every language your tools speak.
Which formats does the picker output?
HEX (with alpha when set), RGB in modern and legacy syntax, HSL, HWB, HSV/HSB for design tools, CMYK as a labeled approximation, CIELAB, LCH, OKLab, OKLCH and CIE XYZ – the full pipeline of CSS Color Level 4 plus the two non-CSS formats people actually ask for.
Can I pick a color from my screen with an eyedropper?
Chromium browsers expose an eyedropper inside the native color well this picker uses – click the well and look for the pipette. Firefox and Safari have not shipped it there yet; on those, grab a screenshot into the Palette From Image tool instead.
How do I get a slightly different version of the color I picked?
Hand it to the neighbors: Shades, Tints and Tones for lighter/darker, the Similar Color Finder for perceptual near-misses, the Harmony Generator for scheme-mates. Each link keeps your color so you never re-enter it.
Does the alpha slider change the other format outputs?
Yes – all alpha-capable formats switch to their transparent syntax: 8-digit hex, rgb()/hsl() with slash-alpha, and so on. Formats with no alpha concept (HSV, CMYK, XYZ) show the solid color and say so.
Why does the picker show a CMYK value with an asterisk?
Because CMYK from screen values is inherently nominal – real ink recipes come from ICC profiles. The asterisk footnote keeps that honest while still giving the ballpark figure that answers most day-to-day questions.
Is anything I pick tracked or uploaded?
No – the picker computes everything locally in your browser and the page keeps working offline once loaded. Analytics record only that the tool was used, never which colors you picked, and nothing you enter is stored or transmitted anywhere.
