Built for picking the right pixel
Most colour pickers ask you to click an exact pixel unaided, then hand back whatever that one pixel happened to contain. On a photograph that is frequently the wrong answer. This one magnifies what is under the cursor, lets you nudge with the keyboard, and averages a small square so compression noise does not decide your brand colour.
Everything runs on a canvas in your own browser. The image is never uploaded.
The loupe, and the arrow keys
Hover anywhere on the image and a magnified view appears in the corner with a pixel grid drawn over it. The white square in the middle marks exactly what will be sampled. You can see the pixel before you commit to it.
If the pointer will not settle, click roughly where you want and then use the keyboard:
- Arrow keys — move one pixel
- Ctrl + arrow (or Alt) — jump ten pixels
- Enter — pick the current pixel
That also means the tool works without a mouse at all.
Why 3 × 3 is the default
This is the part most pickers get wrong. JPEG stores colour in blocks and throws away detail, so an area that looks like flat red is really a spread of slightly different reds. Sample one pixel and you may get a compression artefact rather than the colour you were looking at.
Averaging a 3 × 3 square cancels that. Three settings:
| Setting | Use it for |
|---|---|
| 1 pixel | PNGs, screenshots, logos, flat-colour graphics — anywhere you need the literal value |
| 3 × 3 | Photographs. The default, and the right answer most of the time |
| 5 × 5 | Noisy or heavily compressed photos, or when you want the general colour of an area rather than a point |
Six ways to write the same colour
Every pick is shown as HEX, RGB, HSL, HSV, CMYK and the nearest CSS colour name. Click any row to copy it.
They are not interchangeable in practice. HEX is what you paste into CSS or hand to a designer. RGB is what you want when you need to change one channel or add opacity. HSL is the useful one for making a lighter or darker version — change the last number and the hue stays exactly where it was. HSV is what most design software shows in its colour dialog. CMYK matters only for print. The name is the closest of the 148 CSS keywords, which is handy for describing a colour and useless for matching one.
The contrast check
Under the values you get the WCAG contrast ratio of your colour against white and against black, with a pass or fail badge. 4.5:1 is the minimum for body text, 3:1 for large text, 7:1 for the stricter AAA level.
This answers the question that usually comes right after picking a colour: can I actually put text on it? Pulling a brand colour out of a logo and discovering later that nothing readable sits on top of it is a common and expensive mistake.
Why the colour looks different somewhere else
You copy a hex code, paste it into Figma, and it does not look the same. Three usual causes, and none of them is the picker being wrong.
Colour profile. A photo tagged Display P3 shown on a wide-gamut screen looks more saturated than the same numbers interpreted as sRGB. The hex you copy is the number stored in the file, not the appearance your eye received.
Screenshots. Capturing part of a screen can shift colour slightly depending on the operating system and display, so a colour sampled from a screenshot of a website may not match the website's own CSS.
Print. CMYK cannot reproduce every RGB colour. Vivid oranges, cyans and pure greens are the usual casualties, coming out visibly duller on paper. The CMYK numbers here are a plain conversion with no printer profile applied — a starting point for a conversation with a printer, not a proof.
Questions people ask
How do I find the exact colour code in an image?
Hover over the image and the loupe in the corner magnifies the area under the cursor with a pixel grid, so you can see which pixel you are about to take. Click to pick it. If the cursor will not sit still on the right pixel, click nearby and then use the arrow keys — each press moves exactly one pixel, and Ctrl+arrow jumps ten.
Why does the tool average 3×3 pixels instead of taking one?
Because on a JPEG a single pixel is often not the colour you can see. JPEG compression stores colour in blocks and introduces speckle, so two neighbouring pixels in what looks like flat red can differ by ten or more points per channel. Averaging a small square cancels that out. Pick 1 pixel when you need the literal value — on a PNG, a screenshot, or a flat-colour graphic — and 3×3 for photographs.
Why does my picked colour look different in Figma, Photoshop or print?
Three usual reasons. First, colour profile: a photo tagged Display P3 shown on a wide-gamut screen looks more saturated than the same numbers in sRGB, and the hex you copy is the raw number, not what your eye saw. Second, screenshots: taking a screenshot of a screen can shift colour slightly depending on the OS and display. Third, print: CMYK cannot reproduce every RGB colour, so bright screen colours — vivid oranges and cyans especially — come out duller on paper. The CMYK figures here are a straightforward conversion with no printer profile applied, so treat them as a starting point, not a proof.
What do the contrast numbers mean?
They are WCAG 2.1 contrast ratios between the colour you picked and plain white or plain black. 4.5:1 is the minimum for normal body text (AA), 3:1 is enough for large text, and 7:1 is the stricter AAA level. If you are choosing a brand colour for a button or a link, this tells you immediately whether text will be readable on it.
Which format should I use?
HEX for CSS and design handoff. RGB when you need to adjust a channel or set opacity. HSL when you want a lighter or darker version of the same colour — change the last number and the hue stays put. HSV appears in most design software colour dialogs. CMYK only for print. The nearest name is the closest of the 148 CSS colour keywords, which is useful for describing a colour, not for reproducing it.
Can I get a whole palette instead of one colour?
The strip under the picker shows the image's dominant colours — click any swatch to copy it. For more control over how the palette is built, use the Color Palette Extractor.
Is my image uploaded anywhere?
No. The image is drawn onto a canvas inside your browser and read back pixel by pixel there. It never leaves your device, there is no account, and there is no size limit beyond what your own machine can handle.