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ư.

Local processing

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.

#267fd9

#d97f26

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