Why it matters
Most brands start with one colour. A site needs more: an accent for buttons, a calm background, borders, and shades for hover states. Colour-wheel harmonies are a reliable way to choose companions that look intentional rather than random.
Classic HSL colour wheels produce companions that look mismatched in brightness, because HSL doesn't match how we see. This generator rotates hues in OKLCH, so a triadic palette keeps the same perceived lightness, and the 50 to 900 scales follow the convention Tailwind and most design systems use.
How it works
- InputA base colour and a harmony rule
- In your browserHues rotated in OKLCH, scales stepped in lightness
- OutputSwatches, 50 to 900 scales, CSS variables, Tailwind config and a PNG
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Rule | Colours |
|---|---|
| Complementary | #5865f2, #917700 |
| Analogous | #5865f2, #0080c6, #954ddb |
| Triadic | #5865f2, #d93100, #00914f |
| Split complementary | #5865f2, #ae6600, #688700 |
| Tetradic | #5865f2, #d4286c, #917700, #008d80 |
| Monochromatic | #5865f2, #a0b1ff, #2814a6 |
| Scale | 50 #eff3ff, 100 #e3e9ff, 200 #cad5ff, 300 #abbbff, 400 #8194ff, 500 #5865f2, 600 #454dd0, 700 #3132ab, 800 #201689, 900 #120060 |
How to use it
- Choose your base colour.
- Pick a harmony rule, and the spread for analogous.
- Check the shades table and the preview.
- Download the CSS variables, the Tailwind config or a PNG of the palette.
FAQ
Which harmony should I use?
Analogous is calm and safe; complementary gives the strongest contrast for one accent; triadic and tetradic are lively and best with one dominant colour and the others used sparingly.
Why is 500 not exactly my colour?
It is: the base colour is kept as 500 and the other steps are worked out from it in OKLCH, lighter towards 50 and darker towards 900.
Will these pass contrast checks?
The shades are evenly spaced for looks, not tuned for WCAG. Check text pairs in the Contrast Checker; 700 to 900 on 50 to 100 usually pass.
How do I use the Tailwind output?
Paste it inside theme.extend.colors in tailwind.config.js (Tailwind 3), or turn each value into a --color-name-500 variable in an @theme block (Tailwind 4).
