Overview
What this tool does
A color palette is the set of colors that defines a brand, an app, or a single design. This generator builds palettes from any starting color using eight harmony modes (complementary, analogous, triadic, tetradic, monochromatic, split-complementary, square, shades), or extracts the dominant colors from an uploaded image. Every palette runs WCAG contrast checks so you know which combinations are safe for text-on-background. Export to CSS variables, Tailwind config, SCSS, or JSON. Useful for designers starting a new brand, developers picking accessible UI colors, marketers matching a campaign to a hero image, or anyone who needs a palette that actually works together.
How to
Use it in 3 steps
- Pick a starting color, or upload an image and let the tool extract the dominant colors.
- Pick a harmony mode. The palette regenerates with each change.
- Tune individual swatches by clicking them and adjusting hue, saturation, or lightness.
- Check WCAG contrast: hover any pair of swatches to see the contrast ratio and pass/fail badges.
- Export. Copy as CSS variables, paste into a Tailwind config, save as SCSS, or download as JSON.
FAQ
Frequently asked questions
▶What is a harmony mode?
A harmony mode is a rule from color theory that picks colors which look good together: complementary (opposite on the color wheel), analogous (neighbors), triadic (three colors evenly spaced), and so on. The mode you pick determines the relationship between the swatches the tool generates.
▶How does the WCAG check work?
The tool calculates the contrast ratio between every pair of swatches and shows whether the pair meets WCAG AA (4.5:1 for normal text) and AAA (7:1) standards. Hover any two swatches to see the result.
▶Can I extract a palette from an image?
Yes. Upload an image and the tool runs a clustering algorithm to pick the dominant colors. Useful for matching a brand to a logo or a campaign to a hero photo.
▶Are the exports tied to a specific framework?
No. CSS variables work anywhere. Tailwind config is JSON the Tailwind CLI accepts. SCSS variables work in any SCSS project. JSON is plain JSON, importable by any code.