How to Find the Colour Code of Anything in a Photo
Pick the exact colour from a photo, logo or screenshot and get its HEX, RGB, HSL and CMYK codes — with a pixel loupe, averaging for photos and contrast checks.
3 min read ·
To find the colour code of something in a picture, open the Image Color Picker, add the image, move your cursor over the colour you want — a magnified loupe shows the exact pixel — and click to lock it. You get the colour as HEX, RGB, HSL, HSV, CMYK, LAB and OKLCH, ready to copy with one click. The image never leaves your browser.
Pick a colour step by step
- Open the Image Color Picker.
- Upload the image, drag it in, or paste a direct image link.
- Move over the image: the pixel loupe magnifies the area under your cursor and the values update live. Zoom in (up to 6×) for small details like a logo or an icon.
- Choose a sample size: a single pixel for flat graphics and logos, or an average of 3×3, 5×5 or 11×11 pixels for photos.
- Click to lock the colour. It's added to your swatches.
- Click any format to copy it.
Why averaging matters for photos
In a photo, neighbouring pixels are never exactly the same colour — there's noise, texture, shading and compression. A single pixel from a "red" jacket can be anything from dark maroon to pink. Averaging a small block gives the colour a person actually perceives. It's the same option Photoshop's eyedropper offers.
Use single-pixel sampling only for flat digital graphics: logos, icons, illustrations and screenshots of websites.
Which code do you need?
| Format | Example | Use it for |
|---|---|---|
| HEX | #3b82f6 | Websites, CSS, design tools, most apps |
| RGB | rgb(59, 130, 246) | CSS, image editors, programming |
| HSL | hsl(217 91% 60%) | Adjusting lightness or saturation in CSS |
| CMYK | 76, 47, 0, 4 | A starting point for print (see below) |
| OKLCH / LAB | oklch(…) | Colour-accurate design work |
Matching brand colours
To find a company's colours from its logo:
- Use the logo file itself or a sharp screenshot of the website, not a photo of a sign — lighting changes photographed colours.
- Sample with a single pixel on a flat area of the logo.
- Lock each colour and save them as swatches.
- Export your swatches as CSS custom properties, or copy every hex at once.
For a whole palette from an image in one go, use the Color Palette Generator.
Check contrast before you use a colour
The picker shows WCAG contrast ratios against white, black and any colour you choose, with AA / AAA / Fail verdicts. If you're picking a colour for text or buttons, aim for at least 4.5:1 against the background for normal text (AA). Light brand colours often fail on white — use a darker shade from the tint and shade ramp instead.
Designers' extras
- Nearest Tailwind class — matched by how close colours look, not raw numbers.
- Tint and shade ramp — an 11-step scale around your colour for hover states and backgrounds.
- Colour harmonies — complementary, analogous, triadic and more, for building a scheme.
Print and paint
CMYK values from a screen colour are an approximation; printers use their own colour profiles, so ask your print shop to match a HEX or a Pantone reference and check a proof. To recreate a colour with real paint, the Paint Color Mixing Calculator suggests a recipe from the paints you own.
Converting codes you already have
Got a HEX and need RGB, or a CMYK value for a brief? The Color Code Converter converts between every format without needing an image.
Frequently asked questions
Is my image uploaded?
No. Colours are read from the image in your browser.
Why is the colour different from what I see on my phone?
Screens differ in brightness and colour calibration, and photos change with lighting. The code is the exact value stored in the file; how it looks depends on the display.
Can I pick colours from a website?
Take a screenshot of the page and add it here — sample with a single pixel for exact web colours.