Extract a colour palette from any image
The Color Palette Extractor turns a photo, painting, logo or screenshot into a palette of 3 to 16 colours, each with its HEX code, its share of the picture and its nearest colour name. Choose between two classic algorithms — k-means clustering in the perceptual OKLab colour space, or median cut — and sort the result by how much of the image each colour covers, by hue or by lightness.
Found a colour you love? Lock it and re-run: the locked colours stay put while the others are recalculated. When the palette is right, export it as CSS custom properties, SCSS variables, a Tailwind CSS v3 config or v4 @theme block, JSON, a GIMP-format .gpl palette (also read by Inkscape and Krita), or a PNG swatch card. The image is processed in your browser and never uploaded.
How to use the Color Palette Extractor
- Drop an image onto the upload area, click to choose one, or paste a screenshot with Ctrl+V.
- Set the number of colours with the slider and pick k-means or median cut. Tick “Ignore white/black background” for product shots on a plain backdrop.
- Choose how to sort: by share of the image, by hue around the colour wheel, or by lightness.
- Tap the lock on any colour you want to keep, then press “Re-run unlocked colours” to find alternatives for the rest.
- Pick an export format, give the palette a name, and copy the code or download the file — or download a PNG card of the swatches.
Color Palette Extractor features
Two algorithms
K-means groups pixels by perceptual similarity; median cut splits the colour cube into boxes of equal population. Both are deterministic, so the same image gives the same palette.
Lock and re-run
Locked colours are kept as fixed cluster centres while the remaining colours are re-seeded with a new random seed.
True shares
Every swatch shows the percentage of non-transparent pixels nearest to it, so you can see which colours really dominate.
Developer-ready exports
CSS variables, SCSS map, Tailwind v3 theme.extend.colors, Tailwind v4 @theme variables and JSON with HEX, RGB, HSL and OKLCH.
Design-app palettes
The .gpl file loads in GIMP, Inkscape and Krita; the PNG swatch card drops into Figma, Canva or a mood board.
Private by design
Pixels are read from a canvas in your browser. Nothing is sent to a server.
K-means or median cut: which should you use?
Both algorithms work on a 200-pixel copy of the image (transparent pixels skipped), grouping colours into 32 levels per channel with the exact average kept for each group. They differ in how they divide the colours.
| K-means (OKLab) | Median cut (RGB) | |
|---|---|---|
| How it works | Places k centres with k-means++ seeding, then moves each to the average of its nearest pixels until stable | Repeatedly splits the box with the most pixels × widest range at its median, along its longest RGB axis |
| Strength | Colours that look distinct to people; accents survive if they are perceptually different | Predictable, evenly populated boxes; the method behind many GIF and early palette tools |
| Weakness | Small accents can merge into large neighbours | Can spend several colours on one big gradient, such as a sky |
| Re-run | New seed gives an alternative palette | Always the same result |
Using the exported palette
- CSS: paste the
:rootblock into your stylesheet and usevar(--palette-1). Rename the palette first so the variables read--brand-1,--brand-2and so on. - Tailwind CSS v3: merge the
colorsobject intotheme.extendintailwind.config.js; classes becomebg-palette-1,text-palette-2. - Tailwind CSS v4: add the
@themeblock to your main CSS file — every--color-*variable becomes a utility class. - GIMP, Inkscape, Krita: import the
.gplfile from the Palettes dialog (GIMP and Krita) or copy it into Inkscape’spalettesfolder. - JSON: each colour carries HEX, RGB, HSL, OKLCH, share and name for scripts and design-token pipelines.
Getting a better palette
Use 5–8 colours for a website or brand scheme and 10–16 when you want every shade of a painting. If one colour hogs the palette, crop to the area you care about with Crop Image, or tick the background option. To see only the single main colour with its codes, use the Dominant Color Extractor; to grow one extracted colour into tints and shades, open the Color Shades Generator, and check text-on-colour pairs in the contrast checker before you ship.
Color Palette Extractor FAQ
How do I extract colours from an image?
Upload the image to the color palette extractor, choose how many colours you want (3–16) and an algorithm. The palette appears instantly with HEX codes and shares; copy any colour or export the whole palette.
What is the difference between locking and re-running?
Locking keeps a colour fixed. Re-running restarts k-means with a new seed for the unlocked colours only, so you can explore alternatives without losing the colours you already like.
Why does the palette have fewer colours than I asked for?
Flat graphics such as logos may contain only a few distinct colours. The tool never invents colours that are not in the image, so it shows only the ones that exist and says so.
Can I use the palette in Tailwind CSS?
Yes. Choose “Tailwind CSS v3 config” for a tailwind.config.js snippet or “Tailwind CSS v4 @theme” for the CSS-first configuration. Both create classes such as bg-palette-1.
Does it support Adobe ASE swatches?
Not currently. Export a GIMP .gpl palette, JSON or the PNG swatch card instead; most design apps can import one of these or pick colours from the PNG.
Is my image uploaded?
No. The image is decoded and analysed entirely in your browser, and nothing leaves your device.