Lý thuyết màu cho thiết kế web: Hướng dẫn thực tế
Lý thuyết màu cho thiết kế web: Hướng dẫn thực tế trực tuyến miễn phí. Xử lý dữ liệu tức thì trong trình duyệt của bạn. Không tải lên, không đăng ký, hoàn toàn riêng tư.
Xử lý cục bộLý thuyết màu cho thiết kế web: Hướng dẫn thực tế
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 |
Cách sử dụng
Nhập thông tin đầu vào của bạn ở trên. Kết quả được cập nhật tự động. Sử dụng nút sao chép để sao chép kết quả.
Sự riêng tư
Tất cả quá trình xử lý diễn ra trong trình duyệt của bạn. Dữ liệu của bạn không bao giờ được tải lên bất kỳ máy chủ nào.
Câu hỏi thường gặp
Lý thuyết màu cho thiết kế web: Hướng dẫn thực tế này có miễn phí không?
Có, hoàn toàn miễn phí. Không cần đăng ký.
Công cụ này có tải dữ liệu của tôi lên không?
Không. Tất cả xử lý diễn ra cục bộ trong trình duyệt của bạn. Dữ liệu của bạn không bao giờ rời khỏi thiết bị.