Image Color Picker

What the Image Color Picker Does

This tool reads the colour of individual pixels in an image you supply. Upload a screenshot, a brand asset, or an exported design frame, click any point on it, and the picker reports that pixel's value as HEX, RGB, and HSL. Each pick is added to a running list, and the list can be exported as CSS custom properties, SCSS variables, or JSON.

The typical accessibility use is recovering the real colours from a page or mockup so they can be tested. Designers often know the intended token, but the shipped colour after gradients, overlays, opacity, and image compression can differ. Sampling the rendered pixel tells you what users actually see, which is the value a contrast test needs.

How to Use It

1. Choose an image. Click Choose Image and pick a file. The image dimensions appear as a badge once it loads.
2. Pick by clicking or by coordinates. Press Pick Color, then click anywhere on the image. If you need a repeatable sample, type an X and Y position into the coordinate fields and press Sample coordinate instead. The coordinates are in the image's own pixels, not the displayed size, so they stay valid at any zoom level.
3. Copy or export. Each picked colour shows its HEX, RGB, and HSL values with a copy button beside each. Use the Export Palette card to download the whole set, or Save Palette to keep a snapshot while you keep sampling.

What It Checks, and What It Does Not

The picker does not evaluate anything against WCAG. It is a measuring instrument: it tells you what colour a pixel is, and it stops there. It does not know which of two colours is the text and which is the background, it does not compute a contrast ratio, and it cannot tell whether a colour is being used to convey information on its own.

The values it produces feed directly into four WCAG 2.2 success criteria, all of which need a manual step after sampling:

• 1.4.3 Contrast (Minimum) (Level AA): text needs a 4.5:1 ratio against its background, or 3:1 for large text. Sample the text colour and the background colour, then test the pair.
• 1.4.6 Contrast (Enhanced) (Level AAA): the stricter 7:1 and 4.5:1 thresholds.
• 1.4.11 Non-text Contrast (Level AA): a 3:1 ratio for the visible boundaries of controls and for the parts of graphics needed to understand them. Sample the border or icon colour, not the fill behind it.
• 1.4.1 Use of Color (Level A): knowing the exact colours of, say, a red and a green status dot helps you check that something other than hue also distinguishes them.

For the ratio itself, paste the HEX values into the Contrast Checker. Remember that a sample from a screenshot reflects one rendering on one display; the authoritative test is against the colours in your CSS, and for text on images or gradients you should sample the lightest and darkest points the text sits on and test the worst case.

Reading the Output

Every entry in the Picked Colors list carries the same information in three notations. HEX is the six-digit form most CSS uses. RGB gives the red, green, and blue channels from 0 to 255, which is what the canvas returns before any conversion. HSL is derived from the RGB values: hue in degrees, then saturation and lightness as percentages, rounded to whole numbers. The Position line records the X and Y pixel you sampled so you can return to it.

Picking a colour that is already in the list does not add a duplicate; the earlier entry is replaced by the new one, so the list stays unique by HEX value. Exports number the colours in list order: the CSS file declares --color-1, --color-2, and so on inside :root, the SCSS file declares $color-1 onwards, and the JSON file includes the RGB, HSL, and position data for each entry. Rename the variables to something meaningful before you commit them.

Frequently Asked Questions