Color Relationships
Explore every color theory relationship from any base color. See how the base relates to its complementary, analogous, triadic, tetradic and split-complementary partners — with clear labels for each offset.
What Are Color Relationships?
Color relationships describe how colors relate to each other based on their position on the color wheel. The most important relationships — complementary, analogous, triadic, tetradic and split-complementary — form the foundation of color theory and are used by every designer, painter, and brand strategist who works with color systematically.
This tool shows all the relationships for a chosen base color in one view, with each color labelled by its exact hue offset. It is a fast way to see what "complementary" or "triadic" actually looks like for a specific color, rather than in the abstract.
The Relationships Explained
- Complementary (180°): Two hues directly opposite. Creates the highest visual tension — great for accents, CTAs and attention-grabbing elements.
- Analogous (within ±60°): Neighboring hues. Creates harmony, calm and cohesion. Ideal for backgrounds, editorial and nature-inspired designs.
- Triadic (120° apart): Three evenly-spaced hues. Balanced yet vibrant — used for playful brands, data visualization and illustrations.
- Tetradic (90° apart): Four hues in two complementary pairs. Rich variety — great for complex designs that need multiple coordinated colors.
- Split-complementary (150° and 210°): Base plus two neighbors of the complement. Similar tension to complementary but easier to balance.
- Monochromatic: One hue with varying lightness. Elegant, minimal, and the foundation of most design systems.
How to Use the Relationships View
- Enter a base HEX color or click Random.
- Scan the six rows to see each relationship in action.
- Each swatch shows its HEX value and its offset from the base.
- Click any swatch to copy it.