Understanding Color Harmonies

Color harmonies are combinations of colors that look pleasing together. They follow patterns on the color wheel and are the foundation of great palette design.

Complementary

Colors opposite each other on the color wheel (180° apart). Creates high contrast and visual tension. Example: blue and orange, red and green. Best for: call-to-action buttons, emphasis, and vibrant designs.

Analogous

Colors adjacent to each other on the color wheel (30-60° apart). Creates harmony and cohesion. Example: blue, blue-green, green. Best for: backgrounds, gradients, and calm, unified designs.

Triadic

Three colors evenly spaced on the color wheel (120° apart). Provides variety while maintaining balance. Example: red, yellow, blue. Best for: colorful interfaces, branding, and playful designs.

Tetradic (Double Complementary)

Four colors forming two complementary pairs. Rich and complex. Example: red + green and blue + orange. Best for: sophisticated designs where you need many colors.

Split Complementary

A base color plus the two colors adjacent to its complement. Less tense than straight complementary while maintaining contrast. Example: blue with yellow-orange and red-orange. Best for: designs that need contrast with more nuance.

Monochromatic

Variations in lightness and saturation of a single hue. Creates a clean, professional look. Best for: dashboards, data visualizations, and minimalist designs.

Using the Color Workbench

The Color Workbench generates six harmony types automatically based on your current color. Click any harmony swatch to make it your active color and explore its relationships. Each palette can be copied as a list of hex values.

Tips for Using Harmonies

• Let one color dominate (60%), use a secondary color (30%), and an accent (10%)
• Consider accessibility — high-contrast doesn't always mean complementary
• Use the variant generator to create tints and shades within your harmony
• Test harmonies against both light and dark backgrounds