Image specimen
no imageSwatches—
Dominant—
Coverage—
SourceNone
Pull the dominant colours out of a photograph, a screenshot, or a piece of artwork, with a separation control that decides how different two swatches have to be before both are kept. Coverage is reported per swatch, and the result exports as CSS custom properties rather than as a picture of some squares.
Step by step
01Drop the image in
Photograph, screenshot, illustration, or a brand asset. It is decoded and sampled in your browser — nothing is uploaded, so unreleased artwork is safe.
02Set how many swatches you want
Six is a useful default: enough for a palette, few enough to be a decision. More swatches surface subtler colours; fewer force the extraction to commit to the dominant ones.
03Tune the separation
Separation is the minimum perceptual distance between two kept colours. Raise it when the palette comes back as six shades of the same blue; lower it when you want the near-neighbours a photograph actually contains.
04Sort, check, and export
Sort by frequency to see what dominates or by lightness to read the palette as a ramp. Export is CSS custom properties named from your token name.
Worked example
The same photograph extracted twice. Asking for more colours is not the same as asking for more variety, and this is the control people reach for last.
Given
Low separation against high separation, same image
low #F5A25D #F09A54 #E8934F #DE8A4A …
six oranges, one degree apart
technically the dominant colours
useless as a palette
high #F5A25D #7B4A8C #2E3A5F #E8D6B0 …
the orange, the purple shadow,
the deep blue sky, the sand
the picture's actual rangeA frequency-ranked extraction returns what covers the most pixels, and in a photograph that is usually one colour in six slightly different tints. Separation is what turns a pixel census into a palette: it forces each new swatch to be perceptibly different from the ones already kept, so the accent that occupies 3% of the frame gets a place next to the sky that occupies 40%.
Before you build with it
Dominant is not the same as important
Extraction ranks by how much of the frame a colour occupies, and the most interesting colour in a photograph is often a small one — a jacket, a sign, a reflection. Raise separation or crop to the region you care about before extracting; otherwise the sky wins every time.
A photograph is not a design system
Extracted colours are a starting point, not tokens. They arrive at whatever lightness the light happened to be, with no even ramp and no guarantee that any two of them contrast. Take one as an anchor and generate a scale from it rather than shipping six photograph colours as a palette.
Compression artefacts become swatches
A heavily compressed JPEG carries thousands of colours that were never in the scene, and a sampler will happily return one. If a swatch looks slightly off from anything visible in the image, that is usually what happened — work from the highest-quality source you have.
Extracted pairs rarely contrast
Photographs are full of mid-tones, so two swatches often sit at similar lightness and fail as a text-on-background pair. Check any combination you intend to use for type, and expect to darken or lighten one of them.
Coverage is the honest ranking
The percentage next to each swatch is what share of the sampled pixels it represents. That is the number that tells you whether a colour is the subject of the image or a highlight in one corner — and it is what makes frequency sorting meaningful.
The image never leaves your browser
Decoding and sampling both run on a canvas locally, which matters for unreleased artwork, client photography, and screenshots of internal tools. The share link carries the settings only.
The judgement call
The settings that produce a good answer depend entirely on what you plan to do with it.
A brand palette from a hero photograph
High separation
You want the picture's range, not six tints of its most common colour.
An anchor for a token scale
1–2 swatches
Take one colour and generate the ramp properly. A photograph cannot give you an even scale.
Matching a UI to a product shot
Sort by frequency
The dominant colours are the ones a viewer will perceive as the image's identity.
Reading the palette as a ramp
Sort by lightness
Orders the swatches light to dark, which shows immediately where the gaps are.
Colours for text and background
Check contrast
Extracted pairs are usually mid-tones with little separation. Verify before you commit either to type.
Working from a compressed screenshot
Find a better source
Artefact colours become swatches. Extract from the original asset if you can get it.
Reference
FAQ
Drop the file in. The dominant colours are sampled in your browser and shown as swatches with the share of the image each one covers. Adjust the count and the separation until the palette represents the picture rather than one region of it.
Because extraction ranks by coverage, and one colour family usually dominates a photograph. Raise the separation control: it sets the minimum perceptual distance between kept colours, which forces the palette to include the accents rather than six tints of the sky.
Not directly. They arrive at whatever lightness the scene happened to have, with no even spacing and no contrast guarantees. Take one as an anchor and generate a proper scale from it — that gives you tokens that behave consistently while still coming from the image.
The share of sampled pixels that colour represents. It is what distinguishes the subject of an image from a highlight in one corner, and it is the basis for frequency sorting.
Compression. A heavily compressed JPEG contains many colours the camera never recorded, especially around edges and in gradients, and a sampler will return one if it covers enough pixels. Extract from the highest-quality version of the file you have.
No. Decoding and sampling both run on a canvas in your browser, which matters for unreleased artwork, client photography, and screenshots of internal tools. The share link carries only the settings.
Decoding and sampling both run on a canvas in your browser. Nothing is uploaded, and share links carry only the settings.
Keep going
Palette Generator
Turn an extracted colour into a proper eleven-step scale.
Contrast Checker
Test whether two extracted colours work as text on background.
Color Converter
Inspect a swatch in OKLCH and adjust it before adopting it.
Image Compressor
Work from a cleaner source before sampling artefact colours.