Color Palette Generator — Image & Harmonies
Pull the colours out of any image, then build a matching scheme — with hex codes, a readable-text check and one-click copy as CSS.
Image palette
Harmony from the base colour
Choose an image or adjust the base colour.
What this tool does
Two jobs, both about getting colours that agree. First, it reads the dominant colours out of an image — useful when you have a photo, a logo or a screenshot and need to know what colours it is built from. Second, from any base colour it generates a harmony: a set of colours chosen by their relationship on the colour wheel so they belong together. Both give you copyable hex codes, and every swatch is labelled with the text colour that reads on it.
Reading a harmony
| Scheme | Rule | Good for |
|---|---|---|
| Complementary | Opposite hue (180°) | A single accent against a base — buttons, links. |
| Analogous | Neighbouring hues (±30°) | Calm, cohesive layouts and gradients. |
| Triadic | Three hues, 120° apart | Vivid, balanced palettes with a primary. |
| Split complementary | Base + the two hues around its opposite | Contrast with less visual tension. |
| Monochromatic | One hue, several lightnesses | Safe, subtle interfaces and ramps. |
Colours are judged by contrast, not by eye
A palette can look lovely and still fail the moment it becomes text on a background. The contrast ratio — a WCAG measure from 1 (invisible) to 21 (black on white) — is the objective test: body text wants at least 4.5, and large text at least 3. Each swatch here shows the colour that reads on it and whether the pairing passes, so a colour that would break a button is obvious before you ship it.
Why do this in the browser
Extracting a palette often means handling an asset you are not free to upload — a client's brand image, an unreleased design, a personal photo. This tool never uploads it: the image is opened, drawn to a canvas and sampled on your machine, and only the resulting hex codes leave the page (to your clipboard, if you ask). Nothing is transmitted.
Frequently asked questions
How does it extract colours from an image?
The image is drawn to a canvas and its pixels are read locally, then grouped into a coarse colour histogram: near-identical shades are merged, the most common colours are kept, and colours too close to one already chosen are skipped. The result is the handful of colours that actually define the image, not thousands of near-duplicates.
What are the harmony schemes for?
A harmony tells you which colours go with a base colour by their position on the colour wheel. Complementary is the opposite hue (strong contrast); analogous are the neighbours (calm); triadic and tetradic are evenly spaced (vivid and balanced); monochromatic is one hue at different lightnesses. Pick a base from the extracted palette and see a matching set instantly.
What does the contrast check tell me?
Contrast is how readable text is against a background, measured as a WCAG ratio from 1 to 21. The tool marks each colour with the text colour that reads on it and whether that pairing clears WCAG AA. It is the quickest way to avoid a palette that looks fine but produces unreadable buttons.
Can I use the palette in my own project?
Yes — every colour is given as a hex code you can copy, and the whole palette can be copied at once as a CSS custom-property block or a HEX list. There is no licence attached to colours themselves; the tool simply reads what is already in your image.
Is my image uploaded?
No. The image is opened by the browser, drawn to a canvas and sampled on your own machine. Nothing is sent to a server, which is what lets you extract a palette from a private design or a client asset.
Why do I get fewer colours than I asked for?
When an image is genuinely made of a few colours, forcing more out would invent shades that are not there. The extractor returns the distinct colours it finds up to your requested count; a flat logo may honestly have only two or three.
Go deeper
Longer explanations of the problems this tool solves:
Sources
- WCAG 2.2 — Contrast (Minimum), Success Criterion 1.4.3.
- MDN Web Docs — CanvasRenderingContext2D.getImageData().
Everything runs in your browser — your file never leaves your device.