Colour Palette Extractor

How the colours are chosen

Extracting a palette is not simply a matter of finding the most common pixel value. A photograph might contain fifty thousand distinct colours, most of them near-identical variations. Listing the literal top ten would give you ten shades of the same sky.

The approach used here groups similar colours together and then picks a representative from each group, weighted by how much of the image that group covers. Near-white and near-black pixels are down-weighted, because backgrounds and shadows dominate pixel counts while telling you little about the image's character.

The result is what a person would describe as the image's colours rather than what a naive histogram would report. It is a heuristic, and for an image with a genuinely unusual distribution you may want to pick colours manually instead — but for logos, photographs and illustrations it matches intuition closely.

Contrast is what makes a palette usable

A palette that looks good and fails accessibility is a palette you will have to rework later, so the contrast ratios are shown alongside each swatch.

WCAG 2.1 sets the thresholds. Normal body text needs a contrast ratio of at least 4.5:1 against its background for level AA, and 7:1 for AAA. Large text — 18pt, or 14pt bold — needs 3:1. Interface components and meaningful graphics need 3:1.

Mid-tone colours are where palettes fail. A pleasant medium blue often lands around 3:1 against white: fine for a large heading, insufficient for body text. The usual solution is to keep the extracted colour for accents, headings and backgrounds, and derive a darker variant for anything that has to be read at normal size.

Two practical notes. Contrast is measured against the actual background a colour sits on, so a swatch that passes against white may fail on your off-white page. And these ratios are a floor rather than a target — text at exactly 4.5:1 is legible, not comfortable.

Turning extracted colours into a usable system

An extracted palette is raw material. A few adjustments turn it into something you can build with.

Reduce the count. Ten colours from an image is interesting; a design system built on ten is chaos. Pick one primary, one accent, and a neutral, then derive everything else.

Build a scale. From each chosen colour, generate lighter and darker steps — typically five to nine — by adjusting lightness in HSL while keeping hue and saturation roughly constant. That gives you hover states, borders, backgrounds and disabled states that belong together.

Check the neutrals. Pure grey looks flat beside a saturated brand colour. Nudging your greys a few degrees toward the primary's hue makes a palette feel coherent, and is one of the cheapest improvements available.

Name by role, not by colour. --color-primary survives a rebrand; --color-blue becomes a lie the moment the brand turns green. The CSS export here uses role-based names for that reason.

How to use the Colour Palette Extractor

1. Drop in an image

   A photo, a logo, a screenshot, a piece of artwork. The file is processed locally and never uploaded.

2. Set how many colours you want

   Five to eight suits most purposes. More produces near-duplicates; fewer may miss an accent.

3. Check the contrast ratios

   Anything below 4.5:1 against your background is unusable for body text, whatever it looks like.

4. Export in the format you need

   CSS custom properties, JSON, or a Tailwind config fragment.

Frequently asked questions