Color palette from image.

Choose an image and get its main colors as HEX codes, most common first, ready to copy. It runs in your browser, so the image never leaves your device.

Choose an imageor drop it here

Number of colors

Choose an image to see its main colors.

Runs in your browser. Nothing you add here is uploaded or stored.

How to extract colors from an image

Choose an image, or drop it on the box above: a photo, a screenshot of a design you like, a logo or a mockup.
Set the number of colors, from 5 to 8. It starts at 6.
Read the palette. The main colors are listed most common first, each with its share of the image and its HEX code.
Copy a single HEX code, or all of them at once as a comma-separated list. Click the image to try another one.

From palette to DESIGN.md to Codex

A list of colors doesn’t tell Codex which color goes where. Give each one a job and write it down once, and every screen Codex designs uses the same palette:

Extract the colors from your reference: a mood photo, a brand image, or a screenshot of a design direction you like.
Give each color a role. The shares help: a large, light color usually becomes the background (neutral), a dark one the text (on-surface), a strong one the main actions (primary), and a small accent the secondary or tertiary color.
Check the text pairs in the contrast checker. Colors taken straight from a photo often need to be a little darker or lighter before text on them is easy to read.
Paste the HEX codes into the DESIGN.md generator, add your fonts and spacing, and save the file at the root of your project.
Point Codex to it from AGENTS.md, as the DESIGN.md guide shows. From then on Codex uses these colors instead of choosing new ones for every screen.

If you’d rather let Codex assign the roles, paste the codes into a prompt:

Palette to DESIGN.md

These are the main colors of our reference image: [paste the HEX codes]. Assign them to the DESIGN.md color roles primary, on-primary, secondary, tertiary, neutral, surface and on-surface. Make sure on-primary on primary, and on-surface on surface and on neutral, reach at least 4.5:1 contrast; where they don't, adjust the lightness and keep the hue. Then write the colors into DESIGN.md at the repository root.

Frequently asked questions

Is it free?

Yes. It’s free, with no sign-up and no limit on how many images you try.

Is my image uploaded?

No. Your browser reads and analyzes the image on your device, and it isn’t sent or stored anywhere. The site only counts that the tool was used, never the image.

How does it choose the colors?

It shrinks the image to at most 160 pixels on its longest side, which is plenty for color, then groups similar pixels together and reports the average color of each group with the share of the image it covers. A small accent gets its own entry when it’s clearly different from the rest and covers at least 0.5% of the image, while the blended pixels along edges don’t. Transparent areas are ignored, and the same image always gives the same palette.

Why are there fewer colors than I asked for?

The image doesn’t have that many distinct colors. A flat logo with only a few colors can give fewer than the number you set.