Generate beautiful color harmonies — press Space to generate, click a color to copy
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.
Colors that sit next to each other on the color wheel. Creates a calm, cohesive look. Great for backgrounds and UI.
Two colors directly opposite on the color wheel. High contrast, vibrant — perfect for call-to-action designs.
Three colors evenly spaced at 120° apart. Balanced yet colorful — popular in illustration and branding.
One base color plus two colors adjacent to its complement. High contrast with more variety than complementary.
Four colors in two complementary pairs. Rich and complex — works best when one color dominates.
Different shades of the same hue. Elegant and professional — easy to build cohesive designs with.
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.