Color harmony generator
Choose a base colour and a harmony rule. The wheel keeps lightness steady as it rotates, so every scheme looks balanced — and each one is a gradient you can open and export.
Drag around the wheel or use arrow keys to rotate the base hue.
Opposites: maximum hue contrast.
How the harmony rules work
| Rule | Hue offsets | Good for |
|---|---|---|
| Complementary | 0°, 180° | Call-to-action buttons against a dominant brand colour |
| Analogous | −30°, 0°, +30° | Backgrounds and smooth hero gradients |
| Triadic | 0°, 120°, 240° | Playful brands, illustrations, data categories |
| Split-complementary | 0°, 150°, 210° | Contrast that’s easier to balance than a pure complement |
| Tetradic | 0°, 90°, 180°, 270° | Rich palettes where one colour leads and three support |
| Monochromatic | one hue, varied lightness | Calm UI, tints and shades of a brand colour |
The classic painter’s wheel (red–yellow–blue) and the screen wheel differ: on screens the complement of blue is yellow, not orange. This tool uses the OKLCH hue circle, where equal angles look like equal steps. Harmony rules are a starting point; always check that text and background pairs pass the contrast checker.
Questions
What is colour harmony?
Colour harmony is a set of rules for choosing colours that look balanced together, based on their positions on a colour wheel: opposite (complementary), neighbouring (analogous), evenly spaced (triadic, tetradic) and variations of these.
What are complementary colours?
Colours directly opposite each other on the wheel, 180° apart — blue and orange, or magenta and green. They create the strongest contrast of hue and make each other look more vivid. Use one as the main colour and the other sparingly as an accent.
Why does this wheel use OKLCH instead of HSL?
HSL hues are not evenly spaced for the eye: yellow at 60° looks far brighter than blue at 240°, so HSL “harmonies” have unbalanced lightness. OKLCH keeps lightness and chroma fixed as the hue rotates, so the set looks balanced. You can switch to the traditional RYB-style painter’s wheel mapping if you prefer the classic pairs.
Which harmony works best for a gradient?
Analogous colours (within about 60°) give the smoothest gradients. Complementary gradients pass through the middle of the wheel; blending them in OKLCH keeps the midpoint vivid instead of grey.