Color picker
Pick a colour off anything on your screen with the browser EyeDropper, convert it between HEX, RGB, HSL, HSV and CMYK, or find the nearest CSS colour name for a value you already have. No upload, no account.
Three colour jobs on one page. Sample a colour from anywhere on screen with the browser's EyeDropper, convert a value you already have between HEX, RGB, HSL, HSV and CMYK, or look up the closest of the 148 named CSS colours for a hex you were handed. Everything runs in this tab: no image is uploaded, no palette is stored on a server, and the picker never sees anything you do not deliberately click on.
Key facts about Color picker
| Formats converted | HEX (3-, 6- and 8-digit), RGB / RGBA, HSL / HSLA, HSV, CMYK |
|---|---|
| Screen picking | EyeDropper API — Chrome, Edge and Opera 95+. Firefox and Safari do not implement it; those browsers get the wheel and the converter instead |
| Named colours | 148 CSS/SVG keywords, matched by nearest distance in RGB space |
| CMYK caveat | A naive device-independent conversion with no ICC profile, so it is a starting point for print, not a proof |
| 8-digit HEX | The last pair is alpha — #FF000080 is red at 50 % opacity |
| Precision | Hue is reported to one decimal; RGB channels are integers 0–255, the same values a browser's computed style returns |
What happens to your file
Nothing is uploaded and nothing is stored. The EyeDropper is a browser API: when you start it, the browser — not this page — takes over the pointer and hands back a single colour value when you click. The page never receives a screenshot, never sees your other windows, and cannot start the picker without that click. The conversions are arithmetic on the number you typed, done in this tab.
About this tool
- 1
Pick from screen
Press the EyeDropper button and click anywhere on screen. The colour comes back as a hex value in every format at once.
- 2
Or type a value
Switch to the HEX / RGB / HSL / CMYK view and paste any format — the others update as you type.
- 3
Find the name
Switch to Nearest colour name to get the closest CSS keyword and how far off it is.
- 4
Copy the format you need
Click any swatch or value to copy it. CSS-ready strings, not bare numbers.
| Modes | Pick from screen · HEX / RGB / HSL / CMYK · Nearest colour name |
|---|---|
| EyeDropper support | Chromium 95+ (Chrome, Edge, Opera, Brave, Arc). Not available in Firefox or Safari |
| Input accepted | #abc, #aabbcc, #aabbccdd, rgb(), rgba(), hsl(), hsla(), or a bare 6-digit hex |
| Output | Copy-ready CSS strings plus raw channel values |
| Network | None. No request is made after the page loads |
- HSL is the format to edit by hand: change lightness alone and you get a tint of the same colour, which is fiddly in RGB.
- A "nearest CSS name" is a convenience, not an equality — check the distance figure before you replace a brand hex with a keyword.
- CMYK from a screen colour is always approximate. Ask the printer for the profile before committing a value to press.
- If the EyeDropper button is missing, you are in Firefox or Safari; use the wheel or paste the hex instead.
- To sample a colour out of a photo rather than off the screen, the image colour picker takes a file and is the better tool.
- EyeDropper screen sampling on Chromium browsers
- HEX, RGB, RGBA, HSL, HSLA, HSV and CMYK conversion
- 8-digit HEX with alpha
- Nearest of 148 named CSS colours
- Colour wheel and manual entry
- One-click copy of CSS-ready strings
- Grab the exact blue out of a screenshot a client sent and put it in CSS.
- Turn a brand hex into the RGB values a design tool wants.
- Convert a web colour to approximate CMYK before a print quote.
- Replace a near-miss hex with the CSS keyword a colleague will recognise.
- Check what #336699 is in HSL before nudging its lightness.
Related tools
View allWorks well with this6
More in Data & Dev12
Updated