How to use this color palette generator
Select a harmony mode and number of colors, then hit Generate (or press Space). Click any color swatch to copy its hex code. Lock colors you want to keep with the 🔓 button, then generate again — only the unlocked colors will change.
Color harmony modes explained
Analogous
Colors that sit next to each other on the color wheel. Creates a calm, cohesive look. Great for backgrounds and UI.
Complementary
Two colors directly opposite on the color wheel. High contrast, vibrant — perfect for call-to-action designs.
Triadic
Three colors evenly spaced at 120° apart. Balanced yet colorful — popular in illustration and branding.
Split complementary
One base color plus two colors adjacent to its complement. High contrast with more variety than complementary.
Tetradic
Four colors in two complementary pairs. Rich and complex — works best when one color dominates.
Monochromatic
Different shades of the same hue. Elegant and professional — easy to build cohesive designs with.
Tips for choosing a color palette
Start with your brand's primary color, lock it, then generate complementary colors around it. For web design, aim for one dominant color, one secondary, and one or two accent colors. Monochromatic schemes are safest for first-time designers — they're almost impossible to get wrong.
Use the Copy CSS variables button to paste palette colors directly into your stylesheet.
The exported format (--color-1, --color-2…) is ready to use with any modern CSS framework.