How to use the Color Palette Generator
- Choose a base color.
- Pick a harmony type.
- Copy individual colors or the whole palette as CSS variables.
What does this tool do?
Harmonies are based on positions on the color wheel. Complementary colors sit opposite each other for strong contrast; analogous colors sit side by side for a calm feel; triadic colors are spaced evenly for a vibrant but balanced look.
Why use it?
- Start a brand or website palette.
- Find accent colors that go with your main color.
- Export as CSS variables.
Using a palette
A common recipe is the 60-30-10 rule: 60% neutral or main color, 30% secondary color, 10% accent for buttons and highlights.
Privacy
Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.
Frequently asked questions
How many colors should a palette have?
Three to five is plenty for most brands and websites. A common approach is the 60-30-10 rule: a dominant neutral, a secondary color, and an accent used sparingly for buttons and highlights.
How do I make sure my palette is accessible?
Check every text and background pair with a contrast checker. Bright accent colors often fail as text on white, so you may need a darker shade of the same hue for text.
Last reviewed by the M2Toolkit team.