Tools / Palette Generator

Palette Generator

Pick a base color and instantly generate harmonious 5-color palettes using classic color theory. Export as CSS, JSON or Tailwind config.

#3CE0F6
#3CB2F6
#3B82F6
#3C55F6
#523CF6
✓

#3CE0F6

HSL 187° 91% 60%

✓

#3CB2F6

HSL 202° 91% 60%

✓

#3B82F6

HSL 217° 91% 60%

✓

#3C55F6

HSL 232° 91% 60%

✓

#523CF6

HSL 247° 91% 60%

Export palette

:root {
  --color-1: #3CE0F6;
  --color-2: #3CB2F6;
  --color-3: #3B82F6;
  --color-4: #3C55F6;
  --color-5: #523CF6;
}

Color harmony types

Complementary

Colors opposite each other on the wheel. High contrast, bold look. Best for call-to-action designs.

Analogous

Colors adjacent on the wheel. Harmonious and natural-feeling. Ideal for calm, cohesive designs.

Triadic

Three colors equally spaced (120° apart). Vibrant yet balanced. Good for playful interfaces.

Split-Complementary

A color plus the two adjacent to its complement. Softer contrast than complementary.

Tetradic

Four colors forming a rectangle on the wheel. Rich, complex. Works best with one dominant color.

Monochromatic

Variations of a single hue at different lightness values. Elegant, easy to use, always on-brand.

Copied!