What is the difference between Triadic and Tetradic color schemes?

Triadic schemes use 3 colors placed at 120-degree intervals on the color wheel, while Tetradic schemes use 4 colors placed at 90-degree square angles.

What is the 60-30-10 design rule?

It is a proportion guideline where 60% of an interface is a dominant background color, 30% is a secondary supporting color, and 10% is a contrasting accent color.

Classical Color Wheel Geometry

Triadic & Tetradic Harmony Generator

Calculate geometrically balanced 120° Triadic and 90° Tetradic color wheel harmonies with UI role mapping (Dominant, Secondary, Accents).

Harmony Mode & Base

Geometric Harmony Mode

Base Dominant Color

Quick Inspiration Bases

Balanced Palette Swatches

Dominant Base: 60% Secondary: 30% Accent: 10%

Color Wheel Geometric Equilibrium

What are Triadic and Tetradic Color Schemes?

In classic color theory, geometric harmonies select hues spaced at equal angular intervals around the 360-degree color wheel:

Triadic Harmony (120°): Three colors placed equidistant in an equilateral triangle (e.g. Red, Yellow, and Blue or Purple, Orange, and Green). Triadic schemes offer vibrant visual energy while maintaining complete chromatic equilibrium.
Tetradic / Square Harmony (90°): Four colors spaced evenly at right angles (two complementary pairs). Tetradic harmonies offer rich, multi-tone palettes with plenty of variation.

The 60-30-10 Interior & UI Design Rule

When using vibrant triadic or tetradic palettes, never use colors in equal proportions (which causes visual chaos). Apply the classic 60-30-10 rule: let one dominant color occupy 60% of the space (backgrounds/main canvas), a secondary color take 30% (cards/structural elements), and reserve the third sharp contrasting color for 10% (call-to-action buttons and badges).

Frequently Asked Questions

What makes Triadic palettes so popular?

Triadic palettes provide intense contrast while retaining harmony, making brand logos and character designs (like Superman's Blue, Red, and Yellow) memorable.

How is the 90-degree Tetradic angle calculated?

By adding 90°, 180°, and 270° modulo 360 to the base color's HSL hue coordinate.