Open a picture (or paste a screenshot) and move over it: a magnifier shows the pixels under the cross, and the colour is given as HEX, RGB, HSL and OKLCH, each with a copy button. Click or tap to keep a colour in your list. Below the picture, the tool extracts the picture's dominant colours, shows how much of the picture each one covers and which text colour reads on it, and writes the palette as CSS variables, Tailwind (v4 @theme or a v3 config), SCSS, JSON or a plain list. A contrast checker takes any two of these colours and tells you whether they pass WCAG for body text, large text and icons. The picture is never uploaded: it is decoded and read on this device.
Picking precisely
- On a computer, move the mouse and click.
- On a phone or tablet, drag your finger: the magnifier follows it and the colour is picked when you lift your finger, so your fingertip never hides the spot you choose.
- With a keyboard, focus the picture and use the arrow keys to move the cross one pixel at a time (Shift moves 10), and Enter to pick.
Photos are noisy: neighbouring pixels of a "white" wall can differ by a few levels, and JPEG compression adds blocks of slightly different colour. Set Sample to a 3 × 3 or 5 × 5 average to read the colour of a surface rather than of one random pixel. Very large pictures are held at 4,096 pixels on the longest side for picking, which the tool says when it happens; for colour this changes nothing visible.
How the palette is found
The palette is computed by median cut: the picture's pixels are counted in a histogram of 32,768 buckets, all colours start in one box, and the box with the largest spread is repeatedly cut in two at the median of its widest channel until there are as many boxes as colours asked for. Each palette colour is the exact average of its box, and the share is the part of the picture it stands for. There is no randomness, so the same picture always gives the same palette, unlike k-means tools that change on every run. Ask for 4 to 6 colours for a brand palette, 10 to 16 to see the full range of a photograph.
From a photo to a palette that works
A palette lifted straight from a photo rarely gives readable text: the saturated orange in a sunset photo (#f08c1e) has a contrast of only 2.48:1 against white, below the 4.5:1 that body text needs. The checker suggests the closest colour that passes, keeping the hue (#b1620c in this case, 4.5:1 or more). The article on photo palettes and contrast works through a full example. For gradients and harmonies built from a single colour, use the colour tools; for CSS gradients, the gradient generator.
