Color Theory Basics: The Color Wheel, Color Schemes and Contrast
Choosing colors that work together can feel like a talent you either have or don’t. In fact most good color schemes follow a few simple rules about where colors sit on the color wheel. Here’s where the wheel came from, the classic schemes built on it, and how to check that text on your colors is easy to read.
Want to try it out? The color palette generator builds all six schemes from any color, with shades and contrast checks.
Where the color wheel came from
In 1666 Isaac Newton passed sunlight through a glass prism and saw it split into a rainbow. In his book Opticks (1704), he did something new with that spectrum: he bent it round into a circle, joining red back to violet. Colors opposite each other on his circle, he noticed, combined to make something close to white.
Artists took the idea further. In the 1760s the English engraver Moses Harris printed a color wheel built on red, yellow and blue, the painter’s primaries. In the 20th century, Johannes Itten, who taught at the Bauhaus art school, popularized the 12-color wheel and the color schemes still taught today.
Two color wheels: paint and light
There’s a catch: the wheel depends on whether you’re mixing paint or light.
| Paint (subtractive) | Light on screens (additive) | |
|---|---|---|
| Primary colors | Red, yellow, blue (traditional) or cyan, magenta, yellow (printing) | Red, green, blue |
| All primaries mixed | Dark brown or black | White |
| Opposite of red | Green | Cyan |
| Opposite of blue | Orange | Yellow |
Screens make every color by mixing red, green and blue light, so digital tools, including the palette generator here, use the RGB color wheel. If you’re designing for paint or print, the traditional red-yellow-blue wheel is closer to how pigments actually behave.
The three properties of a color
Every color can be described by three things:
- Hue: where it sits on the wheel, measured as an angle from 0° to 360°. Red is 0°, green 120°, blue 240°.
- Saturation (or chroma): how vivid it is, from gray to fully colorful.
- Lightness (or value): how light or dark it is, from black to white.
Color schemes are mostly about hue. But lightness matters just as much for whether a design works, especially for readable text.
The six classic color schemes
Each scheme is a pattern of positions on the wheel. Starting from one base color, you turn the wheel by a fixed angle to find its partners.
Analogous
Colors next to each other on the wheel, up to about 30° either side: blue, blue-green and green, for example. Analogous schemes feel calm and natural, like a forest or a sunset, because those are the color relationships we see most in nature. They’re a safe choice for backgrounds and quiet designs, but can lack a strong accent.
Monochromatic
One hue in lighter and darker versions. It’s the easiest scheme to get right and always looks consistent. Add a neutral like gray or white to keep it from feeling flat.
Complementary
The base color and the color directly opposite it (180°): blue and orange, for example. Opposites make each other look more intense, which is why complementary pairs are eye-catching, and why they can clash if used in equal amounts. Use one as the main color and the other sparingly, for buttons and highlights.
Split complementary
The base color plus the two colors either side of its opposite (150° and 210°). You get most of the contrast of a complementary scheme, with less tension. It’s a good choice for beginners who want something lively.
Triadic
Three colors evenly spaced, 120° apart: red, green and blue on a screen wheel, or red, yellow and blue on a painter’s. Triadic schemes are vibrant and balanced. Let one color lead and use the other two as supporting accents.
Square
Four colors evenly spaced, 90° apart. Square schemes are rich and varied, and the hardest to balance. They work best when one color dominates and the others appear in small amounts.
Balancing a palette: the 60-30-10 rule
A common interior design guideline works well for screens and print too:
- 60% of the space in a main, usually quiet, color.
- 30% in a secondary color.
- 10% in an accent, the color you want people to notice.
Whichever scheme you pick, giving the colors unequal roles is what stops it looking busy.
Shades and why they’re tricky
Designers rarely use a palette’s colors exactly as they are. They use a scale of lighter and darker versions of each hue: pale tints for backgrounds, mid-tones for buttons, and dark shades for text. Design systems often number these from 50 (nearly white) to 950 (nearly black).
Making an even scale is harder than it sounds, because our eyes don’t see lightness evenly across hues: a pure yellow looks far lighter than a pure blue at the same “lightness” setting. Newer color spaces such as OKLCH, designed to match human perception, fix this, which is why modern CSS and design tools have started using them. The palette generator builds its shade scales this way.
Contrast: making text readable
A beautiful palette is no use if people can’t read the text on it. Contrast ratio measures the difference in brightness between text and its background, from 1:1 (no difference) to 21:1 (black on white).
The Web Content Accessibility Guidelines (WCAG) set the standards most websites follow:
| Level | Normal text | Large text (about 24px, or 19px bold) |
|---|---|---|
| AA (minimum) | At least 4.5:1 | At least 3:1 |
| AAA (enhanced) | At least 7:1 | At least 4.5:1 |
A few practical tips:
- Check every color you put text on. Mid-tones, like medium blue or orange, are where white and black text both struggle.
- Don’t rely on color alone. About 1 in 12 men and 1 in 200 women have some form of color blindness, most often difficulty telling red from green. Pair color with labels, icons or patterns.
- Saturated colors on saturated colors vibrate. Bright red text on bright blue is hard to read even when the contrast ratio looks fine. Put text on light or dark neutrals.
Putting it together
- Start with one color you like, or a brand color.
- Choose a scheme: analogous or monochromatic for calm, complementary or split complementary for energy, triadic or square for variety.
- Give each color a role using 60-30-10.
- Build shades for backgrounds, borders and text.
- Check the contrast of every text and background pair.
The color palette generator does steps 2, 4 and 5 for you: pick a base color, switch between schemes, and copy the result as CSS.