Color Theory: An Interactive Guide

Color theory is the practical knowledge of how to use color: how colors are made (by mixing light or pigment), how they are organized (the color wheel and color models), how they interact (harmony and contrast), and how people tend to respond to them. It sits where physics, the biology of vision and design craft meet.

For designers and developers it answers everyday questions. Which accent goes with a brand blue? Why is this text hard to read? Why does a palette that looks balanced on screen print muddy? How do you build a dark mode that still feels like the brand?

A short history of the color wheel

• Isaac Newton published Opticks in 1704. He bent the visible spectrum into a circle, joining red to violet, and divided it into seven colors. His diagram is usually credited as the first color circle, and the idea of hue as a loop has stayed with us ever since.
• Johann Wolfgang von Goethe published Theory of Colours in 1810. He cared less about the physics of light than about how color is perceived and felt, and drew a symmetric wheel with complementary colors facing each other.
• Johannes Itten, a teacher at the Bauhaus, developed the 12-part wheel still used in art schools: three primaries (red, yellow and blue), three secondaries and six tertiaries. His book The Art of Color (1961) also described seven kinds of color contrast.
• In the 20th century color became measurable: Albert Munsell's system organized color by hue, value and chroma, and the CIE defined standard color spaces in 1931. OKLab and its polar form OKLCH, published by Björn Ottosson in 2020, bring that science to CSS.

Primary colors are the ones you mix to make the others. Secondary colors are mixes of two primaries, and tertiary colors mix a primary with the secondary next to it. Which colors count as primary depends on what you are mixing:

RGB and CMY are mirror images: each one's secondaries are the other's primaries. Add red and green light and you get yellow; overprint cyan and magenta ink and you get blue. Printers use cyan, magenta and yellow, plus black (the K, for "key", in CMYK), because those inks mix a wider range of colors than red, yellow and blue. RYB lives on in painting and art education, where it remains an intuitive way to think about mixing.

Every color can be described with three properties:

Value does most of the work. Readability, hierarchy and depth all come from lightness differences, not from hue. A quick test is to view a design in grayscale: if the important things still stand out, the colors are doing their job.

Value is also where older color models mislead. In HSL, hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) have the same "lightness", yet yellow's relative luminance is about 0.93 and blue's about 0.07. Perceptual models such as OKLCH fix this, so colors with the same lightness value really do look equally light.

A color harmony is a combination chosen by its position on the color wheel: opposite hues are complementary, neighbors are analogous, and evenly spaced hues form triads and squares. Which partner colors you get depends on the wheel you use, and whether the result works depends on proportion, so let one color dominate and use the others to support and accent it. Try every harmony on the color wheel.

Reds, oranges and yellows are called warm; greens, blues and violets are called cool. The names come from everyday associations (fire and sun, water and sky) rather than from physics, and painters have long used the contrast between them.

In design, warm colors tend to feel energetic and appear to come forward, while cool colors tend to feel calm and recede. Landscape painters use the same effect: distant hills look bluer and less saturated, so cool, muted colors read as further away.

Temperature is also relative. A red-violet looks cool next to orange and warm next to blue, and grays can lean warm or cool depending on a slight tint. Useful habits:

• Use a warm accent for the one action you want people to notice on a cool, calm layout, or the reverse.
• Tint neutrals slightly toward your brand hue so backgrounds and text feel related to it.
• Keep the temperature of a palette consistent unless the contrast is deliberate.

Contrast between text and its background is the most important accessibility rule for color. The Web Content Accessibility Guidelines (WCAG 2.2) measure it as a ratio from 1:1 (no contrast) to 21:1 (black on white):

WCAG also says color must never be the only way information is shown. A red border on an invalid field needs an error message too, and a chart needs labels or patterns as well as colors. That matters because color vision deficiency affects roughly 1 in 12 men and 1 in 200 women of Northern European ancestry, most often as difficulty telling reds and greens apart.

Check pairs with the contrast checker, and see a whole palette through different eyes with the color blindness simulator.

Colors carry associations, but they are learned and cultural rather than universal laws, and research on color and behavior is mixed. Treat the meanings in this table as common associations to be aware of, not as rules:

Context usually beats symbolism. A red button means "delete" in one app and "buy now" in another, and people read it from the layout around it. If color meaning matters for a product, test it with the people who will use it.

The 60-30-10 rule

A rule of thumb borrowed from interior design: about 60% of a design uses a dominant color (usually backgrounds and large surfaces), 30% a secondary color (navigation, cards, sections) and 10% an accent (buttons, links, highlights). It is not a formula, but it stops palettes from becoming noisy and keeps the accent meaningful.

Semantic colors

Most interfaces need colors that mean something: green for success, amber for warning, red for errors and blue for information. Keep them distinct from your brand accent, make each one pass contrast, and always pair them with an icon or text.

Dark mode

Dark mode is not inverted light mode. Many design systems use a very dark gray instead of pure black (Material Design 2's baseline dark surface is #121212), show elevation with lighter surfaces instead of shadows, and use slightly less saturated accents, because vivid colors look harsher on dark backgrounds. Recheck every contrast pair in both themes.

Build scales, not single colors

Each brand and semantic color needs a scale of tints and shades for hover, pressed, border and background states. Defining those scales in OKLCH gives evenly spaced lightness; Tailwind CSS v4 defines its default palette this way. Generate one with the Tailwind color generator.

A color model is a way of writing a color down as numbers. Screens and print need different ones:

Screens add light; printers subtract it. A screen starts black and adds red, green and blue light, while ink on white paper absorbs light, so a printed color can only be as bright as the paper. Many vivid screen colors, especially bright blues and greens, cannot be reproduced with standard CMYK inks and print duller. Design in RGB or OKLCH, convert to CMYK with your printer's ICC profile, and ask for a proof.

For CSS, oklch() has been supported in all major browsers since 2023. It is the most predictable way to write colors and build scales. Convert between every format with the color converter.