Build complementary, analogous, triadic, tetradic and split-complementary color schemes from one base color. Rotations run on the classic HSL wheel or the perceptual OKLCH wheel, every scheme previews as labeled swatches with its exact angles, and the result exports as CSS variables, SCSS, JSON or draft design tokens.
Generated locally in your browser — your colors, settings and code never leave this page.
Harmony as geometry
Color harmony has accumulated centuries of mystique, but its working core is geometry: hue relationships at specific wheel angles tend to read as intentional. Complementary at 180°, analogous at ±30°, triadic at 120° spacing, tetradic at 90°, split-complementary at 150°/210°. This generator computes all five structures from any base color, labels each swatch with its exact angle, and exports the result in developer-ready formats — theory turned into copyable values.
Matching structure to intent
The five schemes are five different bets. Analogous bets on cohesion — content-heavy products where color should whisper. Complementary bets on emphasis — one thing must dominate the page. Split-complementary hedges that bet with more forgiveness. Triadic bets on balanced variety — playful without chaos. Tetradic bets on abundance and demands the most discipline. The generator makes switching bets a one-click experiment instead of a redesign.
| Scheme | Colors | Angles | Personality |
|---|---|---|---|
| Complementary | 2 | 0°, 180° | maximum tension |
| Analogous | 3 | −30°, 0°, +30° | calm, natural |
| Split-complementary | 3 | 0°, 150°, 210° | tension, forgiving |
| Triadic | 3 | 0°, 120°, 240° | balanced variety |
| Tetradic | 4 | 0°, 90°, 180°, 270° | rich, demanding |
The wheel-space choice
Every scheme can be computed on the classic HSL wheel (matching textbooks and most other tools) or the perceptual OKLCH wheel (rotations preserve apparent lightness and vividness, so scheme members look like equals). Art-theory fidelity versus perceptual consistency — the toggle is one click and the visual difference, especially for triads from a blue base, is instructive.
After the scheme
Harmony assigns hue relationships; it does not assign jobs. Run the exported set through the Palette Contrast Matrix to learn which members can carry text, and expand working members into ramps with Shades & Tints. Scheme → audit → ramp is the pipeline from theory to shipped interface.
Harmonies as constraints, not commandments
The mature use of harmony schemes is as a constraint system: they shrink infinite color space to a handful of defensible candidates, which is where their real productivity lies. Professionals routinely bend the geometry afterwards — a triadic hue nudged 10° toward brand, an analogous neighbor darkened past theory — and the schemes survive bending because their value was never precision, it was structure. Generate the strict geometry here, then deviate knowingly; the angles in the labels tell you exactly how far you have wandered, which is what separates a considered deviation from a drift.
How to use the Color Harmony Generator
- Pick a base color and a harmony type.
- Choose the wheel space – classic HSL or perceptual OKLCH.
- The scheme renders as labeled swatches with exact angles.
- Export as CSS variables, SCSS, JSON, design tokens or plain text.
Frequently asked questions
Which harmony should I pick for my project?
Rules of thumb: monochromatic/analogous for calm, editorial, content-heavy interfaces; complementary or split-complementary when one action must dominate; triadic for playful, balanced variety; tetradic only when you genuinely need four hue families (dashboards, categories). When unsure, analogous plus one complementary accent covers most real products.
What do the angle labels on the swatches mean?
Each color's hue rotation from your base: +120° and +240° for triadic, ±30° for analogous, and so on. They are the recipe – you can reproduce the scheme in any tool by rotating hue those exact amounts.
Why do HSL and OKLCH harmonies from the same base look different?
The wheels space hues differently. HSL's geometry is mathematically even but perceptually lumpy – its greens sprawl, its blues crowd. OKLCH spaces hues by appearance, so its rotations keep lightness and vividness steadier. Classic art-theory expectations match HSL; consistent-looking results favor OKLCH.
Are all harmony colors equally usable for text and backgrounds?
No – harmony governs hue relationships, not contrast. After choosing a scheme, run the set through the Palette Contrast Matrix to learn which pairs can carry text. Harmony picks the family; contrast assigns the jobs.
Can I get lighter or darker versions of each harmony color?
The per-hue variants control adds tints in the palette-generator versions of each scheme (linked under the tool), and Shades, Tints and Tones expands any single swatch into a full ramp.
Is color harmony a rule or a convention?
A well-tested convention – geometric hue relationships tend to look intentional, which is most of what "harmonious" means in interfaces. Treat the output as a strong starting point that real content and accessibility checks then refine.
How do I hand a scheme to a developer?
Export CSS variables (ready to paste into :root) or the DTCG-draft design tokens JSON if they use a token pipeline – both name each color by its role in the scheme, so intent survives the handoff.
