Color Harmony Explorer
Explore complementary, analogous, triadic, tetradic and monochrome palettes.
Overview
The Color Harmony Explorer derives complementary, analogous, triadic, tetradic, split-complementary and monochromatic palettes from a single base colour. Each harmony is rendered as a row of swatches with hex, RGB and HSL values ready to drop into a design system or CSS variable file.
It is aimed at designers blocking out a new brand palette, illustrators choosing accent colours for a poster, and developers who want a starting point for chart series colours. Because every harmony is generated from one seed, you can iterate on the base hue and watch the entire family update in lockstep.
How it works
The base colour is converted into HSL and the harmony rules operate on hue rotations. Complementary rotates the hue by 180°, analogous picks two neighbours ±30° away, triadic spaces three colours at 120° intervals, tetradic spaces four at 90°, and split-complementary takes the two colours flanking the complement at ±150°.
Monochromatic and tints-and-shades sequences keep the hue fixed and instead step the lightness or saturation. The tool exposes the raw HSL values so you can round-trip them through any palette generator that expects a starting hue and harmony rule.
Examples
#3366cc base
↳ complementary → #cc9933
↳ analogous → #3399cc, #3333cc
↳ triadic → #66cc33, #cc3366
↳ tetradic → #66cc33, #cc9933, #cc3366
FAQ
Which harmony is safest for product UI?
Analogous and monochromatic palettes feel calm and rarely clash, which makes them safe defaults for dashboards. Triadic and split-complementary give more energetic results suited to marketing pages.
Why do my triadic colours look unbalanced?
Equal hue spacing in HSL does not mean equal perceptual weight. Yellow at 60° appears far lighter than blue at 240° at the same saturation and lightness. Manually nudge the lightness of each entry, or generate the harmony in OKLCH for more balanced results.
Can I use these palettes for charts?
Categorical harmonies with three or more colours work well for short series, but for longer datasets switch to a palette specifically designed for ordered data, such as ColorBrewer or Viridis.
How do I keep accent colours accessible?
After generating a harmony, run the foreground/background pairs through a contrast checker — perceptual harmony does not guarantee WCAG-passing contrast.