Guide · 1 min read
How to Extract a Color Palette From an Image
Hero photo to brand palette in 30 seconds. Hex codes ready to paste.
Published March 15, 2026 · Updated June 5, 2026
The technique
K-means clustering finds the most common color groups in a photo and returns each group's centroid color plus the percentage of pixels it covers.
Step-by-step
Using our free palette extractor:
- Open the Color Palette tool.
- Drop a photo.
- Pick 5 (a useful default; raise to 8-10 for richer palettes).
- Click Extract palette.
- Copy each hex code into Figma or CSS.
Designing from extracted palettes
Hero photo for a landing page → palette → use the dominant color for backgrounds and a contrasting secondary for CTAs. Album art → palette → music player skin. Product photo → palette → consistent shop feed.
Frequently asked questions
How many colors should I extract?
5 is the universal default. Drop to 2-3 for a single accent. Raise to 8-10 if you want a rich brand system.
RGB or HSL output?
Hex by default. Every design tool converts hex to RGB and HSL in one click.
Try it now: Color Palette
Extract dominant colors with hex codes & percentages.