Palette generator
Color palette generator
Pull a palette out of a photograph, or build one around a colour you already have.
Extract a palette from your image
Drop a file here, paste from the clipboard, or choose one below. Up to 25 MB: PNG, JPG, WebP, GIF, BMP or SVG.
A URL only works when the other site allows cross-origin reads. If it does not, download the image and choose it here instead.
Why a photograph makes a good palette
The colours in a photograph were not chosen; they were produced by one light source falling on a set of surfaces. That shared light is what makes them agree with each other. A palette lifted from a photograph inherits that agreement for free, which is why it usually looks settled in a way an arbitrary set of hexes does not.
It also inherits the photograph's proportions. The share shown on each swatch is how much of the image that cluster covered, and those proportions are worth keeping. A colour that was four percent of a photograph will not survive being used as a page background.
What extraction actually does
A twelve megapixel photograph might contain two hundred thousand distinct colours. Extraction is the job of reducing that to a handful without losing the character of the image.
Median cut does it geometrically. Every colour is a point in a three-dimensional box. Split the box along its longest side, at the point where half the pixels fall on each side. Repeat on whichever box now holds the most pixels. Stop when you have as many boxes as you want colours, and average each one.
Splitting at the median rather than the midpoint is the important part: it follows where the pixels actually are, so a photograph that is mostly sky does not spend half its palette describing an empty corner of colour space.
Turning a palette into a design system
A palette of six is not yet a colour system. A system needs several steps of each colour: a light background tint, a mid tone and a strong version for text. Sample the colour you want to build on, then use the tints and shades ramp to generate those steps around it, and check the text pairs in the contrast checker before committing.
Exporting
Every extracted palette can leave as CSS custom properties, JSON, CSV, plain text or a PNG swatch card. The CSS export names the variables after your file, so a palette pulled from sunset.jpg arrives as --sunset-1 through --sunset-6 and is ready to paste into a stylesheet.
Frequently asked questions
How does the extraction decide which colours matter?
The image is reduced to a histogram at five bits per channel, then the busiest box of colours is repeatedly split along its widest axis at the population median. Each surviving box is averaged to give one palette entry, and the entries are ordered by how much of the image they cover.
Why do I sometimes get fewer colours than I asked for?
Because the image does not contain that many distinct ones. A flat two-colour logo has two colours, and padding the result with invented ones would be worse than telling you the truth.
Will the same image always give the same palette?
Yes. There is no randomness anywhere in the process, so the result is reproducible. That also means you can re-extract at a different size and get a consistent family of palettes.
Is this AI?
No. It is median-cut quantisation, a technique from the 1980s that is still the right tool for the job. Calling it AI would be a nicer sentence and a false one.
What is the difference between the two modes?
From an image reports colours that are genuinely present in your picture. From a colour builds a set around one colour using fixed relationships on the colour wheel. The first describes something; the second constructs something.
Read the guide
- How to create a website color paletteGoing from one colour to a working system: how many steps you need, why neutrals are most of the work, and where to check before committing.
- How to pick a color from an imageWhy a sampled pixel and the colour you think you see are often different, and how to sample the one you actually want.