color Theory for web Design: A Practical Guide
color Theory for web Design: A Practical Guide ออนไลน์ฟรี. ประมวลผลข้อมูลทันทีในเบราว์เซอร์ของคุณ. ไม่อัปโหลด ไม่ต้องสมัครสมาชิก เป็นส่วนตัวทั้งหมด.
การประมวลผลในท้องถิ่นcolor Theory for web Design: A Practical Guide
Color 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 |
วิธีใช้
ป้อนข้อมูลของคุณด้านบน ผลลัพธ์จะอัปเดตโดยอัตโนมัติ ใช้ปุ่มคัดลอกเพื่อคัดลอกผลลัพธ์
ความเป็นส่วนตัว
การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ข้อมูลของคุณจะไม่ถูกอัพโหลดไปยังเซิร์ฟเวอร์ใด ๆ
คำถามที่พบบ่อย
ทฤษฎีสีสำหรับการออกแบบเว็บไซต์: คู่มือปฏิบัติฟรีหรือไม่
ใช่ สมบูรณ์ฟรี ไม่จำเป็นต้องลงทะเบียน
เครื่องมือนี้อัปโหลดข้อมูลของฉันหรือไม่
ไม่ การประมวลผลทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ของคุณ ข้อมูลของคุณจะไม่ออกจากอุปกรณ์ของคุณ