This tool takes any colour and finds its classic colour-wheel harmonies: the complementary, analogous, triadic, split-complementary and tetradic schemes. These are the relationships designers use to build palettes that look intentional — a bold accent, a balanced trio, or a soft set of neighbours. Enter a colour and copy any swatch’s hex.
How it works
The base colour is converted to HSL, and each harmony is generated by rotating the hue around the 360° colour wheel while keeping saturation and lightness fixed. The result is converted back to hex. The rotations are:
| Scheme | Hue rotations from base |
|---|---|
| Complementary | +180° |
| Analogous | ±30° |
| Triadic | +120°, +240° |
| Split-complementary | +150°, +210° |
| Tetradic | +90°, +180°, +270° |
Example
Starting from a blue at hue 240°:
- Complementary → 240 + 180 = hue 60° (yellow-orange)
- Triadic → hue 0° (red) and hue 120° (green)
- Analogous → hue 210° and 270° (neighbouring blues/violets)
So blue’s bold accent partner is orange, while its triadic partners are red and green. Click any swatch to copy its hex. Everything runs locally in your browser — nothing is uploaded.
When to use each harmony
Picking the right harmony depends on the feeling and function of the design:
Complementary pairs are the highest-contrast option — two colours that sit opposite each other create energy and draw the eye. They work well for call-to-action buttons, sports branding, or anywhere you want a bold pop. The risk is that equally saturated complements can vibrate unpleasantly at full intensity; tone one down (use a shade or tint) to balance them.
Analogous schemes use colours that live close together on the wheel — think blues and blue-greens, or reds and oranges. They read as calm, cohesive, and natural. Interior design, nature photography, and wellness brands gravitate toward analogous palettes because they feel harmonious without tension.
Triadic schemes spread three colours evenly around the wheel, giving you vibrancy with more balance than a complementary pair. They are popular in children’s media, playful brand identities, and creative portfolios where energy matters but a single accent colour is not enough.
Split-complementary is a gentler alternative to full complementary. Instead of using the exact opposite hue, you use the two neighbours of the opposite — narrowing the contrast slightly and giving you a three-colour palette that is easier to work with than pure complementary pairs.
Tetradic (or rectangular) schemes use four colours at 90° intervals. They offer the most variety but are the hardest to balance; professional designers often mute or desaturate three of the four and let one be the dominant hue.
Practical tips
- Hue rotation in HSL keeps saturation and lightness fixed, so the harmony colours will match the vividness of your starting colour. If your base is muted, the harmonies will be too.
- Use the hex codes directly in CSS, Figma, or any design tool. They can also be pasted into an image editor’s colour picker.
- For branding work, pick a harmony, then adjust lightness to create a range: a dark shade for text, a mid tone for backgrounds, and a light tint for UI accents.