Colour Palette from Image
Pull the dominant colours out of a photo, logo or screenshot. Click any swatch to copy its hex code, or download the whole palette as CSS variables.
- Select any image — a photo, a logo, a screenshot of a design you like.
- Choose how many colours you want. Eight suits most palettes; five for something tighter.
- Click a swatch to copy its hex, or download the set as CSS variables or JSON.
How the colours are chosen
Naively counting the most frequent pixels gives a poor result — you get eight barely-distinguishable shades of whatever dominates the background. This uses median cut, the classic quantisation approach: it treats every pixel as a point in colour space, repeatedly splits the fullest region along its widest axis, and averages what falls in each box.
The effect is a palette that spans the image rather than clustering. A photo of a sunset gives you the orange, the deep blue and the silhouette — not six oranges. The percentage under each swatch shows how much of the image that colour accounts for, so you can tell a dominant tone from an accent.
What it's useful for
- Building a brand palette from a logo when nobody wrote the hex codes down — which is most of the time.
- Matching a design to a photograph, so a page and its hero image feel like one thing.
- Recovering colours from a screenshot of a site or app you want to reference.
- Choosing chart colours that sit correctly against an image-heavy page.
Getting a better result
Crop before you extract. If you only care about a product's colours, crop out the background first — otherwise a large white studio backdrop dominates the palette and you get five whites. The crop tool takes a few seconds and changes the output completely.
Transparent areas are skipped rather than counted as white or black, so logos on transparency give sensible results. Very small images give rougher palettes simply because there are fewer pixels to sample.