Pick a base color, choose a harmony mode, and watch your palette come to life.
Color Input
Color Theory Tip
Complementary Colors
Colors directly opposite on the color wheel create maximum contrast and visual impact. This pairing naturally draws attention.
Usage tip: Use the complement sparingly as a CTA or accent color. Too much of both can create visual tension — let one dominate.
Export Palette
:root {
--color-primary: #00BCD4;
--color-secondary: #D61900;
}Generated Palette
Color Roles
Assign each color a job, then pick a neutral base for the preview.
Backgrounds & whitespace — gives the eye room to rest
Structure, cards, nav headers & body sections
Optional second brand tone — bands, chips & icons
CTAs, primary buttons, alerts & key focal points
The 60-30-10 rule: 60% neutral backgrounds give the eye rest, 30% brand color provides structure and identity, and 10% accent draws attention to your most important actions.