🎡 Color Harmony Generator
Enter a base color and get every classic harmony — complementary, triadic, analogous, split-complementary, tetradic and monochromatic — as exact swatches with copyable HEX, HSL and OKLCH codes.
Complementary
Split-complementary
Triadic
Tetradic (square)
Analogous
Exact hue rotations on the color wheel, with HEX, HSL and OKLCH codes. 🔒 Computed in your browser.
How the color harmony generator works
Color harmonies are exact rotations on the hue wheel: complementary is +180°, triadic ±120°, analogous ±30°, split-complementary +150°/210°, and tetradic/square +90°/180°/270°; monochromatic varies lightness at a fixed hue. The tool computes each partner hue precisely and shows the resulting colors with HEX, HSL and OKLCH codes to copy.
This computes exact partner hues — it is geometry, not a "suggest a nice palette" guess. Rotations can be taken in OKLCH hue for perceptually even spacing, which keeps a triad or tetrad looking balanced in a way HSL rotations do not.
Frequently asked questions
What are color harmonies?
Harmonies are sets of colors placed at fixed angles on the color wheel: complementary (opposite, 180°), triadic (three colors 120° apart), analogous (neighbours ~30° apart), split-complementary, tetradic and monochromatic. They are the classic starting points for a balanced palette.
What is a complementary color?
The color directly opposite on the wheel — 180° from your base hue. It gives the strongest contrast; the tool computes it exactly and shows its HEX, HSL and OKLCH.
What is the difference between triadic and analogous?
Triadic uses three evenly spaced hues (120° apart) for a vibrant, balanced scheme; analogous uses neighbouring hues (~30° apart) for a calm, cohesive look. The generator shows both from your base color.
Why compute harmonies in OKLCH?
Rotating hue in OKLCH keeps perceived lightness even across the scheme, so a triad or tetrad looks balanced. HSL rotations can make some members look brighter or muddier than others.
Can I copy the codes?
Yes — every swatch shows copyable HEX, HSL and OKLCH values, so you can drop them straight into CSS or a design tool.