Color Palette Generator

Features

• Seven harmony schemes based on colour theory
• Lock individual swatches while regenerating the rest
• WCAG contrast checked against white and black
• Five export formats including Tailwind config
• Three to eight swatches

How to use it

1. Choose a base colour.
2. Pick a harmony scheme.
3. Lock any swatch you want to keep, then randomise.
4. Copy the export in your preferred format.

Colour harmony, and where the theory falls short

Harmony schemes come from positions on the colour wheel. Complementary colours sit opposite each other and produce maximum contrast, which is why they work for calls to action but clash in large areas. Analogous colours are neighbours and feel calm and cohesive, making them a safe choice for backgrounds. Triadic schemes take three evenly spaced hues for vibrancy without the tension of a direct complement.

The traditional wheel has a real flaw, though. It is based on HSL, where a fixed lightness value does not correspond to equal perceived brightness, yellow at 50% lightness looks far brighter than blue at 50% lightness. This is why a mathematically generated palette often contains one swatch that jumps out. Perceptual colour spaces like OKLCH fix this, and modern CSS supports them, though browser support is still uneven.

One practical rule beats most theory: the 60-30-10 split. Roughly 60% of a design should be a dominant neutral, 30% a secondary colour, and 10% an accent. Palettes fail more often from using every colour equally than from choosing the wrong hues. And whatever the wheel says, always verify contrast, a beautiful palette that fails WCAG AA is unusable for text, which is why the contrast table sits directly beneath the swatches here.