Color Theory
8 interactive demos — learn by doing, not reading
Color is the first thing people feel before they read a single word. A wrong hue signals the wrong emotion. Low contrast makes text invisible. Clashing colors break trust. These 8 demos give you hands-on control of every property — drag a slider and watch the theory become obvious.
Hue
The pure color itself — its position on the color wheel. 0° = red, 120° = green, 240° = blue.
Hue alone doesn't make a color beautiful — saturation and lightness do that. But hue is the identity: it's the difference between red and blue.
Saturation
How vivid or muted a color is. 0% is greyscale, 100% is the most intense version of the hue.
Low saturation = calm, professional, neutral. High saturation = energetic, bold, attention-grabbing. UI design often uses 40–70% to stay pleasant without screaming.
Lightness
How much white or black is mixed in. 0% is always black, 100% is always white, 50% is the pure color.
Shades (lower lightness) feel deep and serious. Tints (higher lightness) feel airy and soft. The same hue tells a different story depending on its lightness.
Complementary Colors
Colors directly opposite on the color wheel (180° apart). Maximum contrast — they intensify each other.
This text uses the complement as its color — maximum contrast, maximum punch.
Subdued background, complement accent — elegant and high impact.
Complementary pairs create visual tension. Used in call-to-action buttons, logos and data visualisation. Use one color dominant and the other as accent.
Analogous Colors
Three colors adjacent on the wheel (±30°). They share a temperature, feel cohesive, and never clash.
Analogous palettes are safe and harmonious — think ocean blues/greens or sunset oranges/reds. Use them when you want a calm, unified feel. Add a complementary accent to avoid boredom.
Triadic Colors
Three colors evenly spaced 120° apart. Bold contrast with visual balance — harder to pull off but very striking.
The classic triadic is red/yellow/blue. Triadic palettes are vibrant and playful — great for children's products, creative brands, and anything that needs energy. Let one color dominate.
Tints & Shades
Adding white (tint) or black (shade) to a base color. Essential for building design system palettes.
Design tokens like Tailwind's blue-100 through blue-900 are exactly this. Pick one hue, generate 9 levels, and you have a complete, production-ready color scale.
Contrast & Accessibility (WCAG)
The contrast ratio between text and background determines readability. WCAG 2.1 sets minimum thresholds.
The quick brown fox
Body text at normal size. Can you read this comfortably? WCAG AA requires 4.5:1 for text under 18px.
contrast ratio: 13.40:1
AA Normal (4.5:1) is the legal minimum for body text. AAA (7:1) is ideal. Large text (18px+) and UI components only need 3:1. Never sacrifice readability for aesthetics.
Need a designer who applies color theory to your site?
Let's talk →