About the Color Palette Generator
Choosing colors that work well together is one of the hardest parts of design. The Color Palette Generator uses proven color theory rules based on positions on the color wheel to build harmonious five-color palettes from any starting color.
- Analogous: neighboring hues for calm, cohesive designs.
- Complementary: opposite hues for strong contrast and emphasis.
- Split complementary: contrast that is easier to balance.
- Triadic and Tetradic: vibrant, colorful schemes.
- Monochromatic: one hue in several lightness levels.
Press the space bar or the Random button to explore endless ideas, click any color to copy it, and export the palette as CSS variables or a JSON array.
How to use the Color Palette Generator
- Pick a base color.
- Choose a harmony rule such as analogous or triadic.
- Press Space or Random for new ideas.
- Click a color to copy it or copy the export code.
Frequently asked questions
What is the 60-30-10 rule?
A classic design guideline: use a dominant color for about 60% of the design, a secondary color for 30% and an accent color for 10%.
Which harmony works best for websites?
Analogous and monochromatic palettes feel clean and professional, while complementary schemes are great for making call-to-action buttons stand out.
Can I use these palettes commercially?
Yes. Colors cannot be owned, so you are free to use any palette you generate.