Image Color Picker
Open a photo, screenshot or logo and click any pixel to get its colour code in HEX, RGB, HSL, HSV and CMYK — with a magnifier for exact pixels, the nearest colour name and the image’s main colour palette.
At a glance
- Click any pixel to get its colour as HEX, RGB, HSL, HSV and CMYK, each with a copy button — transparent pixels also give RGBA and 8-digit HEX.
- A magnifier shows the 11 × 11 pixels around the pointer; sample a single pixel or the average of 3×3, 5×5 or 9×9 pixels to smooth out noise.
- Shows the nearest CSS colour name and the closest Tailwind CSS colour, matched with the CIEDE2000 colour-difference formula.
- Builds the image’s colour palette — its 5, 8 or 12 main colours with how much of the image each covers — ready to copy as a HEX list or CSS variables.
- Checks contrast against white and black text (WCAG ratio and AA/AAA level). In Chrome and Edge on a computer you can also pick a colour from anywhere on your screen.
- Works with JPG, PNG, WebP, HEIC and pasted screenshots. The image never leaves your browser.
Step by step
How to pick a colour from an image
- 1
Open the image
Drop a photo, screenshot or logo on the page, browse for it, or paste a screenshot with Ctrl+V.
- 2
Aim with the magnifier
Move over the image to see the pixels up close. On a phone, drag your finger and lift it to pick.
- 3
Click to pick
Click the pixel you want. Its HEX, RGB, HSL, HSV and CMYK codes appear on the right.
- 4
Copy the code
Press the copy button next to any format, or use the palette and history to copy several colours at once.
Features
Everything you need, nothing you don’t
Pixel-exact
A zoomed loupe and arrow-key nudging land on exactly the pixel you want, even in fine details.
Every format
HEX, RGB, HSL, HSV, CMYK, a CSS name and a Tailwind class — copy whichever your project uses.
Instant palette
The main colours of the whole image, worked out automatically and sorted by how much space they take.
Accessible colours
See at once whether the colour is readable on white or on black, with WCAG contrast ratios.
Colour history
Every colour you pick is kept in a row of swatches, so you can compare and copy them all.
Private
Pixels are read in your browser — logos, designs and screenshots are never uploaded.
Colour code formats explained
| Format | Example | Used for |
|---|---|---|
| HEX | #1E90FF | Websites (HTML and CSS), design apps, brand guides |
| RGB | rgb(30, 144, 255) | CSS, screens, video and most software |
| HSL | hsl(210, 100%, 56%) | CSS — easy to make lighter, darker or less saturated versions |
| HSV / HSB | hsv(210, 88%, 100%) | Colour pickers in Photoshop, Figma and other design tools |
| CMYK | cmyk(88%, 44%, 0%, 0%) | A starting point for print — check final print colours with your printer |
Tips for accurate colours
- Use a PNG or a high-quality original where you can: JPG compression and resizing blend neighbouring pixels.
- In photos, average 3×3 or 5×5 pixels — single pixels vary because of noise and texture.
- Pick from flat areas of a logo, not its edges, where colours blend into the background.
- Screenshots show colours as your screen displays them, which may differ slightly from the original design file.
FAQ
Frequently asked questions
How do I find the HEX code of a colour in an image?
Is my image uploaded?
Can I pick a colour from my screen, outside the image?
How is the colour palette made?
Why does the colour look slightly different from my design file?
What does the contrast ratio mean?
Keep going
Related tools
Crop Image
Crop images online to any size or ratio: 1:1, 16:9, Instagram and YouTube sizes, circle crop, rotate, flip and straighten. Free, private and full quality.
Image to Grayscale Converter
Convert images to grayscale or black and white online: pick the method, adjust contrast, add sepia, and download in bulk as JPG, PNG or WebP. Free, no upload.
CSS to Tailwind Converter
Convert CSS to Tailwind classes online: hover, media queries, dark mode and gradients become variants, colours match the palette. Tailwind v4 and v3, free.
Image Resizer
Resize JPG, PNG and WebP images by pixels, percentage or social media presets. Crop to fill or fit, batch resize and download a ZIP — no upload needed.
Image Compressor
Compress JPG, PNG, WebP and AVIF images online for free. Shrink photos by up to 90% or hit an exact KB target — right in your browser, with no upload.
WebP Converter
Convert PNG, JPG, GIF and HEIC images to WebP in your browser. Lossy or lossless, transparency kept, batch ZIP download — free, private and with no upload.
Last updated Report a problem or suggest a feature