Image Color Picker
Click anywhere on an image to instantly pick its color. Get HEX, RGB, and HSL values with one click. Private, nothing leaves your browser.
Input
Drop an image here
or click to browse: JPG, PNG, WebP, GIF
Picked Color
Click on the image to pick a color
How to pick a colour from an image
Load an image, click a pixel, and copy its colour in the format you need.
- 01
Load the image
Drop in a JPG, PNG, WebP or GIF, or click to browse. It's drawn onto a canvas at its full resolution, so a 4000 px photo is sampled at 4000 px, not at the size shown on screen.
- 02
Hover to preview, click to pick
A small swatch follows your cursor and shows the colour underneath. Click, or tap on a phone, to lock in that pixel.
- 03
Copy the format you need
HEX for CSS and design tools, RGB for code and canvas work, HSL when you want to make lighter or darker variants. Your last 12 picks stay as swatches; click one to copy its HEX.
Why two clicks a pixel apart give different colours
The picker reads exactly one pixel. That's precise, but photos are rarely uniform. JPEG compression works in 8 × 8 blocks and adds faint noise, and camera sensors add grain, so a patch of sky that looks flat can vary by several values in each channel from one pixel to the next.
For a representative colour, click three or four spots in the area and compare them in the history. If they differ, pick the one in the middle, or blur the image slightly in an editor first. Logos, screenshots and flat illustrations don't have this problem, and a single click is enough.
HEX, RGB and HSL: when to use which
All three describe the same colour, so the choice is about where you'll paste it. Here's one pick, a mid blue, in each format:
| Format | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | CSS, Figma, Canva and brand guidelines |
| RGB | rgb(59, 130, 246) | Code that mixes in transparency, such as rgba() |
| HSL | hsl(217, 91%, 60%) | Making tints and shades: change only the last number |
HSL is the handy one for building a palette. Keep the hue and saturation, then step the lightness: hsl(217, 91%, 40%) is a darker version of the same blue and hsl(217, 91%, 85%) a pale tint. The values shown are rounded to whole numbers.
Checking a picked colour for readable contrast
WCAG 2 measures contrast as a ratio from 1:1 (no difference) to 21:1 (black on white). Normal body text needs at least 4.5:1 to pass level AA, and large text, about 24 px or 19 px bold, needs 3:1. The ratio comes from each colour's relative luminance, so you need both HEX codes, which is what this picker gives you.
Take the mid blue from the table above, #3B82F6. On white it scores 3.68:1, so it's fine for a big heading or a button outline but fails for small body text. Darken it to hsl(217, 91%, 40%), which is #0950C3, and it reaches 7.13:1, enough for AAA. On a black background the original blue scores 5.71:1, so the same colour can pass on one background and fail on another. Mid grey #767676 is a useful reference point: it sits just above the AA line on white at 4.54:1.
Where an image colour picker helps
Matching a brand colour from a logo
Pick from a PNG of the logo rather than a photo of a sign, so you get the clean colour and not lighting or print effects.
Copying colours from a screenshot
Screenshot a site or app and sample its buttons and backgrounds to reuse the exact shades in a mock-up.
Checking contrast before launch
Pick a text colour and its background, then put both HEX codes into a contrast checker to see if they meet WCAG.
Limits worth knowing
- Transparency isn't reported. A fully transparent pixel in a PNG reads as black, rgb(0, 0, 0), so pick from the visible part of the image.
- Colours are read after the browser converts the image to sRGB. Photos saved in a wider colour space, such as iPhone images in Display P3, can give values a little different from what Photoshop shows in the original profile.
- Animated GIFs are sampled from the first frame only.
- The history keeps 12 colours and clears when you reload the page, so copy anything you need to keep.