Color Harmony Generator
Pick one base colour and instantly get six matching palettes — complementary, analogous, triadic, split-complementary, tetradic and monochromatic — each with copy-ready HEX, RGB and HSL codes.
The quickest way to choose colours that work together is to start from a single colour you like and let colour-theory rules do the rest. This generator converts your base colour to its hue, saturation and lightness, rotates the hue by the classic harmony angles, and hands you ready-to-use codes. Everything runs in your browser — nothing is uploaded.
Choose your base colour
Pick a colour to generate palettes.
How it works
Colour relationships are easiest to reason about on the colour wheel, where hue is measured in degrees from 0° to 360°. Two colours look harmonious when the angle between their hues matches a known pattern. The tool above does the maths for you, but the underlying recipe is simple:
- Your hex colour is converted to HSL — hue, saturation and lightness.
- Each scheme keeps your saturation and lightness but rotates the hue by a fixed angle (for example 180° for a complement).
- The monochromatic set keeps the hue and shifts lightness up and down instead.
- Every result is converted back to HEX and RGB so you can paste it into any design tool.
The six harmony schemes at a glance
| Scheme | Hue angles from base | Colours | Best for |
|---|---|---|---|
| Complementary | 0°, 180° | 2 | High-contrast accents, buttons, sport branding |
| Analogous | −30°, 0°, +30° | 3 | Calm backgrounds, nature themes, gradients |
| Triadic | 0°, 120°, 240° | 3 | Playful, balanced, vibrant illustrations |
| Split-complementary | 0°, 150°, 210° | 3 | Contrast with less tension than pure complementary |
| Tetradic (square) | 0°, 90°, 180°, 270° | 4 | Rich, varied palettes for complex layouts |
| Monochromatic | 0° (lightness steps) | 5 | Minimal, elegant, single-hue designs |
An example
Start with a confident blue such as #2F80ED (hue 217°). Its complement is a warm orange near hue 37° — perfect for a single attention-grabbing button on a blue page. Its analogous neighbours are a cyan and an indigo that sit on either side, ideal for a calm gradient. Its triadic partners are a red and a green, giving you a punchy three-colour brand palette. Switch the base colour above and watch all six palettes update at once.
Want a deeper walk-through of colour theory and how to apply each palette? Read the complete colour harmony guide, or see how the six schemes compare so you can pick the right one for your project.
Frequently asked questions
What is a color harmony generator?
A color harmony generator takes one base colour and applies the rules of colour theory to it — rotating its hue around the colour wheel and varying its lightness — to produce sets of colours that look balanced together. This tool builds six classic schemes (complementary, analogous, triadic, split-complementary, tetradic and monochromatic) and shows each colour's HEX, RGB and HSL code so you can drop them straight into a design.
How are the harmony colours calculated?
Your base colour is converted from HEX to HSL (hue, saturation, lightness). Each scheme then rotates the hue by a fixed angle — 180° for complementary, 120° for triadic, 30° for analogous, and so on — while keeping saturation and lightness the same. The monochromatic scheme instead keeps the hue fixed and shifts the lightness up and down. The results are converted back to HEX and RGB for you.
What is the difference between complementary and analogous colours?
Complementary colours sit directly opposite each other on the wheel, so they create strong contrast and make elements pop. Analogous colours sit next to each other, so they blend smoothly and feel calm and unified. Use complementary pairs for accents and calls to action, and analogous sets for backgrounds and gradients.
Are the generated palettes accessible?
Harmony rules describe which hues look pleasing together, not whether text is legible on a given background. Always check the contrast ratio between any text colour and its background against the WCAG guidelines (4.5:1 for normal text). The swatches here automatically switch their own label between black and white for readability, but you should still test real text and background pairs.
Do I need to install anything or sign up?
No. The generator is a single web page that runs entirely in your browser using JavaScript. There is no account, no download and no upload — the colours you pick never leave your device.
Can I use these colours commercially?
Yes. Colours and the numeric codes that describe them are not copyrightable, so any palette you build here is free to use in personal or commercial work. The tool itself is provided for general information without warranty.