Color theory and the color wheel: a practical guide

By Felipe Silva · Updated on Sep 25, 2026

Color theory is the set of principles that explains how colors relate to each other, how they mix and how we perceive them side by side. Its starting point is the color wheel: a diagram that arranges hues around a circle, with the primary colors, the secondary colors (a mix of two primaries) and the tertiary colors (a primary mixed with a neighboring secondary). With it you can understand why some combinations work, how to lighten or darken a color without losing its character, and why the same color looks different depending on its background.

One detail trips up a lot of people: there isn't just one color wheel. The wheel you probably learned in school, with red, yellow and blue as primaries (RYB), is the painter's wheel. Screens use the RGB wheel, built on red, green and blue. This guide covers both, the three attributes of a color (hue, saturation and lightness), warm and cool colors, tints, shades and tones, and the phenomenon of simultaneous contrast, with examples in color codes you can use right away.

A brief history of color theory

Modern color theory begins with Isaac Newton. In Opticks (1704) he described how a prism splits white light and arranged the colors of the spectrum in a circle, joining red back to violet. It was the first time anyone treated color as a continuous, circular system.

In 1810, Goethe published Zur Farbenlehre (Theory of Colours), which was more interested in the human experience of color than in physics. His scientific conclusions didn't hold up, but his idea that perception matters as much as light influenced generations of artists.

In 1839, French chemist Michel-Eugène Chevreul, who oversaw dyeing at the Gobelins tapestry works, published his study on the law of simultaneous contrast of colors. He realized that complaints about "dull" yarn weren't a dye problem but a perception problem: the neighboring color changed the color people saw. We'll come back to this later.

In the 20th century, Johannes Itten, a Bauhaus teacher, formalized a 12-part RYB wheel and described seven kinds of contrast (hue, light-dark, cold-warm, complementary, simultaneous, saturation and extension) in The Art of Color (1961). Today his work is a historical and teaching reference, not a scientific law. Along the same lines came Josef Albers with Interaction of Color (1963) and, on the measurement side, Albert Munsell, who in the early 1900s organized colors by hue, value and chroma, an idea that anticipates the perceptual color spaces we use today.

RYB wheel (art) vs RGB wheel (screens)

The color wheel changes with the medium, because each medium produces color in a different way:

• RYB (red, yellow, blue) is the traditional painting model. It's intuitive for mixing pigments on paper, but it isn't colorimetrically accurate: from red, yellow and blue paint you can't get a vivid magenta or cyan.
• RGB (red, green, blue) is the additive model of light. Monitors and phones add red, green and blue light; all three at full strength make white.
• CMY(K) (cyan, magenta, yellow, plus black) is the subtractive print model. Each ink absorbs part of the light; the CMY secondaries are the RGB primaries, and vice versa.

In practice: if you design for screens, think in terms of the RGB wheel, which is the same one the HSL hue picker uses. If your work is headed to print, read RGB vs CMYK to see what changes on the way to the printer.

Primary, secondary and tertiary colors

On the RGB wheel

The primaries are red #FF0000, green #00FF00 and blue #0000FF. Adding two of them at full intensity gives you the secondaries:

• Red + green = yellow #FFFF00
• Green + blue = cyan #00FFFF
• Blue + red = magenta #FF00FF

Tertiaries sit halfway between a primary and a secondary: orange #FF8000, chartreuse #80FF00, spring green #00FF80, azure #0080FF, violet #8000FF and rose #FF0080. Together, primaries, secondaries and tertiaries form a 12-color wheel with a hue every 30°.

On the RYB wheel

In the art model, the primaries are red, yellow and blue; the secondaries are orange (red + yellow), green (yellow + blue) and violet (blue + red). The six tertiaries take compound names: red-orange, yellow-orange, yellow-green, blue-green, blue-violet and red-violet. This is the 12-part wheel Itten made popular. There are no "official" HEX codes for RYB, because it describes how pigments mix rather than light values.

Want to see how two colors blend? The color mixer shows every intermediate step between two codes.

Hue, saturation and lightness

Any color can be described by three attributes, which are exactly the ones in CSS's HSL format:

• Hue: the color "family," measured in degrees around the wheel. In HSL, 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue and 300° is magenta; 360° wraps back to red.
• Saturation: purity or intensity. At 100% the color is vivid; at 0% it becomes gray.
• Lightness: how close the color is to white or black. In HSL, 0% is always black, 100% is always white and 50% is the "pure" color.

Example: #FF5733 is rgb(255 87 51) and hsl(11 100% 60%): an 11° hue (red leaning toward orange), full saturation and lightness a bit above the midpoint. For the step-by-step math, see the guide to HEX, RGB and HSL color codes.

Warm and cool colors

Split the wheel in half and you get two groups. Warm colors run from red through orange to yellow: red, coral, orange, gold. Cool colors run from green through the blues to violet: turquoise, royal blue, navy blue.

In a layout, warm colors tend to "advance" and grab attention, while cool colors tend to "recede" and calm things down. That's why an orange button stands out on a bluish-gray background. The emotional associations (warmth, energy, calm, trust) are real, but they're cultural and depend on context; the color psychology guide treats them more carefully.

Keep in mind that temperature is relative. Yellow-green looks warm next to blue and cool next to orange. A blue-tinted gray such as charcoal gray #36454F reads as cool; a beige reads as warm. Even neutrals have a temperature.

Tints, shades and tones: variations of one color

To create variations of a color without changing its hue, designers use three classic operations:

• Tint: mix the color with white to lighten it.
• Shade: mix the color with black to darken it.
• Tone: mix the color with gray to mute it.

Here are all three applied to #FF5733, at 25%, 50% and 75% mixes computed in sRGB:

In an interface, tints work for soft backgrounds and highlight states, shades for text and hover or pressed states, and tones for more restrained versions of a brand color. In modern CSS, the color-mix() function does this directly:

.alert { background: color-mix(in srgb, #FF5733 25%, white); }
.alert:hover { background: color-mix(in srgb, #FF5733 75%, black); }

The first rule keeps 25% of the original color and 75% white, which gives #FFD5CC. The site's mixer builds these scales without any code.

Simultaneous contrast: a color depends on its neighbors

What Chevreul saw in tapestries applies to every screen: your eye doesn't judge a color in isolation, but relative to its surroundings. The main effects are:

• Light and dark: the same gray #808080 looks lighter on black and darker on white.
• Hue: a color tends to shift toward the complement of its background. Gray on a red background looks slightly greenish or bluish.
• Saturation: next to gray, a color looks more vivid; next to a more saturated version of itself, it looks washed out.

This has very practical consequences. Your brand color will look different in a dark header and on a white card, so check both before you sign off. Icons and thin text suffer the most, because the colored area is small. And since perception can fool you, confirm legibility with numbers: the contrast checker calculates the WCAG ratio, which doesn't depend on what your eye thinks at that moment.

Putting color theory into practice

1. Pick a base hue. Start from a brand color, a reference photo or a product. To grab the exact code from an image, use the online eyedropper.
2. Decide how hues relate. Neighboring colors on the wheel feel calm; opposite colors create tension and emphasis. The color harmony guide walks through the six classic schemes.
3. Build a scale for each color from tints and shades instead of inventing one-off shades. A 5- to 9-step scale covers backgrounds, borders, text and states.
4. Balance temperature and saturation. A warm, saturated color works as an accent; leave large areas to neutrals or less saturated colors.
5. Test in the real context, on the backgrounds where the color will actually appear, keeping simultaneous contrast in mind.

Summary and next steps

• The RYB wheel belongs to painting; RGB belongs to screens and is the one HSL uses; CMY belongs to print.
• Primaries make secondaries, and primaries mixed with neighboring secondaries make tertiaries: 12 colors, one every 30°.
• Hue, saturation and lightness describe any color, but HSL lightness doesn't match perceived lightness.
• Warm and cool are relative categories; tints, shades and tones create consistent variations of one hue.
• Neighboring colors change the color you see, so always validate in context and with measurements.

To put this to work, build a combination in the color palette generator, create scales in the color mixer and capture colors from references with the image color picker. Then move on to the color harmony guide, or explore specific colors such as terracotta, teal and royal blue in the color library.