How to Extract a Color Palette From an Image

Whether you are reverse-engineering a brand or building a palette from a mood board, the fastest reliable path is k-means clustering on a photo. Here is the four-step recipe ColorUI uses internally - it works on any image without sign-up.

Time

3 minutes

You need

Any source image (JPG, PNG, WebP, AVIF) · A modern browser

1. 1

   Open the Extract tool and drop your image

   Drag your image onto the upload zone or paste it from the clipboard. The image is processed entirely in your browser - it never leaves your device.

   Open /extract →
2. 2

   Pick a target palette size

   Choose 5 colors for a starter brand palette, 8 for richer UI work, or 12 if you want a near-complete tonal scale. Larger numbers reveal subtler hues but cost noise.

3. 3

   Apply a mood preset

   Raw extractions can look muddy. Pick a mood: Colorful (boost saturation), Bright (boost saturation + lightness), Muted (drop saturation), Deep (drop lightness, keep chroma), or Dark (drop lightness aggressively).

4. 4

   Audit contrast and export

   Before you ship, drop the palette into the Contrast Checker matrix. Every text-on-surface pair should hit 4.5:1 (body) or 3:1 (large). Then export to CSS, Tailwind, SCSS, or W3C DTCG.

   Open /contrast →