색채 이론
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.
색채 이론을 귀하의 사이트에 적용할 디자이너가 필요하신가요?
이야기해봐요 →