Color Palette Extractor

About Color Palette Extractor

Drop in an image and get the colours it is actually made of — not the colours you think you remember from it. The extraction uses median cut, the same family of algorithm a GIF encoder uses to reduce millions of colours to a small table: every pixel starts in one box, the box with the widest colour spread is repeatedly split at its population median, and each final box collapses to the average of the pixels inside it. That averaging is the part that matters. Picking the most common single pixel value out of a photograph gives you a colour nobody would describe as being in the picture, because a gradient sky has no single dominant value; averaging a region gives you the colour a person would point at. Each swatch comes back with the share of the image it accounts for, and the whole palette exports as CSS custom properties, SCSS, a Tailwind theme block, JSON, or an SVG of the swatches themselves.

Key features

• Median-cut extraction of 4 to 16 dominant colours from any image
• Per-colour share of the image, so you can tell a background from an accent
• Proportional swatch bar — each colour occupies the width it occupies in the picture
• HEX, RGB, and HSL for every colour, with click-to-copy on each swatch
• Readable token names derived from the colours themselves (--color-teal, --color-dark-blue) rather than --color-1
• Export as CSS variables, SCSS with a map, a Tailwind config block, JSON, or an SVG swatch strip
• Sort by usage, by lightness, or around the hue wheel
• Ignore white and ignore black switches, for logos on a flat background or product shots on white
• Works with PNG, JPG, WebP, GIF, and SVG, up to 15 MB
• The image is decoded in your browser and never uploaded anywhere

How to use it

1. Drop an image onto the panel, or click to browse for one.
2. Choose how many colours you want — six is a good starting point for a brand palette, twelve if you are studying a photograph.
3. Turn on Ignore white or Ignore black if the image sits on a flat backdrop that you do not want in the palette.
4. Click any swatch to copy its hex code, or reorder the palette by lightness or hue.
5. Pick an export format and copy or download the result.

Tips & common mistakes

• Fewer colours give you a usable palette; more colours give you an analysis. Four to six is what a design system can actually absorb.
• The share percentage is the most useful number here — the colour covering 60% of the image is the background, and the one covering 3% is very often the accent you actually wanted.
• A photograph on a white studio backdrop will hand you several near-whites before anything interesting. Turn on Ignore white and the palette collapses to the subject.
• Extracted colours are descriptive, not prescriptive. A colour that reads well as a large area in a photo may be far too saturated as body text, so run any text colour through the Colour Contrast Checker before shipping it.
• Sort by hue to see whether the image has a coherent scheme at all — a set of swatches clustered in one arc is an analogous palette, two clusters opposite each other is complementary.
• Extraction runs on a downscaled copy of the image, so a single tiny bright pixel will not appear as a palette entry. That is deliberate: a palette should describe regions, not stray pixels.
• The same image at different colour counts gives different colours, not just more of them — each extra split moves the boundaries of every box it touches. If a palette looks wrong, try one step up or down before dismissing it.
• For a brand palette, extract from the logo rather than from a photo of the product. The logo has flat colour regions, which is exactly the case median cut reproduces exactly.

Related tools