Color palette generator
Extract colors from an image or build harmonies.
- Instant
- Free
- Private (processed locally)
- No sign-up
Click a color to copy its code
A professional palette in seconds
Every visual identity starts with a palette. Two paths lead there: start from an image that already carries the mood you want (photo, moodboard, screenshot) and extract its dominant colors, or start from a brand color and build its harmonies using color theory.
-
Image → palette
Drop the image: the k-means algorithm clusters the pixels and reveals the 6 dominant colors with their weight.
-
Color → harmonies
Pick your base color: complementary, analogous, triadic and shades generate instantly.
-
Export
Click a color to copy its code, or copy the whole CSS variables / Tailwind block.
Harmonies in a nutshell
| Harmony | Construction | Effect |
|---|---|---|
| Complementary | 2 colors 180° apart | Maximum contrast, energy |
| Analogous | 3 colors at ±30° | Softness, natural cohesion |
| Triadic | 3 colors 120° apart | Lively, colorful balance |
| Shades | Same hue, 5 lightness levels | Monochrome depth, hierarchy |
The 60-30-10 rule: roughly 60% dominant color, 30% secondary, 10% accent. Also check text/background contrast with our WCAG checker.
Frequently asked questions
How are colors extracted from the image?
With a k-means clustering algorithm running in your browser: pixels are grouped into 6 families of similar colors, and each family’s center becomes a palette color, sorted by importance (share of the image).
What is a complementary color?
The color diametrically opposite on the color wheel (180° away). The pair creates the strongest contrast: ideal to make a call-to-action button pop against a background.
Analogous, triadic: when to use them?
Analogous colors (±30°) give soft, cohesive moods — perfect for backgrounds. The triad (3 colors 120° apart) offers a lively balance: one dominant, two accents.
How do I use the CSS export?
The generated block contains CSS variables (--color-1, --color-2…) to paste into your :root, plus the Tailwind config equivalent. Rename the variables by role (--primary, --accent…) for more readable code.
Is my image sent anywhere?
No: the k-means analysis runs entirely in your browser on a thumbnail of the image. Nothing is transmitted, even for large photos.