What this tool does
This generator builds a coordinated set of colors from a single base color using classic color-theory relationships, so your designs look harmonious. Click any swatch to copy its HEX code for use in CSS or a design tool.
Harmony types
- Complementary — the base color and its opposite on the color wheel; high contrast.
- Analogous — colors next to the base; calm and cohesive.
- Triadic — three evenly spaced colors; balanced and vibrant.
- Tetradic — four colors in two complementary pairs.
- Monochrome — lighter and darker shades of one hue.
Tips
- Use one dominant color and the others as accents.
- Check text/background pairs for contrast with our contrast checker.