Color picker from image
Click any pixel of a photo, logo or screenshot and get its exact HEX, RGB, HSL and CMYK code — plus the five colours that dominate the whole picture.
Dominant palette
Need 3–10 colours? Palette toolFive colours found automatically with k-means clustering, sized by how much of the image each covers. Click a swatch to copy it.
Name this palette & suggest how to use it
An AI reads the colours above and suggests names, which one to use for background, text and accents, and what mood the palette sets.
Sends only the HEX codes and your note — never the image. AI output can be wrong; check contrast with the numbers above.
How to pick a colour from an image
- Load the image. Choose a file, drag it onto the page, or copy a screenshot and press Ctrl+V (⌘+V on a Mac).
- Aim with the magnifier. It shows an 11×11 pixel zoom around the cursor with the live HEX code, so you can land on the exact pixel you want.
- Click to lock it. All five formats appear on the right. Keyboard users can focus the image and move with the arrow keys (Shift for 10 px steps), then press Enter.
- Copy the format you need. HEX for CSS and Figma, RGB for code and Canva, HSL for building tints, CMYK for print briefs, OKLCH for modern CSS.
Which colour format do you need?
- HEX (
#C4145F) — the web’s default; paste it into CSS, Figma, Canva, Webflow or WordPress. - RGB (
rgb(196, 20, 95)) — the same colour as three 0–255 channels; used by most code and apps. - HSL (
hsl(334, 82%, 42%)) — hue, saturation, lightness; best for making lighter and darker variants. - CMYK (
cmyk(0%, 90%, 52%, 23%)) — ink percentages for print. A starting point, not a proof. How the conversion works.
Full background on all four systems is in HEX, RGB, HSL and CMYK explained.
What people use it for
Matching a brand
Pull the exact blue from a client’s logo PNG instead of eyeballing it. For logos, the brand colour extractor ignores the background for you.
Building a web palette
Start from a photo you love and export its palette as CSS variables or a Tailwind scale from the palette generator.
Naming a mystery shade
Found a colour on a product photo? The colour identifier tells you what it’s called and what it’s close to.
Sampling outside the browser
Need a colour from another app window? The online eyedropper samples anywhere on your screen in Chrome and Edge.
Questions people ask
How do I get the HEX code of a colour in an image?
Load the image (choose a file, drag it in, or paste a screenshot with Ctrl+V / ⌘+V), then click the exact spot. The HEX, RGB, HSL, CMYK and OKLCH values appear next to the image with a copy button for each.
Is my image uploaded anywhere?
No. The image is decoded and read by your own browser using the Canvas API. Nothing is sent to a server. Only if you press the optional AI button are the HEX codes (not the image) sent to generate palette suggestions.
Why is the colour I picked slightly different from what I see?
Photos contain noise, texture and compression artefacts, so neighbouring pixels differ. Switch the sample size to 3×3 or 5×5 to average the area under the cursor — that usually matches what your eye perceives.
How accurate are the CMYK values?
They use the standard device-independent formula (the same as Photoshop’s “no colour management” conversion and every web converter). For a print job, give your printer the HEX or RGB value and let their ICC profile (e.g. FOGRA39, GRACoL) produce the final CMYK.
Which image formats work?
Anything your browser can display: JPG, PNG (including transparency), WebP, GIF, AVIF, BMP and SVG. iPhone HEIC photos only open in Safari; elsewhere, export them as JPG first.
Can I use it on my phone?
Yes. Tap to pick; a magnifier shows the pixels under your finger. Drag your finger to fine-tune and lift to lock the colour.