Color Harmonies
Discover which colors were born to be together. Choose a base color and explore six harmony rules.
Invalid color. Try #hex or a CSS color.
What Is Color Theory?
Color theory is the study of how colors relate to one another on the color wheel and how those relationships affect human perception. The color wheel arranges hues in a circular spectrum from red through orange, yellow, green, cyan, blue, violet, and back to red. Harmony rules describe specific angular relationships between hues that tend to produce visually pleasing combinations.
This tool works in the HSL color space to calculate hues, but displays results in HEX for easy copying into your design system. The base saturation and lightness are preserved across harmony colors so the relationships look coherent.
The Six Harmony Rules
Complementary
Two colors directly opposite on the wheel (180° apart). Creates maximum contrast and visual tension. Use sparingly; typically one dominant color and the complement as an accent. Common in warning UI: orange/blue, red/cyan.
Analogous
Three colors that sit adjacent on the wheel (typically ±30°). Found abundantly in nature: sunsets, foliage. Produces serene, harmonious palettes. Lacks contrast, so choose one dominant, one supporting, and one accent.
Triadic
Three colors evenly spaced 120° apart. Highly vibrant even with desaturated variants. More balanced than complementary. Often used in children's media and bold brand identities. Let one color dominate to avoid visual chaos.
Split-Complementary
The base color plus the two hues on either side of its complement (±30° from the complement). High contrast like complementary, but less tension; a softer, more nuanced alternative. Good for beginners.
Tetradic (Rectangle)
Four colors forming a rectangle on the wheel (two complementary pairs). Rich and complex; offers many possible relationships. Works best when one hue dominates. Difficult to balance; reduce saturation on non-dominant colors.
Square
Four colors evenly spaced 90° apart. Similar to tetradic but the square layout ensures all four colors are equidistant. Produces dynamic, bold combinations. Like tetradic, needs one dominant color to avoid equal-weight clashes.
Applying Harmonies in UI Design
- 60-30-10 rule: Use 60% of your dominant color, 30% of the secondary, and 10% of the accent. Prevents any single color from overwhelming the interface.
- Harmonies are hue suggestions: The swatches show hues; extend each to a full scale (use the Palette tool) to get usable light/dark variants for backgrounds and text.
- Saturation and lightness matter: Two colors 180° apart but at different lightness levels lose their complementary tension. Keep them close in saturation for the harmony to read clearly.