Color Tool

Color Palette Generator

Generate beautiful color palettes using color theory harmonies. Lock colors, customize, and export as CSS variables or arrays.

Back to All Tools

Color Harmony Rule

Complementary

Opposite colors

Triadic

3 evenly spaced

Tetradic

4 colors, 2 pairs

Analogous

Adjacent colors

Split-Complementary

Base + 2 adjacent

Base Color

Export Palette

Related Tools

Color Picker

Pick and convert colors

Gradient Generator

Create CSS gradients

QR Generator

Create QR codes

Understanding Color Harmony

Color harmony refers to the arrangement of colors in a way that is pleasing to the eye. These harmonies are based on color theory and the relationships between colors on the color wheel. Using harmonious color combinations creates visual balance and can evoke specific emotions or moods.

Color Harmony Rules Explained

  • Complementary: Two colors directly opposite each other on the color wheel. Creates high contrast and vibrant looks. Great for making elements stand out.
  • Triadic: Three colors evenly spaced around the color wheel (120° apart). Offers strong visual contrast while maintaining balance. Popular in bold, dynamic designs.
  • Tetradic (Double Complementary): Four colors arranged in two complementary pairs. Offers the most variety but requires careful balance. Best for experienced designers.
  • Analogous: Three to five colors adjacent on the color wheel. Creates serene and comfortable designs. Common in nature and often harmonious.
  • Split-Complementary: Base color plus two colors adjacent to its complement. Offers high contrast without the tension of complementary. Great for beginners.

Using the Palette Generator

  • Click any color swatch to copy its HEX code to clipboard
  • Lock colors you like using the lock icon - they won't change when regenerating
  • Use the base color picker to start from a specific brand color
  • Try different harmony rules to see various color combinations
  • Export palettes as CSS variables for easy integration in projects
  • Click "Random" for instant inspiration when you're stuck

Best Practices for Color Palettes

  • Limit your palette to 5-7 colors for consistency
  • Include neutral colors (grays, whites, blacks) for balance
  • Consider color psychology and your brand's message
  • Test palette accessibility with contrast checking tools
  • Use 60-30-10 rule: 60% dominant, 30% secondary, 10% accent
  • Save successful palettes for future projects

When to Use Each Harmony

  • Complementary: Logos, call-to-action buttons, sports teams
  • Triadic: Children's products, playful brands, entertainment
  • Tetradic: Rich, complex designs like illustrations or art
  • Analogous: Natural/organic brands, calming interfaces, photography
  • Split-Complementary: Versatile choice for web design and branding