An interactive guide to color theory — from the basics to professional techniques.
Color is one of the most powerful tools in design, art, and communication. Understanding how colors work together lets you create visuals that are not only beautiful but psychologically effective.
🎡 Color Wheel 🌈 HSL Model 🎵 Harmonies 🧠 Psychology ♿ Accessibility ✅ Quiz
The foundation of all color theory.
Click the wheel to spin it!
Primary colors are the building blocks — they cannot be made by mixing other colors.
Mix two primaries to get a secondary color.
Mix a primary with an adjacent secondary — six more hues to expand your palette.
Hue, Saturation, and Lightness — the most intuitive color model.
The pure color on the spectrum. 0° = Red, 120° = Green, 240° = Blue.
How vivid or gray the color is. 0% = pure gray. 100% = full chroma.
How dark or light. 0% = black. 50% = pure color. 100% = white.
Proven formulas for colors that work together beautifully.
How colors influence emotion, behavior, and perception.
Colors are not just visual — they carry deep psychological weight. Tap any color to discover its emotional associations.
Good design is usable by everyone.
The WCAG (Web Content Accessibility Guidelines) sets standards for color contrast to ensure text is readable for people with visual impairments.
The quick brown fox jumps over the lazy dog
Small text sample · 14px
AA (minimum): 4.5:1 for normal text, 3:1 for large text
AAA (enhanced): 7:1 for normal text, 4.5:1 for large text
Anything below 4.5:1 fails accessibility standards for body text.
6 questions to check your color theory mastery.