🎨 Image Color Palette Extractor

Extract 5 / 10 / 16 dominant colors from an image. View as HEX, RGB, HSL, and export as CSS variables. Useful for design references and theme palettes.

100% Free No signup Browser-only 5 languages Dark mode

🔒 About Privacy

・All processing runs in your browser via Canvas API
・Image data is never sent to any server
・No storage logs, no history, no database

🎨

Drag & drop, click to select, or paste an image

📖 Where people get stuck

Extract the dominant 5, 10 or 16 colours from an image and show them as HEX, RGB and HSL. Everything runs in the browser and the image is never uploaded. What comes out is the colours covering the most area, not the colours that matter to the design: in a photograph the sky or a wall dominates, and even in a logo the background usually wins. Read the result with that in mind when you are after a brand colour.

Case	What happens	What to do
The palette is full of near-identical colours	JPEG compression noise, gradients in a photograph and antialiased edges mean that an area the eye reads as one colour is hundreds of slightly different colours in the data. Rank purely by frequency and the top of the list fills with one family. Wide gradients — sky, skin — make it worst.	Ask for fewer colours. Five gives a more coherent palette than sixteen. If the purpose is design, you will use two or three of them and the rest are nuance. On the image side, shrinking it first with the image resizer averages out the fine noise and makes the dominant colours easier to isolate.
Using an extracted colour directly makes text unreadable	Colours taken from a photograph do not share a lightness. A mid-lightness colour used as a background has too little contrast against both white and black text. WCAG asks for 4.5:1 for body text and 3:1 for large text, and a colour lifted straight from a photo rarely clears either.	Use an extracted colour as a hint about hue, and decide the lightness and saturation yourself. Convert it to HSL with the colour converter, keep the `H` and vary the `L`, and you get a coherent scale — 95 % for a background, 80 % for a border, 30 % for text. Always measure the contrast ratio of the pairs before adopting them.
The same image gives different results each time	Dominant-colour extraction usually uses an algorithm such as k-means, which seeds from random values. That makes the result shift slightly on each run. It is not a defect but a property of the algorithm, and the wobble grows with the number of colours requested and with how smoothly the colours are distributed.	When you get a result you like, note the HEX and freeze it. Written out as design tokens in CSS variables, you never need to re-extract. Conversely, if you are building something that must be reproducible — generating a thumbnail background colour, say — choose a method that divides the colour space into a grid and picks the fullest cells rather than k-means: it is deterministic, so the same input always yields the same colour.

A row of extracted colours is not yet a colour scheme. What you actually need is one primary, a scale of lightness variations from it, and a single accent for contrast. Adding more colours makes a screen less coherent, not more. Note too that a dark theme is not the light one inverted: the convention is to reduce saturation and raise lightness again, because a vivid colour that sings on a light background glares and becomes hard to read on a dark one. Use the extraction as the starting point for building that scale.

📖 How to Use

1

Load an image

Drag and drop, click to select, or paste with Ctrl+V.
2

Choose color count

Pick 5, 10, or 16 colors. Also choose HEX, RGB, or HSL display.
3

Extract and copy

Click any swatch to copy that color, or use the bulk CSS variable copy button.

❓ Frequently Asked Questions

What algorithm is used?

We use the Median Cut algorithm. It recursively splits the RGB space along the highest-variance axis to derive representative colors. Faster and more stable than k-means.

Is the image uploaded?

No. We use the Canvas API entirely in your browser. You can verify in the Network tab.

How are transparent PNGs handled?

Fully transparent pixels (alpha=0) are skipped. Semi-transparent pixels are used as-is.

🔗 Related Tools

🐛 Found a bug or issue with this tool?

Free to use, no signup. Even just the steps to reproduce are helpful. Reports go directly to the operator and help us fix issues.