Color Harmony Generator

Generate colour palettes from a single base colour

Harmony Genny takes one base colour and rotates it around the OKLCH hue circle to produce twelve classical colour-theory harmonies, including complementary, analogous, triadic, tetradic, and monochromatic. Every colour preserves the base lightness so the resulting palette stays balanced.

1. Choose a base colour and harmony

• Base Colour. Native colour picker with a HEX text field. Both update each other live.
• Harmony Type. Twelve relationships, including pentadic and golden-ratio spacing. The selected harmony is highlighted both in the dropdown and in the wall of swatches lower down.
• Description card. A short note explaining the geometry of the chosen harmony.

2. Inspect the result

• Colour wheel. Plots each harmony colour as a marker around the wheel; the centre dot is the base. Quickly shows whether the colours are evenly distributed or clustered.
• Swatch grid. Click any swatch to copy its value in the active notation (HEX, RGB, OKLCH, etc.). Non-monochromatic harmonies also show the relative angle to the base.
• Copy All. Copies a comma-separated list of all harmony colours.
• CSS Variables. Copies a :root block of --harmony-N variables ready to drop into a stylesheet.

3. Compare other harmonies

The bottom grid shows every supported harmony rendered against the same base. Tap any card to switch the main view to that harmony.