011 min
Why color theory began with a black dye
In 1824, Michel Eugène Chevreul became director of the dye works at the Gobelins Manufactory, a tapestry maker in Paris. People had complained about the quality of its dyes. Chevreul tested them. Some dyes were weak, as the complaints said. The black was not weak. He found it first-rate.
Cloth dyed with that black looked weak and reddish when it sat among deep blues and purples. The dye had not changed. Its neighbors had changed how it looked.
Chevreul called this effect simultaneous contrast: a color seems to shift toward the complement of whatever sits beside it, in both hue and darkness. The complement of a color is the one opposite it on the color wheel, which a later section explains. Chevreul published his full study in 1839.
The lesson went beyond one dye. A color is not a fixed property of a paint or a fabric. What a viewer sees depends on what surrounds it. Color theory is the attempt to write down rules for that behavior.
Those rules are not one law with one formula. Some are measured facts about light and the eye. Others are conventions that painters and designers agreed on. Keeping the two apart is the main skill in using color theory well.
Before the rules, there is a simpler question. If one dye can look like two different colors, what is a color?
022 min
How Newton's prism changed what color means
Isaac Newton asked that question more than a century before Chevreul. In a dark room, Newton cut a round hole, about one third of an inch wide, in a window shutter, so that one thin beam of sunlight came in. He placed a glass prism in the beam, and it bent the light so that a band of colors fell on the opposite wall. He described the experiment in his book Opticks, which carries the date 1704.
He concluded that sunlight is a mixture of rays that bend by different amounts, and that each kind of ray causes one color sensation.
Light has no color of its own
Newton argued that light rays are not themselves colored, and that they only have the power to cause the sensation of a color in the viewer. A rose or a dye looks red because it reflects some rays more than others. Color, in this view, is made by light, an object and a viewer together.
That view explains Chevreul's black cloth. If color is a sensation, the same cloth can give a different sensation in a different setting. It also explains why a designer cannot read a color from a paint chip alone.
The circle Newton drew, and what he guessed about opposites
Newton also arranged the hues of the spectrum in a circle. This was the first version of the color wheel. He guessed that two colors exactly opposite each other on the circle cancel each other's hue when their light is mixed, leaving white or gray. He offered this as a conjecture, and later work in the 19th century tested it more fully. The guess holds for mixed light. Mixed paints behave differently, because paints take light away instead of adding it.
From Goethe to the Bauhaus
Two books from the early 19th century are now called the founding documents of color theory: Goethe's Theory of Colours in 1810 and Chevreul's study of simultaneous contrast in 1839. In the early 20th century, artists who taught at or around the German Bauhaus school added more. They included Wassily Kandinsky, Johannes Itten, Faber Birren and Josef Albers. Their writing mixes opinion with studies that anyone can repeat.
Albers is the one designers still read. Josef Albers published Interaction of Color with Yale University Press in 1963, and the book has stayed in print since. It teaches through studies in which a single color is shown changing as its surroundings change.
032 min
What color theory says about hue, value and mixing
If color is a sensation, describing it takes a few attributes. Three are enough for most work. Hue is the color family, such as red, green or blue. Value, also called lightness, is how light or dark the color is. Saturation, also called chroma, is how far the color is from gray. A pale pink and a deep maroon share a hue and differ in value. A bright red and a muted red share a hue and differ in saturation.
A color wheel arranges hues in a circle. Hues that sit side by side look similar. Hues that sit opposite each other are complements. The traditional wheel taught to painters has three primary colors: red, yellow and blue. Mixing two primaries gives a secondary color: orange, green or purple. Mixing a primary with the secondary beside it gives a tertiary color, and there are six of them.
What mixing does depends on the medium.
| Model | Used for | Starting colors | What mixing does |
|---|---|---|---|
| RGB | Screens | Red, green, blue | Adds light |
| CMYK | Printing | Cyan, magenta, yellow, black | Removes light by absorption |
| RYB | Teaching painters | Red, yellow, blue | Removes light, in a simplified way |
Red, yellow and blue are not the true primaries
Traditional theory said that three pure primary colors can make every other color. Modern color science does not accept this. Any three primaries reach only a limited range of colors, called a gamut, and that range is always smaller than the range people can see. For paint and printing ink, cyan, magenta and yellow are closer to the true primaries than red, yellow and blue. Art classes still teach red, yellow and blue, so the older wheel remains common.
Adding black changes more than darkness
Painters make a color darker by adding black, which gives a shade. They make it lighter by adding white, which gives a tint. Both steps can also move the hue. Black can shift yellows, oranges and reds toward green or blue. White can shift reds and oranges toward blue. Painters correct the shift with a small amount of a neighboring color, or they darken with the complement instead of black.
042 min
Color schemes built on the wheel
The wheel is useful because it turns the choice of colors into a choice of positions. A color scheme is a set of hues picked by where they sit on the wheel. Designers use six common types.
| Scheme | How the hues are chosen | Usual effect |
|---|---|---|
| Monochromatic | One hue, varied in value and saturation | Calm and unified |
| Analogous | Hues that sit side by side, often three | Smooth, with little contrast |
| Complementary | Two hues opposite each other | Strong contrast, can feel harsh |
| Split-complementary | One hue plus the two hues beside its complement | Strong contrast, less harsh |
| Triadic | Three hues spaced evenly around the wheel | Varied but balanced |
| Tetradic | Two complementary pairs | Many hues, hard to balance |
Warm and cool give a second way to sort hues. Warm hues run from red through yellow. Cool hues run from blue-green through blue-violet. Writers have used this split since at least the late 18th century, and they disagree about exactly where the line falls.
Many designers also set proportions. A common choice is about 60% of the layout in a dominant color, 30% in a second color and 10% in an accent. This 60-30-10 rule is a convention that designers repeat. It is not a measured result.
A scheme chosen on a wheel still has to pass one more test. Chevreul's black cloth showed what that test is.
051 min
How surroundings change a color in a palette
A swatch on a card shows a color alone. A real design shows it next to other colors, and each one changes how the others look.
Three kinds of contrast
Chevreul described three effects. In simultaneous contrast, two colors seen side by side make each other look more different, as the black cloth did among the blues. In successive contrast, a person looks at a color and then at a plain gray surface, and sees a faint patch of the opposite color. In mixed contrast, the same faint patch appears on top of a different color instead of on gray. The faint patch is called an afterimage.
The practical result is that a palette cannot be judged from its swatches. A color has to be judged where it will be used, beside the colors it will touch. Changing the surroundings changes the color, which is why a palette made for a white page needs checking again in dark mode.
061 min
Where color theory's rules stop working
Even a carefully tested palette rests on rules with limits. Two limits matter most.
Harmony formulas predict less than they promise
Many writers have published formulas for color combinations that look good, and the schemes above are the best known. But responses to color depend on age, personal taste, culture, the setting, the light in the room, and passing fashion. People can tell apart around 2.3 million colors, so the number of possible combinations is too large for one formula to cover. Because responses to color depend on the viewer and the setting, scheme formulas can guide a first draft but cannot promise a good result. Test a scheme with real content before trusting it.
Color meanings are learned
Red can mean excitement, romance or good luck. It can also signal danger or urgency. Color meanings are learned in a culture and change with context, so a color has no single built-in message. A claim such as "blue builds trust" describes a habit in some places, not a property of blue.
072 min
How color theory shows up in interfaces
Chevreul's problem did not end with dyes. It returns whenever text sits on a colored background.
In 2019, two designers at Stripe, Daryl Koopersmith and Wilson Miner, described how their team rebuilt the colors of the Stripe Dashboard. First the team audited its products. The Stripe team's audit found that none of the default small-text colors in its products, except black, met the contrast minimum in the web accessibility guidelines. The colors came from the brand palette. As text on white, they were too faint.
The first fix was to move each text color one step darker on its scale. Some colors still failed at the next step. The ones that passed had lost much of their brightness and vibrancy. The scales had been built in HSL, a color model that sets lightness with a formula over red, green and blue values. The eye does not follow that formula. At the same HSL lightness number, the eye sees yellow as lighter than blue.
So the team built a tool that works in CIELAB, a color space designed so that colors of equal lightness look equally light to people. In it, they adjusted each hue until every scale had the same contrast range. Yellow ended with the same contrast range as blue, and the colors still looked like Stripe's. The earlier palette matched the brand and failed the reader. The rebuilt one served both.
Where the numbers come from
The contrast ratio is a number from 1:1, where two colors give off the same amount of light, to 21:1, which is black on white. WCAG 2.2 Success Criterion 1.4.3, Contrast (Minimum), sets the lowest allowed ratio at 4.5:1 for normal text and 3:1 for large text. The 3:1 figure is the minimum named in two earlier standards, ISO 9241-3 and ANSI/HFES 100-1988. The higher 4.5:1 figure allows for the contrast that people lose with moderately low visual acuity, color vision deficiency and aging. Contrast covers the measurement in more detail.
081 min
Color theory and differences in color vision
Contrast numbers assume that every viewer sees the same hues. Many people do not.
About 1 in 12 men have some form of color vision deficiency, according to the US National Eye Institute. The most common kind makes red and green hard to tell apart. Another kind confuses blue with yellow. Most people with the condition are born with it.
When color is the only signal
Picture a dashboard for a software team. A green dot means a build passed. A red dot means it failed. For a reader with red-green color vision deficiency, the two dots can look nearly alike, and a failed build can go unnoticed.
WCAG 2.2 Success Criterion 1.4.1, Use of Color, says that color must not be the only visual way to convey information, show an action, prompt a response or tell elements apart. The fix is a second signal: the word Passed or Failed, or two shapes such as a check mark and a cross. Color then adds speed for readers who can use it, and nothing is lost for readers who cannot. The wider practice is covered under accessibility.
091 min
Color theory vs. nearby concepts
Four neighbors are easy to confuse with color theory. One question separates each of them.
| Concept | The question it answers | How it differs from color theory |
|---|---|---|
| Not in the library yetColor psychology | ||
| Not in the library yetColor science | ||
| Color wheel | ||
| PsychologyColor constancy |
The split between color theory and color science grew during the 19th century. Artists kept the older categories, and scientists measured color with new methods. The two still differ in vocabulary and in how sure they sound.
101 min
Applying color theory in a design
Chevreul's finding gives a plan for any design that uses color.
- Decide what each color does before choosing it. Text, actions, status and background are different jobs.
- Check lightness first. Look at the design in grayscale, then measure the contrast ratio of every text and background pair against 4.5:1.
- Keep the number of hues small. Let one accent color mark what matters most, which is how color supports visual hierarchy.
- Never let color carry a meaning alone. Add a word, a shape or a position.
- Treat a scheme such as complementary or triadic as a candidate, then test it with real content beside the colors it will touch.
- Check the result on the screens and in the lighting where people will use it.
A color choice that cannot be defended by its job, its contrast number and a test in context is a guess.
111 min
Color theory questions
Do I need to learn the color wheel to design interfaces? You can start without it, but it explains why schemes work. For interfaces, check lightness and contrast first, because readable text depends on them, and use the wheel to choose and limit your hues.
Is it true that blue builds trust? Color meanings are learned within a culture and change with context, so no color carries one fixed message. Treat "blue builds trust" as a guess to test with your own users, not as a rule.
What is the difference between a tint, a shade and a tone? A tint is a color with white added. A shade is a color with black added. A tone is a color with gray added, which lowers its saturation while the hue stays close to the original.
How many colors should a palette have? There is no fixed number. A small set is easier to check, because every extra hue needs its own contrast test and its own second signal. A common starting point is one accent plus neutrals.
?4 questions
Questions people ask
Do I need to learn the color wheel to design interfaces?
Is it true that blue builds trust?
What is the difference between a tint, a shade and a tone?
How many colors should a palette have?
§8 sources
Sources
Wikipedia, "Color theory":
Wikipedia, "Michel Eugène Chevreul", on his work at the Gobelins dye works and the term simultaneous contrast:
Isaac Newton, Opticks, or, A Treatise of the Reflections, Refractions, Inflections and Colours of Light (first published 1704; this is the fourth edition, 1730), Project Gutenberg:
Josef Albers, Interaction of Color, 50th Anniversary Edition, Yale University Press:
Show all 8 sourcesShow fewer sources
Daryl Koopersmith and Wilson Miner, "Designing accessible color systems", Stripe, 2019:
W3C WAI, "Understanding Success Criterion 1.4.3: Contrast (Minimum)", WCAG 2.2:
W3C WAI, "Understanding Success Criterion 1.4.1: Use of Color", WCAG 2.2:
National Eye Institute, "Color Blindness":
