The Color Wheel
How harmonies, tints, shades, and primaries relate on the wheel — explained with interactive diagrams. When you're ready to build, the palette generator puts a full wheel at your fingertips.
Intro to Color Theory
Color theory provides vocabulary and structure for combining hues. It does not replace accessibility checks or brand guidelines.
The color wheel visualizes hue relationships. Traditional wheels use the RYB pigment model; screens use additive RGB.
Newton's Opticks (1704) included an early hue circle. Designers still use wheels today to plan harmonies before refining values.
Harmonies are starting points—always validate contrast, legibility, and context before publishing.
Hue Rotation & Complementary Colors
Drag the active pointer around the wheel to see how colors shift opposite one another.
Using the Color Wheel
Choose a harmony type from the control, then adjust hue and lightness to preview the scheme.
Drag on the wheel to shift hue; move toward the center to reduce saturation.
Enter a hex code to start from a brand color, then explore related hues.
Color Harmonies
Complementary: opposite hues (180°). High contrast; use for accents against neutrals.
Split-complementary: a base hue plus neighbors of its complement. Softer than pure complements.
Analogous: neighboring hues (~30° apart). Cohesive and calm; add a contrasting accent for focus.
Triadic: three hues 120° apart. Vibrant; let one hue dominate.
Tetradic (rectangle): two complementary pairs forming a rectangle on the wheel.
Square: four hues spaced 90° apart for even spectral coverage.
Extend any harmony with shades, tints, and tones for production-ready palettes.
Explore All Harmonies Simultaneously
Adjust the base hue slider below to see how geometric harmony relationships rotate across the spectrum.
Complementary
Opposite hues on the wheel, creating maximum contrast.
Split-Complementary
A base hue plus the two colors adjacent to its complement.
Analogous
Neighboring colors on the wheel, creating serene designs.
Triadic
Three colors spaced evenly at 120° intervals around the wheel.
Tetradic (Rectangle)
Two complementary pairs, forming a rectangle on the wheel.
Square
Four colors spaced evenly at 90° intervals around the wheel.
Color Tints, Shades, and Tones
Tints mix a hue toward white. They lighten surfaces without jumping to pure white.
Shades mix a hue toward black. They deepen UI elements and create hierarchy.
Tones mix a hue toward gray. They produce muted variants for secondary content.
Twelve-segment wheels label primaries, secondaries, and tertiaries for quick reference.
Primary, Secondary, and Tertiary Colors
On a traditional RYB wheel, primaries are red, yellow, and blue. Screens instead mix red, green, and blue light.
RYB secondaries—orange, green, and violet—fall midway between primaries on the pigment wheel.
Tertiary hues such as chartreuse, teal, and red-violet sit between a primary and a secondary.
Sample colors from photos with the image picker, or inspect individual values with the hex picker and color library.