跳到主要内容
FreeOnlineTools Go
简体中文

颜色TheoryforWebDesign:APracticalGuide

免费在线颜色TheoryforWebDesign:APracticalGuide。在浏览器中即时处理数据。无上传,无注册,完全私密。

本地加工

颜色TheoryforWebDesign:APracticalGuide

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

如何使用

在上面输入您的信息。结果自动更新。使用复制按钮复制结果。

隐私

所有处理都发生在您的浏览器中。您的数据永远不会上传到任何服务器。

常见问题

这个颜色TheoryforWebDesign:APracticalGuide免费吗?

是的,完全免费。无需注册。

这个工具会上传我的数据吗?

不会。所有处理都在浏览器中本地完成。您的数据永远不会离开您的设备。

相关工具