Free · Runs in your browser · No sign-up

Pull a color palette from any photo

Upload an image to see its dominant colors as hex and RGB codes, then check contrast between any two for accessible text pairings.

Upload a photo

Drag and drop, or click to browse

Uploaded photo
6

Contrast checker

Click a swatch →
then another →
The quick brown fox jumps over the lazy dog

Extracting a color palette from a photo

Every photo is built from thousands of individual pixel colors, but a handful of them usually dominate — the sky, a wall, someone's shirt, the shadows. This tool samples every pixel in your uploaded image, groups similar colors together, and ranks the resulting clusters by how much of the image they cover, giving you a short list of the colors that actually define the photo's look.

Where a palette like this gets used

Designers often pull a palette from a reference photo to build a brand color scheme, a website theme, or a slide deck that matches a mood board. Painters and illustrators use it to study a scene's color relationships before starting work. It's also a fast way to match a new graphic to an existing photo — grab the hex code and drop it straight into your design tool.

Why the contrast checker is built in

A palette pulled from a photo can look great side by side and still fail as text-on-background. The contrast checker calculates the WCAG luminance-based contrast ratio between any two colors you pick from the extracted set, and flags whether that pairing clears the standard AA and AAA accessibility thresholds. If you're about to use a palette color as a text color on top of another palette color, this catches unreadable combinations before they ship.

Reading the ratio

Frequently asked questions

How many colors can I extract?

Between 4 and 10, adjustable with the slider. Fewer colors give you the broad strokes; more colors pick up secondary tones.

Can I copy a hex code directly?

Yes — click any swatch to copy its hex code to your clipboard.

Does this tool upload my photo?

No. Every pixel is read locally through the browser's canvas API, and nothing is sent to a server.

Copied!