Image Color Palette Extractor

Extract dominant colors from an image. Get hex codes, RGB values, HSL, and percentage of each color. Perfect for design, branding, and theme creation.

1.0.0
Version
Auth
Batch

About Image Color Palette Extractor

Pulling a colour palette out of an image is one of the more common design tasks — branding from a mood photo, theme-building from a product shot, accent-colour matching for a slide background. The desktop options (Photoshop's Image → Mode → Indexed Color, or the Adobe Color web tool) work but assume you have an Adobe account. Most online palette extractors return only a fixed 5 or 8 swatches in hex, with no control over the algorithm and no frequency information to show which colours actually dominate the image.

This image colour palette extractor gives you the controls that matter. Pick any number from 2 to 32 colours. Choose between three classic quantisation algorithms — median cut (the Pillow default, balances colour variance per cluster), octree (faster, tree-based for limited bit depth), and max coverage (favours the largest contiguous colour regions). Every colour is returned in three formats — Hex, RGB and HSL — with a frequency percentage showing how much of the image that colour accounts for, so you can tell at a glance whether a swatch is genuinely dominant or just one splash in a corner. A visual swatch image is generated alongside for download, ready to drop into a Figma file or design doc.

Use it to build a brand palette from a hero image, match accent colours for a slide theme, pull the dominant colours of a product shot for a marketplace listing, generate CSS variables matching a photographer's mood board, audit an existing site's colour use by feeding it a screenshot, or just learn what's actually in a sunset photo that caught your eye. Files up to 30 MB are processed in a stateless serverless function and discarded immediately.

Image Color Palette Extractor Use Cases

  • Designers extracting a brand palette from a hero or mood-board image
  • Slide-deck builders matching accent colours to a featured product photo
  • E-commerce sellers pulling the dominant colours of a listing for search-friendly tags
  • Front-end developers generating CSS variables from a designer's reference image
  • Auditing an existing site by feeding a screenshot and seeing what colours actually dominate
  • Hobby photographers learning the colour balance of a shot before editing
  • Print designers preparing a palette from artwork for spot-colour ordering

Image Color Palette Extractor Features

  • Configurable 2–32 dominant colours per extraction so brand audits and minimal palettes both fit
  • Three quantisation algorithms — median cut, octree and max coverage — with different bias for sharpness vs evenness
  • Each colour returned in Hex, RGB and HSL formats with a frequency percentage showing actual prevalence
  • Swatch image generated alongside the palette table — download as a PNG ready for Figma or a design doc
  • Frequency-sorted output so the dominant colour sits first and trailing minor colours don't fight for attention
  • Median-cut algorithm is the same one used by Pillow.quantize() — predictable, well-understood, reproducible
  • Files up to 30 MB processed in a stateless serverless function and discarded immediately after the response

How to Use Image Color Palette Extractor

Upload an image

Drag-and-drop a JPEG, PNG, WebP, BMP or TIFF (up to 30 MB) onto the upload zone. Photos, screenshots, rendered designs and product shots all work — the algorithm operates on pixels regardless of source.

Pick the number of colours

Set N to anywhere between 2 and 32. 5 to 8 is the typical brand-palette range. 12 to 16 captures more of a photo's nuance. 24+ is useful for image-to-CSS-theme extraction or for audit work.

Choose an algorithm

Median cut (default) balances colour variance per cluster and works well on most images. Octree is faster and favoured for low-bit-depth targets. Max coverage tends to surface the largest contiguous regions and is good for logos or flat illustrations.

Extract and read the palette

Click Extract. The result panel shows each colour as a swatch with its Hex, RGB and HSL codes plus frequency percentage. Click any cell to copy that format to your clipboard.

Download the swatch image

The generated swatch image lays out the palette as a single PNG strip — ready to drop into a Figma file, a design doc, or a Notion page. The order matches the table (dominant first).

Image Color Palette Extractor FAQ

No. The upload is processed in a stateless serverless function and discarded immediately after the response is sent. Nothing is logged to durable storage. For a fully in-browser alternative (no upload at all) Decoratly and similar tools run the algorithm locally — useful when you'd rather not transmit a confidential mock-up.

Median cut (the default) is the right choice for most photos and designs — it produces well-distributed palettes that match perceptual dominance. Octree is faster and useful when the target medium is low bit-depth (GIF, ICO). Max coverage favours the largest contiguous colour regions, which makes it good for logos, flat illustrations and screenshots where you want the brand colour to surface rather than the background gradient.

It's the proportion of the image's pixels that map to that palette colour after quantisation. A 35% swatch covers roughly a third of the image; a 2% swatch is a small accent. Useful for telling a genuinely dominant colour from an attention-grabbing but tiny detail — both look the same as a hex code, but only one of them should drive a theme.

The Hex and RGB are the literal centroid of the quantised cluster, expressed in standard sRGB. HSL is computed from RGB with the standard conversion. There's no perceptual colour-space transformation (LAB, OKLCH) — for brand-matching work where perceptual distance matters, run a follow-up pass through a LAB-aware tool like Coolors or Huemint.

30 MB per upload. The algorithm downsamples the image before quantisation, so even a 50 MP source produces a result in a few seconds. For multi-hundred-MB raw or medium-format files, flatten to JPEG or PNG first or run Pillow.quantize() locally.

Yes. Each table row has click-to-copy for Hex, RGB and HSL. The whole palette can also be exported as a strip PNG (swatch download) for design tools that accept image drops, or you can read it out of the JSON returned by the underlying API for scripted use.

Adobe Color and Coolors are full palette-design platforms — generation, refinement, saving, sharing. This tool is the narrowest version: pixels in, dominant colours with frequency out. Useful when the job is specifically extraction (auditing an image, matching a single hero) rather than open-ended palette design. The controls (N from 2 to 32, three algorithms) are also more explicit than the typical web extractor's fixed 5–8 swatch output.

Upload image or drag here

PNG, JPG, WebP, BMP — max 30MB

Image Color Palette Extractor Tutorial

What This Does

Reduces your image to its N most dominant colors using color quantization. For each color, you get the hex code, RGB, HSL, and the percentage of the image it covers.

Use Cases

  • Build a brand palette from a logo or product photo
  • Generate website theme colors from a hero image
  • Analyze the color profile of a painting or photograph
  • Match accent colors to a wallpaper or product shot

Algorithms

  • Median Cut (default) — recursively splits the color space along the longest axis. Best general-purpose results.
  • Fast Octree — tree-based; very fast on large images, sometimes less accurate on smooth gradients.
  • Max Coverage — picks colors that cover the most pixels. Good for highly varied images.

Tips

For logo work, use 4-6 colors. For complex photos, 8-12. Going above 16 usually picks up noise.