Screenshot to palette, and a cover to match

How the sampling actually works

Your image is drawn into a 100×100 buffer, which throws away most of its pixels and keeps its colours. Each surviving pixel is rounded to the nearest 32 levels per channel and counted into buckets; the six fullest buckets become your palette. That is the entire method — no clustering, no machine learning, no round trip to anything.

Two consequences follow from it. Fine detail is averaged, so a busy photo returns muddy middles rather than the crisp accents you can see in it. And the rounding means a nearly-uniform image can return six nearly-identical values, which is honest reporting of what is there rather than a bug.

Why the dominant colour is rarely the prettiest

Dominance is area, not importance. In a portrait, the dominant colour is the wall. In a screenshot, it is the background. The colour that makes the picture interesting is usually the smallest bucket on the page — the logo, the lip colour, the neon sign.

So treat the six results as a starting field rather than an answer. The usual productive move is to discard the largest area colour and build from the third or fourth swatch, which is where the accent tends to live. Click through the field-colour dropdown and watch the cover change; the interesting one is rarely first.

The ink is arithmetic, not taste

Once a field colour is chosen, the text colour is decided by luminance: dark fields take white type, light fields take black, and the cut-off is computed rather than eyeballed. The status line tells you the resulting contrast ratio, so you can see whether the pairing is actually usable or merely conventional.

This is the step people skip and the reason most photo-derived palettes fail as designs. A colour lifted from a photograph is usually mid-luminance — because that is where photographs live — and mid-luminance fields defeat both white and black type. When the ratio comes back under 3:1, do not fight it: take the colour one step lighter or darker and try again.

Using the palette properly

• Assign jobs, not colours. Pick one field, one ink, one accent. The remaining three are supporting tones, and if all six are competing you have a swatch sheet rather than a design.
• Check the accent against the field, not against white. A colour that looks great beside the other five can be unreadable on the one that matters.
• Keep the hexes. Click each swatch to copy it, then paste the set into the palette tool or your CSS variables so the next thing you make matches this one.

Limits, honestly

Images from another origin cannot be read back — the browser blocks it, and that protection is not something a page can work around. Files you choose locally are fine. Transparent images sample against whatever the buffer composites onto, so alpha edges shift the results. And the six values are quantised, so they are approximations of the colours in your image rather than exact picks; for a precise single pixel value, use a colour picker.

FAQ

Why do I get six browns from a colourful photo?

Because brown is what happens when a mixed area is averaged. Reduce the busy-ness of your crop, or accept that the dominant colour is genuinely the mixture.

Can I get more than six?

Not from this page — six is the working size of a palette. More swatches is a colour picker, not a design decision.

Does the image get uploaded?

No. It is decoded and sampled inside your browser and discarded when the tab closes. Nothing is stored on our side.

Can I use the generated cover commercially?

The cover is yours. The image you sampled may not be — the palette is not derived from anything ownable, but the source photo might be, so the rights question is about the source, not this page.