色彩理论
8个互动演示——通过实践学习，而不是阅读
颜色是人们在读任何文字之前首先感受到的东西。错误的色调传递错误的情感。低对比度使文本不可见。冲突的颜色破坏信任。这8个演示让你直接控制每个属性——拖动滑块，看理论变得显而易见。
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.
需要一位将色彩理论应用到您网站的设计师吗？
联系我们 →