색상 Theory for 웹 Design: A Practical Guide
무료 온라인 색상 Theory for 웹 Design: A Practical Guide. 브라우저에서 즉시 데이터를 처리합니다. 업로드 없음, 가입 없음, 완전히 비공개.
Local processingColor Theory for Web Design — A Practical Guide
The Color Wheel
The color wheel arranges hues in a circle (0° red at top, going clockwise). Click anywhere on the wheel below to pick a base hue, then explore the harmony schemes.
Selected hue: 210° · #267fd9
Harmony Schemes
Complementary: Two colors directly opposite on the color wheel (180° apart). High contrast and vibrancy — use sparingly for accents, not for large body areas.
WCAG Contrast (Quick Reference)
Contrast ratio = (L₁ + 0.05) / (L₂ + 0.05), where L is relative luminance (0.2126·R + 0.7152·G + 0.0722·B with gamma correction). Higher is better; 1:1 = no contrast, 21:1 = max (black on white).
| Level | Text size | Min ratio |
|---|---|---|
| AA | Normal | 4.5:1 |
| AA | Large (≥ 18pt or 14pt bold) | 3.0:1 |
| AAA | Normal | 7.0:1 |
| AAA | Large | 4.5:1 |
| UI components | Graphical objects / borders | 3.0:1 |
Color Psychology (Quick Reference)
| Hue | Range | Traits | Common use |
|---|---|---|---|
| Red | 0–15°, 345–360° | Energy, urgency, passion, danger | CTA buttons, sale badges, error states |
| Orange | 15–45° | Warmth, enthusiasm, playfulness | Highlights, food, youth brands |
| Yellow | 45–70° | Optimism, attention, caution | Warnings, highlights, highlights |
| Green | 70–165° | Growth, calm, success, nature | Success states, eco, finance |
| Cyan | 165–195° | Clarity, communication, tech | Info, links, modern UI |
| Blue | 195–255° | Trust, stability, professionalism | Banks, SaaS, primary actions |
| Purple | 255–290° | Luxury, creativity, mystery | Premium, creative, spiritual |
| Magenta | 290–345° | Boldness, femininity, innovation | Fashion, beauty, gradients |
How to Use
Enter your input above. The result updates automatically. Use the copy button to copy the result.
Privacy
All processing happens in your browser. Your data is never uploaded to any server.
FAQ
이 색상 Theory for 웹 Design: A Practical Guide은 무료인가요?
네, 완전히 무료입니다. 가입이 필요 없습니다.
이 도구는 내 데이터를 업로드하나요?
아니요. 모든 처리는 브라우저에서 로컬로 이루어집니다. 데이터는 기기를 떠나지 않습니다.