Extract a Colour Palette from an Image
Pull the colours that actually define a photo, as HEX, RGB and HSL, ready to paste into a design.
In short
A colour palette is extracted by counting how often similar colours appear across an image and grouping them into clusters. The result is the handful of shades that actually define the picture, rather than every individual pixel value, which is what makes it usable as a design palette.
Choose an image or drop one here
Any photo · read locally, never uploaded
Proportions in the image
Last reviewed
Runs entirely in your browser. Nothing you type here is uploaded, stored or logged.
How the palette is built
Every pixel is assigned to a coarse colour bucket, a reduced version of its RGB value. And the buckets are ranked by pixel count. Near-identical buckets are then merged, so you get six distinct colours rather than six shades of the same blue.
The percentages under each swatch are the share of pixels that colour represents, which tells you which colours to use for large areas and which are accents.
Using a palette from a photograph
A common mistake is applying extracted colours in the proportions they appear in the image. That produces something muddy, because a photo is mostly mid-tones and a design needs contrast.
A more reliable approach:
- The dominant colour becomes your background: usually lightened considerably.
- The darkest colour becomes your text, if it passes contrast.
- The most saturated colour becomes your accent, used sparingly, buttons, links, highlights.
- Everything else is supporting, for borders, subtle fills and secondary text.
The rough proportion designers reach for is 60 / 30 / 10: sixty percent dominant, thirty percent secondary, ten percent accent. Extracted proportions are information about the photo, not a recipe for the layout.
Check contrast before you commit
A palette that looks beautiful can be unreadable. Two colours pulled from the same photo often sit at similar luminance, that's what made them harmonious. And similar luminance is exactly what fails a contrast test.
Run any text-and-background pair through the contrast checker before building on it. WCAG AA needs 4.5:1 for body text, and photo-derived pairs frequently land nearer 2:1.
HEX, RGB or HSL
| Format | Looks like | Best for |
|---|---|---|
| HEX | #a1b2c3 | CSS, design tools, sharing. The default. |
| RGB | rgb(161, 178, 195) | When you need opacity, via rgb(… / 50%). |
| HSL | hsl(210, 20%, 70%) | Generating variations of one colour. |
HSL is the underrated one. Because hue, saturation and lightness are separate numbers, you can build an entire tonal scale from a single extracted colour by changing only the lightness. Which is how consistent design systems are made, and why this site's own palette is defined that way.
Where this is genuinely useful
- Matching a deck to a photograph on its title slide.
- Building a moodboard from reference images.
- Choosing a brand palette anchored to a product photo.
- Picking a background that sits comfortably behind an image.
- Recovering a colour from a screenshot when you have no access to the original file.
Copyright, briefly
Colours are not copyrightable, so a palette taken from an image is yours to use. The image is not, extracting six hex codes from a stock photo gives you the six hex codes, and no rights whatsoever to the photo they came from.
Frequently asked questions
How are the colours chosen?
Every pixel is sorted into a coarse colour bucket, the buckets are ranked by how many pixels they contain, and near-duplicates are merged so you get distinct shades rather than five versions of the same blue. The result is the handful of colours that actually define the image.
Why is the dominant colour not what I expected?
Usually because a large flat area, sky, wall, background, outnumbers the subject. A red flower against green leaves gives a green-dominant palette, correctly. Crop to the part you care about first if the subject is what matters.
Can I use these colours commercially?
Colours themselves are not copyrightable, so a palette derived from an image is free to use. The image is a different matter, extracting a palette from a photo you do not have rights to does not give you rights to the photo.
Which format should I copy?
HEX for CSS and most design tools. RGB when you need to set opacity alongside it. HSL when you want to generate variations, since adjusting lightness while holding hue and saturation is how you build a consistent scale from one colour.
Is my image uploaded?
No. Pixels are read locally from a canvas and the image never leaves your browser.