Color Harmony Generator
Generate colour harmonies from a base colour using perceptual hue rotation, with contrast checked against white and black and a note on where each scheme actually works.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Harmonies are a starting point, not a rule
Complementary, triadic and analogous schemes come from a colour wheel drawn for pigment mixing in the eighteenth century. They reliably produce combinations that look deliberate, which is genuinely useful when starting from nothing. They do not guarantee a scheme that works: a triadic palette at full saturation is unusable for an interface, and the most effective interface palettes are usually one hue with a single accent rather than any of the classical arrangements.
Rotate hue perceptually or the harmony breaks
Rotating hue in HSL changes the apparent lightness as it goes, so a triadic set generated that way has one colour that dominates and another that disappears. Rotating in OKLCH holds lightness and chroma fixed, so the three colours arrive matched in visual weight and the harmony is between hues rather than between accidents of brightness. This is the single biggest improvement available to the technique.
Interface colour needs contrast, not balance
A harmony tells you which hues sit well together and says nothing about whether text on them can be read. Every colour intended for text or a control needs a contrast ratio checked against its actual background, and a beautiful palette that fails contrast has to change. Checking at generation time is far cheaper than discovering it during an accessibility review after the design is built.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Which harmony should I use?
For an interface, usually none of them in full: one hue with a single accent, plus neutrals, outperforms the classical schemes. Analogous works for calm, cohesive designs and complementary for a single high-emphasis accent against a dominant hue.
Why rotate hue in OKLCH rather than HSL?
Because rotating in HSL changes apparent lightness as it goes, so one colour in the set dominates and another vanishes. OKLCH holds lightness and chroma fixed, so the harmony is between hues rather than between accidents of brightness.
Do harmonies guarantee a good palette?
No. They come from an eighteenth century pigment wheel and reliably produce combinations that look deliberate. A triadic set at full saturation is still unusable for an interface, and most working palettes are simpler than any classical scheme.
How many colours does an interface need?
Fewer than most palettes provide. One brand hue, one accent for actions, a neutral ramp for text and surfaces, and semantic colours for success, warning and error. Everything else tends to create decisions rather than resolve them.
Why check contrast here?
Because a harmony says nothing about legibility, and a palette that fails contrast has to change. Finding that at generation time costs nothing; finding it during an accessibility review after the design is built costs a great deal.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Enter a base colour to generate every standard harmony from it.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.