🎡 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.