---
title: "Palette From Image: Extract Dominant Colors | Click Petal"
description: "Extract 3 to 12 dominant colors from any image with k-means clustering, see each color's share, and export CSS variables, JSON or a PNG swatch strip."
url: https://clickpetal.click/palette-from-image/
---

Specimen no. 02 · the pressing

# Palette from image

Press a picture down to its dominant colors. Choose how many, see how much of the image each one covers, and export them for your stylesheet.

## How the palette is found

The picture is shrunk to about a quarter of a million pixels, and every pixel is dropped into one of 32,768 color bins. The bins are then grouped by k-means clustering in OKLab, a color space where equal distances look like roughly equal differences, so the groups follow what your eye sees rather than raw RGB numbers. Each group's average becomes a swatch, and its share is how much of the picture it covers. Transparent pixels are left out.

**Colors** sets how many groups to look for. Three or four give a broad summary of the mood; ten or twelve pick up small accents, like a poppy in a wheat field. The same image always gives the same palette. **Order** sorts by share, around the color wheel, or from light to dark for building a scale.

**CSS variables** exports a `:root` block of custom properties named with your prefix. **JSON** lists each color with its RGB, OKLCH and share. **PNG swatch strip** saves a 1200 × 400 picture of the swatches with their HEX codes, ready for a mood board.

Want the palette of a live website without signing in or leaving traces in your own browser? Open it in [WebTraceCheck's disposable browser (opens in a new tab)](https://webtracecheck.com/), take a screenshot, and drop the screenshot on this sheet.

## Questions

**Why is a small accent color missing?**

Clustering favors large areas, so a tiny spot of color can be folded into its neighbor. Raise the number of colors, or read that exact spot with the image color picker.

**Why do two swatches look almost the same?**

When a picture holds fewer distinct colors than you ask for, the biggest area gets split into shades of itself. Lower the number until every swatch is clearly different.

**Does the extraction happen on a server?**

No. The clustering runs in a background thread of your own browser, so the page stays responsive and the image never leaves your device.