Image Color Picker: How It Works
Picking a colour from an image reads the exact pixel value under the cursor. That is useful for matching a brand colour, building a palette from a photograph, or identifying a shade you cannot name — and there are a few reasons the value you get may not be the value you expected.
What you get
| Format | Example | Use in |
|---|---|---|
| HEX | #3B82F6 | CSS, design tools |
| RGB | rgb(59 130 246) | Code, programmatic use |
| HSL | hsl(217 91% 60%) | Building tints and shades |
| CMYK (approx.) | 76 47 0 4 | Print reference only |
CMYK values from a screen colour are an approximation. Screens emit light and mix additively; print reflects it and mixes subtractively. A vivid screen colour may simply be outside the printable gamut, which is why a design can look correct on a monitor and dull on paper. For print work, specify colours from a printed reference or a Pantone book rather than converting from a screenshot.
Why the value may surprise you
- JPEG artefacts. Compression alters pixels, especially near edges and in flat areas. A logo sampled from a compressed image often returns a value slightly off the true brand colour.
- Anti-aliasing. Edge pixels are blends of two colours. Sample from the middle of a solid area, never near a boundary.
- Colour profiles. An image tagged with a wide-gamut profile displays differently from one tagged sRGB, and the sampled value depends on how the browser handled the conversion.
- Screenshots. Operating system colour management can shift values between what was rendered and what was captured.
For an authoritative brand colour, use the value from the brand guidelines rather than sampled pixels. Sampling is for approximation and inspiration.
Building a palette from an image
- Sample the dominant colour first — the largest area, not the most striking.
- Sample two or three supporting colours from different regions.
- Pick one accent from the most saturated small area.
- Derive neutrals by desaturating the dominant hue rather than using pure grey, which makes the set feel coherent.
- Check every text-and-background pairing for contrast before using them.
That last step is the one usually skipped. A palette pulled from a photograph is frequently beautiful and unreadable — colours of similar lightness look distinct while failing contrast badly.
Averaging a region
Sampling a single pixel from a textured or noisy area gives an unrepresentative value. Averaging a small region — a 5 × 5 or 11 × 11 block — returns something closer to the colour you perceive, which is what you usually want from a photograph. Single-pixel sampling is right only for flat, uncompressed graphics.
Accessibility check
Once you have a pair of colours, verify contrast: 4.5:1 for body text and 3:1 for large text or interface components under WCAG AA. And never rely on colour alone to convey meaning, since around 8% of men have some form of colour vision deficiency.
Sampling here happens entirely in your browser — the image is read by the page and never uploaded.