The Image Color Picker reads the exact colour of any pixel in an image you open: click or tap the point you want, and it reports that pixel's HEX, RGB, and HSL values, computed locally in your browser, nothing is uploaded. Type or paste a HEX code instead and it additionally reports the colour's relative luminance and its WCAG contrast ratios against white and black, the numbers accessibility work runs on.
How It Works
The image is drawn to an HTML canvas, and the picker reads the pixel data at your chosen coordinates: red, green, and blue channel values from 0 to 255 (plus alpha where the image has transparency). Those channels convert directly to HEX (each channel as two base-16 digits) and to HSL through the standard max/min geometry. For a typed HEX, the tool also linearizes the sRGB channels and computes WCAG relative luminance:
Parameters
| Input | Meaning | |---|---| | Image | Opened locally; click any pixel to sample it | | HEX code | 3- or 6-digit hex, for values, luminance, and contrast |
Worked example
Sampling a pixel of #FF5733 returns HEX #FF5733, RGB rgb(255, 87, 51), and HSL hsl(11, 100%, 60%): a fully saturated warm orange. Its relative luminance computes to 0.2832, giving a contrast ratio of 3.15 against white and 6.66 against black. Those two ratios immediately settle a design question: black text on this orange passes WCAG AA for normal text (needs 4.5), while white text on it fails AA for body copy and is acceptable only for large headings (needs 3.0). This is the picker's most valuable habit: it turns "this brand colour with white text looks fine to me" into a number with a standard attached, before the design ships.
Sampling technique: getting the pixel you meant
Photographs and JPEGs are noisy at pixel level: neighbouring pixels in an apparently flat sky can differ by several channel points each, and JPEG compression concentrates its artifacts exactly at sharp edges and brand-colour boundaries, so a single click can land on an artifact rather than the colour. Work zoomed in, sample a few adjacent pixels, and take the consensus or the value from the flattest area; for logos and UI screenshots in lossless formats (PNG), single clicks are exact. Two more honesty notes: the value you get is the colour as the browser renders the file, already interpreted through its colour profile, which is the right value for web work and a close-but-managed approximation of a print original; and anti-aliased edges blend foreground and background by design, so text edges never yield the true text colour, sample the letter's solid interior instead.
What the picker deliberately does not do
It samples one pixel at a time: it does not average a region, extract a dominant palette, or cluster an image's colours (workflows that call for dedicated palette tools), and it reports RGB-family values, not print CMYK, because a canvas pixel has no CMYK meaning until a print profile assigns one (the Color Converter on this site provides the mathematical CMYK estimate when that is what you need). Alpha is reported from the pixel data where present; note that a semi-transparent pixel's displayed colour depends on what is behind it, so its raw channels describe the ingredient, not the served dish. Images are processed entirely on your device via the canvas API, which suits screenshots, client assets, and unreleased designs that should not transit third-party servers.
Frequently Asked Questions
Why do two clicks in the same colour area give different values?
Because the area is not actually one colour: sensor noise, gradients, dithering, and compression make real images vary pixel to pixel even where the eye sees flatness. Zoom in and average mentally across a few samples, or sample from a lossless source where the flat area is truly flat.
Can the picker tell me if two colours contrast enough for accessibility?
Yes, via the HEX path: enter a colour and read its contrast against white and black directly, and for a specific foreground/background pair, compare their luminances with the formula shown (or check each against the background it will sit on). AA requires 4.5:1 for normal text and 3:1 for large text; AAA raises those to 7:1 and 4.5:1.
Does it work on transparent images?
It reads the pixel's stored channels including alpha. A fully transparent pixel may report channel values that look arbitrary, because invisible pixels' colours are undefined leftovers in many files; composite the image over your intended background first if the displayed result is what you need to match.