Color wheel

The color wheel is a map of hue — the property that makes a color red rather than blue — bent into a circle. Its power is that geometry becomes meaning: colors directly opposite each other contrast as strongly as possible, colors next to each other blend quietly, and colors spaced evenly around the circle balance one another. Every named color scheme in design — complementary, analogous, triadic — is just one of these geometric relationships.

That makes the wheel a working tool, not a poster. Pick a base color, choose a relationship, and the wheel hands you the other colors: no guesswork, and the result behaves predictably. The interactive wheel above does exactly that, in both the artists’ RYB arrangement and the digital RGB arrangement.

Isaac Newton drew the first color circle in 1704. After splitting white light with a prism, he noticed that the two ends of the spectrum — red and violet — look more alike than either looks like green, so he joined them into a loop. The circle was a scientific diagram of light, but artists adopted it almost immediately.

Johann Wolfgang von Goethe’s Theory of Colours (1810) reorganized the wheel around perception and emotion, opposing warm against cool. The chemist Michel Eugène Chevreul, running the Gobelins tapestry works in Paris, formalized simultaneous contrast in 1839 — the observation that adjacent colors change each other’s appearance — which became the scientific backbone of complementary color schemes and later influenced the Impressionists.

The 12-hue wheel most people learn today was codified by Johannes Itten at the Bauhaus in the early 20th century: three primaries, three secondaries, and six tertiaries arranged so that complements sit opposite. Albert Munsell, working at the same time, replaced the tidy circle with a measured, three-dimensional color space — the ancestor of the perceptual color models (like OKLCH) that digital design systems use now.

There is no single correct color wheel, because there is no single way of making color. Pigments and light behave differently, and the wheel changes shape to match.

RYB (subtractive, pigment). The traditional artists’ model: red, yellow, and blue primaries, mixing toward muddy darkness. It survives because it matches physical experience — mix yellow and blue paint and you get green — and because centuries of art education and color-theory writing assume it. Its complements (red–green, blue–orange, yellow–purple) are the pairs most people recognize.

RGB (additive, light). Screens emit light, and light primaries are red, green, and blue — mix all three and you get white, not mud. The RGB wheel (the basis of HSL and HSV pickers) is what CSS, design software, and this page’s digital mode use. Its geometry disagrees with RYB: the complement of red is cyan, not green.

CMYK (subtractive, print). Commercial printing layers cyan, magenta, and yellow inks (plus black) on white paper. CMY are the mathematical inverses of RGB, which is why converting between screen and print colors is routine but never perfectly faithful — ink on paper cannot reproduce the brightest light a screen can emit.

The practical rule: think in RYB when handling physical media or talking to anyone trained in traditional color theory; work in RGB when the output is a screen; convert to CMYK only at the point of print. The RYB/RGB toggle above exists because both audiences are right — the wheel just has to know which question it is answering. (This tool’s RYB mode maps hues through the Gossett–Chen interpolation, the most-cited formulation of the paint-mixing wheel.)

Primary colors are the ones you cannot mix from anything else — in RYB: red, yellow, and blue. Secondary colors come from mixing two primaries: orange (red + yellow), green (yellow + blue), and violet (blue + red). Tertiary colors sit between a primary and its neighboring secondary: red-orange, yellow-orange, yellow-green, blue-green, blue-violet, and red-violet.

Those twelve hues make up the classic teaching wheel. The naming convention matters more than it looks: a tertiary is always named primary-first (blue-green, not green-blue), which tells you which parent dominates the mix. On the RGB wheel the same three-tier structure exists but with different members — the secondaries of light are cyan, magenta, and yellow.

Complementary — two colors opposite each other. The highest-contrast pairing there is, which makes it ideal for making one element (a button, a warning, a headline) impossible to miss. The risk is vibration: two saturated complements at full strength fight, so let one dominate and mute or darken the other.

Split-complementary — a base color plus the two neighbors of its complement. You keep most of the contrast of a complementary scheme but soften the tension, and you get three colors to work with instead of two. A forgiving default for beginners.

Analogous — three neighbors on the wheel, like yellow, yellow-green, and green. Low contrast, high cohesion; common in nature and calming in interfaces. Because the colors are so similar, differentiate elements with lightness rather than hue, and consider a single complementary accent for emphasis.

Monochromatic — one hue in several tints, shades, and tones. It cannot clash, gives a disciplined, editorial look, and relies entirely on lightness contrast for hierarchy. Most “dark mode” and brand-heavy designs are monochromatic schemes with one or two accents.

Triadic — three colors evenly spaced 120° apart, like the primaries themselves. Vibrant and balanced at the same time, but only when weighted: pick one color to lead, and use the other two as accents at reduced saturation.

Tetradic (rectangle) — two complementary pairs. The richest palette on the wheel and the hardest to balance; it works best when one color clearly dominates and the others support in small doses.

Square — four colors evenly spaced 90° apart. Like tetradic but with even spacing, so no two colors are close neighbors. Strongly varied; the same dominance rule applies.

The wheel splits into a warm half — reds, oranges, yellows — and a cool half — greens, blues, violets. Warm colors read as energetic and near; cool colors read as calm and distant. Painters exploit this to build depth (warm foregrounds, cool backgrounds), and interface designers use it the same way: a warm accent advances out of a cool, receding UI.

Temperature is relative, though. Violet sits warm next to blue and cool next to red; a “warm gray” and a “cool gray” differ only by a trace of orange or blue. Treat the warm/cool split as a contrast to be controlled — the temperature gap between two colors matters more than either color’s absolute temperature.

Every color on the wheel can be described by three independent dials. Hue is the angle around the wheel — 0° red, 120° green, 240° blue on the RGB wheel. Saturation is intensity: full saturation at the wheel’s rim, gray at its center. Lightness runs from black through the pure color to white. The wheel above maps hue to angle and saturation to radius, with a separate lightness slider — together they cover the entire HSL color space.

Working with these dials separately is the single biggest practical upgrade the wheel offers: hold hue constant and vary lightness for hierarchy; hold lightness constant and vary hue for categorical differences (charts, tags); pull saturation down to make any palette feel calmer without changing its identity. Color pickers also offer HSB/HSV — identical hue, but its “brightness” runs from black to the pure color, with white reached by dropping saturation instead.

Mixing a hue with white produces a tint (pink is a tint of red); mixing it with black produces a shade (navy is a shade of blue); mixing it with gray produces a tone, which keeps the lightness but mutes the intensity. None of these change the hue — a palette of tints and shades of one color is still monochromatic.

In practice, tints make backgrounds and hover states, shades make text and borders, and tones make the in-between surfaces that saturated colors would overwhelm. The strips above compute them in OKLCH, a perceptually uniform color space, so each step looks evenly spaced to the eye rather than merely being numerically even.

Start from one color, not five. Pick the color that carries the design’s meaning — brand color, mood, subject — then let a harmony generate the candidates. It is far easier to tune a scheme that is already geometrically sound than to reconcile five colors chosen independently.

Weight the palette 60/30/10. Give a dominant color about 60% of the design (usually a neutral or a muted tone), a secondary color about 30%, and reserve the last 10% for the highest-contrast accent — typically the complement or the most saturated member of the scheme. Most palettes that feel chaotic are evenly weighted, not wrongly chosen.

Do hierarchy in lightness, identity in hue. Text, dividers, and surfaces should differ from their background mainly in lightness — that is what keeps them readable. Save hue differences for meaning: categories, states, emphasis.

Check accessibility before you commit. A palette that fails contrast requirements will be redesigned later under worse constraints. The contrast table above shows each color against black and white text, with WCAG levels; the color-blindness strips show whether the palette still distinguishes its members under the most common forms of color vision deficiency — roughly 8% of men and 0.5% of women see color differently, so a red/green status pair alone excludes real users.