How to use the colour harmonies tool
- Choose a Base colour with the picker or type any CSS colour.
- Pick the Hue wheel: HSL (classic) or OKLCH (perceptual).
- Read the seven sets. Each swatch is labelled with its hue offset, and the base is marked Base.
- Click or copy the swatches you want to use.
What it does and when to use it
Colour harmonies are fixed angle patterns on the colour wheel. They are a fast starting point when you have one brand or photo colour and need partners for accents, charts or illustrations. This tool shows every common pattern at once, so you can compare them side by side instead of rotating a wheel by hand.
The sets and their angles:
| Harmony | Hue offsets |
|---|---|
| Complementary | 0°, 180° |
| Analogous | −30°, 0°, +30° |
| Triadic | 0°, 120°, 240° |
| Split-complementary | 0°, 150°, 210° |
| Tetradic (rectangle) | 0°, 60°, 180°, 240° |
| Square | 0°, 90°, 180°, 270° |
If you only need the opposite colour, the complementary colour finder also shows the RGB complement and the inverse. To turn a harmony into a full set of UI roles, use the UI colour scheme builder. For random palettes built on these patterns, try the palette generator.
How it works
On the HSL wheel the tool converts your colour to hue, saturation and lightness, adds the offset to the hue (wrapping at 360°) and converts back. On the OKLCH wheel it does the same with OKLCH hue, keeping OKLCH lightness and chroma. A rotated OKLCH colour can fall outside what a normal screen shows; it is then gamut-mapped by lowering chroma, so some partners come out a little less vivid than the base.
Worked examples
These are the tool’s own outputs.
Pure red on the HSL wheel. Complementary: #ff0000 and #00ffff. Triadic: #ff0000, #00ff00 and #0000ff, the three primaries of light.
Rose #e11d48, HSL versus OKLCH.
| Harmony | HSL wheel | OKLCH wheel |
|---|---|---|
| Complement | #1de1b6 | #009195 |
| Triadic | #48e11d, #1d48e1 | #2c9500, #0074fb |
| Analogous | #e11daa, #e1541d | #d12894, #cf4d00 |
Both monochromatic sets are #5a0c1d, #9e1433, #e21d48, #eb617f and #f3a5b6.
Limits and tips
- Angles are a starting point, not a rule. Adjust lightness so one colour leads and the others support it.
- Greys have no hue, so every rotation of a grey returns the same grey.
- Preview the set with the colour blindness simulator: red and green partners from a triad can merge for many viewers.
- It runs in your browser; nothing is uploaded.
Frequently asked questions
What is the difference between the HSL and OKLCH wheels?
Why does the OKLCH complement look darker than the HSL one?
Which harmony should I use?
How is the monochromatic set made?
Do harmonies guarantee readable text?
How do we know nothing is uploaded? Test it yourself on the privacy proof page.