Kostenloser Farbpaletten-Extraktor

How Colour Extraction Actually Works

Computer-extracted palettes from images come from one of two classic algorithms:

• K-means clustering (Lloyd 1982; the underlying idea goes back to MacQueen 1967 and Forgy 1965). Pick K random colour centroids in the colour cube, assign each pixel to its nearest centroid, recompute the centroids as the mean of their assigned pixels, and repeat until the centroids stop moving. The K final centroids are your dominant colours.
• Median-cut quantisation (Heckbert, SIGGRAPH 1982). Recursively split the colour cube along its widest dimension, dividing the pixel population into two equal halves each time. After K splits you have K boxes, and the average colour of each box is one palette entry. This is the algorithm used by the popular Color Thief JavaScript library, and historically how indexed-colour images (GIF, PNG palettes) get reduced from millions of colours to 256.

Both methods produce a small set of representative colours from a much larger pixel population, but they make different trade-offs. K-means is more flexible but sensitive to the random seed and to outliers. Median-cut is deterministic and balances colour space coverage but can over-represent narrow regions where the image happens to spend a lot of pixels.

Why RGB Distance Lies

A subtle but important caveat: clustering in plain RGB space gives results that don't always match human perception. RGB is a hardware-driven coordinate system, distances in it correspond to electronic differences between primaries, not to perceived differences between colours. Two greens that look identical to you can have a much larger RGB distance than a green and a red that look obviously different.

More accurate clustering happens in CIELAB (CIE 1976 L*a*b*), a colour space designed specifically so that Euclidean distance in the space approximates the human-perceived difference between two colours. Modern palette tools like Adobe Color and many design-system swatch generators cluster in CIELAB or CIELCH. CSS Color Module Level 4 (W3C, 2022) added lab(), lch(), oklab(), and oklch() functions to expose these spaces directly to web designers, useful when you want a perceptually uniform palette interpolation. The CSS spec lives at w3.org/TR/css-color-4.

HEX, RGB, HSL, Picking the Right Format

All three notations describe the same colour; they're different ways of writing it down.

• HEX: #RRGGBB. Six hex digits, two per channel, range 00–FF (0–255). The web's most common format. Compact, copy-pasteable, supported everywhere.
• RGB: rgb(255, 128, 0). Same numbers, different notation. CSS adds rgba(255, 128, 0, 0.5) for alpha.
• HSL: hsl(30, 100%, 50%). Hue (0–360°), saturation (0–100%), lightness (0–100%). Easier to reason about for designers, "same hue, more saturation" is a single number tweak in HSL but a multi-channel adjustment in RGB.
• OKLCH: oklch(70% 0.15 30). Modern, perceptually uniform alternative to HSL. The same lightness number means the same perceived brightness across hues, which HSL famously gets wrong (yellow at 50% lightness looks much brighter than blue at 50% lightness).

For most web work, copy the HEX. For programmatic palette manipulation (lighten by 10%, shift hue by 30°), reach for HSL or OKLCH where the operation is cleaner.

Why Dominant ≠ Useful

A naive "most-frequent colours" extraction often disappoints. A portrait of a person against a blue sky is statistically dominated by sky pixels and skin tones, even though the visually interesting colour story might be in the subject's clothing. Photos with large neutral backgrounds get the neutral as the "dominant" colour. Heavy JPEG compression introduces artefact colours that cluster as if they were real.

Sophisticated palette tools weight by saturation, contrast against the dominant background, perceived "interestingness," or by whether a colour appears in salient regions detected by the human-vision-inspired Itti–Koch saliency models. Most online tools, including this one, use simple frequency-based clustering, fast, predictable, and good enough for the common case of pulling a palette from a photo, illustration, or piece of artwork.

Common Use Cases

• Brand-matching: a designer pulls a palette from a client's logo or hero photograph to keep the rest of the site visually coherent.
• Mood boards: extracting palettes from inspiration images (movie stills, photographs, paintings) is the fastest way to start a colour exploration.
• Tailwind / design-token configs: turning an extracted palette into CSS custom properties or a Tailwind colors map.
• Slide-deck colour matching: picking accent colours from the corporate logo so the deck doesn't clash.
• E-commerce product photography: using each product's dominant colour as the swatch in a product card.
• Generative art & data viz: feeding extracted palettes into shader code, D3 charts, or Processing sketches.
• Print design: getting a starting set of colours from inspiration imagery, then matching them to Pantone or CMYK in print-design software.

Why Browser-Only Matters Here

Photos often carry more than just the picture. EXIF metadata can include the GPS coordinates where the photo was taken, the camera serial number, the shooter's name, and software fingerprints. Screenshots can contain confidential UI, draft text, or pre-release branding. Personal photos can contain faces of people who haven't consented to being uploaded somewhere. Extracting a palette doesn't actually need any of that (it just needs the pixel data) and there's no good reason to send the whole image to a server when the browser can analyse it locally.

This tool draws the image to an off-screen Canvas, samples pixel data via getImageData(), runs the clustering, and shows the result. Nothing leaves the page; the image isn't kept after the tab closes. Server-side palette tools (Adobe Color, Coolors' image picker, and many others) upload the entire file. Privacy is the trade-off you're making with each.

Working With the Output

Once you have an extracted palette, you typically:

1. Curate. A 5-colour automatic extraction usually has 3 useful colours, 1 redundant near-duplicate, and 1 muddy mid-tone. Drop the muddy one and de-duplicate.
2. Assign roles. Designate one colour as the primary brand colour, one as the secondary, one or two as accents, and one as a neutral. Modern brand systems often want a neutral background, two anchors, and an accent, five tops.
3. Generate light/dark scales. From each anchor colour, derive 9–11 shades for hover states, backgrounds, and tinted variants. Tools like Tailwind's colour scale generator or Refactoring UI's palette section have well-known recipes.
4. Test contrast. Run text-and-background pairs through a WCAG contrast checker, Level AA requires 4.5:1 for normal body text, 3:1 for large or bold UI components.
5. Test for colour vision deficiency. Roughly 1 in 12 men have some form of colour blindness. Run the palette through a CVD simulator before locking it in.

Common Mistakes

1. Using all five extracted colours unedited as your brand palette. Auto-extraction is a starting point, not a finished palette. Curate.
2. Picking colours from a heavily compressed JPEG. Compression artefacts produce false palette entries. Start from a high-quality source if you can.
3. Trusting the first run on a complex photo. Different K values (number of colours) produce dramatically different results, try 5, 8, and 12 to see which size feels right for your image.
4. Building a palette from a photo without considering the page it'll live on. A muted, photo-derived palette can look great in isolation but disappear against a white site background. Test in-context.
5. Ignoring contrast. Beautiful palettes sometimes pair text with a background at 2:1 contrast and fail WCAG. Always check.
6. Forgetting that "dominant" can mean "background." The most-frequent colour in a portrait is often the wall behind the subject, not the subject's clothing.

More Frequently Asked Questions

Will it work on transparent PNGs?

Yes. Transparent pixels are typically skipped during sampling so the palette reflects only the visible content. If you upload a PNG with a transparent background and a coloured logo, the extracted palette will be the logo's colours, not a polluted neutral.

What about animated GIFs?

The browser's image decoder typically gives the first frame to the Canvas API, so the palette is extracted from frame zero. For a palette spanning all frames, you'd need to extract each frame separately and combine the results, that's beyond what a static-image tool does.

Is the original image uploaded anywhere?

No. The image is loaded into a Canvas element in your browser, the pixel data is read via getImageData(), and the clustering runs in JavaScript on your device. The image bytes are never transmitted to any server. This matters when the source contains EXIF GPS, faces, screenshots of confidential UIs, or unreleased product imagery.

Why does my palette change between runs?

K-means depends on its initial random centroid placement, so two runs on the same image can land on slightly different local minima. The differences are usually subtle (one near-duplicate replaced with a similar shade) but visible. Median-cut is deterministic, same input, same output every time. If the tool ever gives noticeably different palettes for the same image, it's using a randomised algorithm and that's expected behaviour.

Can I use the extracted colours commercially?

Colours themselves aren't copyrightable; HEX values are facts about pixels. But the image you extracted from might be, pulling a palette from someone else's photograph is fine for inspiration, but reproducing the photo or its trademarked elements is a separate question. Match the colours, not the imagery.

How does this differ from a colour picker tool?

A colour picker reads the colour at a specific pixel location you point to. This tool analyses the entire image and returns the most representative palette. Different jobs: pickers are for "what is this exact colour?", palette extractors are for "what are the dominant colours overall?". Both have their place in a designer's workflow.