Color Academy
Do not memorize rules — see the relationships yourself. Switch a teaching view, click the 12-hue wheel and build an intuition for color.
Three-step start
- 1Pick a view: switch between Overview, Primaries, Secondaries, Complements, HSL, Temperature and Contrast on the right; the wheel highlights along.
- 2Verify by hand: follow each prompt and click or hover the wheel to watch mixing, complements, lightness scales and contrast grades change live.
- 3Go build: use the deep link at the bottom of each view to turn the idea into a real palette in the matching tool.
Color relationships in one line each
- Primaries (3): red, yellow and blue — cannot be mixed from other colors and form an equilateral triangle on the wheel (each pair 120 degrees apart).
- Secondaries (3): orange, green and violet — from equal mixes of two primaries (red plus yellow is orange, yellow plus blue is green, blue plus red is violet).
- Complements: pairs 180 degrees apart (red/green, blue/orange, yellow/violet) — the strongest contrast when placed together, usually one warm and one cool.
- HSL: hue decides which color, saturation how vivid, lightness how bright; keep the hue and vary lightness for a lightness scale.
- Temperature and contrast: red, orange and yellow are warm; green, blue and violet are cool. Beyond looking good, text must stay legible — body text needs at least 4.5:1.
Color knowledge quiz
Test as you learn — wrong answers show an explanation. Eight questions.
Frequently asked questions
In what order are colors arranged on the wheel?
The wheel lays hue out as a gradient ring: red to orange to yellow to green to blue to violet and back to red. Neighbors blend smoothly; colors directly opposite differ most.
What is the difference between primary and secondary colors?
Red, yellow and blue are the traditional primaries and cannot be mixed from other colors. Mixing any two primaries equally gives the secondary between them: red plus yellow is orange, yellow plus blue is green, blue plus red is violet.
What are complementary colors and why is the contrast strong?
Complements sit 180 degrees apart, directly opposite each other: red and green, blue and orange, yellow and violet. Placed side by side they create the strongest, most eye-catching contrast, usually one warm and one cool.
What do H, S and L mean?
H is hue — which color, an angle from 0 to 360 degrees. S is saturation — how vivid. L is lightness — how bright. Keeping the hue and varying lightness gives a lightness scale.
Why does text need contrast, and how much is enough?
Enough contrast between foreground and background keeps text legible and helps low-vision users. WCAG requires at least 4.5:1 (AA) for body text and 3:1 for large text; AAA raises these to 7:1 and 4.5:1.
After learning the theory, which tool should I use?
Each lesson links to a tool: complementary, analogous and triadic relationships go to the color wheel, lightness scales to the palette generator, contrast to the WCAG checker, and ready-made sets to the inspiration gallery.