跳至主要內容
FreeOnlineTools Go
繁體中文

顏色Theoryfor網頁Design:APracticalGuide

免費線上顏色Theoryfor網頁Design:APracticalGuide。在瀏覽器中即時處理資料。無上傳,無註冊,完全私密。

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

LevelText sizeMin ratio
AANormal4.5:1
AALarge (≥ 18pt or 14pt bold)3.0:1
AAANormal7.0:1
AAALarge4.5:1
UI componentsGraphical objects / borders3.0:1

Color Psychology (Quick Reference)

HueRangeTraitsCommon use
Red0–15°, 345–360°Energy, urgency, passion, dangerCTA buttons, sale badges, error states
Orange15–45°Warmth, enthusiasm, playfulnessHighlights, food, youth brands
Yellow45–70°Optimism, attention, cautionWarnings, highlights, highlights
Green70–165°Growth, calm, success, natureSuccess states, eco, finance
Cyan165–195°Clarity, communication, techInfo, links, modern UI
Blue195–255°Trust, stability, professionalismBanks, SaaS, primary actions
Purple255–290°Luxury, creativity, mysteryPremium, creative, spiritual
Magenta290–345°Boldness, femininity, innovationFashion, 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

這個顏色Theoryfor網頁Design:APracticalGuide免費嗎?

是的,完全免費。無需註冊。

這個工具會上傳我的資料嗎?

不會。所有處理都在瀏覽器中本機完成。您的資料永遠不會離開您的裝置。

Related Tools