Color Theory for Web Designers

网页设计师的色彩理论

Color is one of the most powerful tools in a designer's kit. Done well, it guides the eye, signals hierarchy, and evokes emotion. Done poorly, it can wreck readability, exclude users with vision impairments, and make a polished interface feel cheap. This guide covers the practical minimum: how color is described, how to combine it, and how to keep it accessible.

色彩是设计师工具箱里最有力的工具之一。用得好，能引导视线、提示层级、唤起情感；用得差，会破坏可读性、排斥视障用户，让精致的界面显得廉价。本指南覆盖最低必要知识：色彩如何描述、如何搭配，以及如何保持无障碍。

How color is described

如何描述颜色

Three models dominate the web:

网页上有三种主流的色彩模型：

• HEX — a six-character code starting with #, like #3b82f6. Common in CSS and design tools.
• HEX —— 以 # 开头的六位代码，例如 #3b82f6。在 CSS 和设计工具中常见。
• RGB — three numbers from 0 to 255 for red, green, and blue. rgb(59, 130, 246) is the same color as #3b82f6.
• RGB —— 三个 0–255 的数，分别表示红、绿、蓝。rgb(59, 130, 246) 和 #3b82f6 是同一种颜色。
• HSL — hue (0–360°), saturation (0–100%), and lightness (0–100%). Often the most intuitive for humans because you can adjust one channel at a time.
• HSL —— 色相 (0–360°)、饱和度 (0–100%)、明度 (0–100%)。通常对人类最直观，因为可以单独调整一个维度。

Try the color picker to convert any color between HEX, RGB, and HSL instantly.

用 颜色选择器 在 HEX、RGB、HSL 之间即时转换任意颜色。

Building a palette

构建配色方案

A typical product palette has four roles:

一个产品级配色方案通常包含四种角色：

1. Primary — your brand color, used for the main call-to-action and active states.
2. 主色 —— 品牌色，用于主要 CTA 和激活态。
3. Secondary — a supporting color for secondary actions, illustrations, or accents.
4. 辅色 —— 用于次要操作、插图或点缀的辅助色。
5. Neutral — grays for text, borders, and backgrounds. A good neutral scale is more important than most designers realize.
6. 中性色 —— 用于文本、边框、背景的灰色。优秀的中性色阶比多数设计师意识到的更重要。
7. Semantic — success (green), warning (amber), error (red), info (blue). These communicate state across the product.
8. 语义色 —— 成功（绿）、警告（琥珀）、错误（红）、信息（蓝），用于跨产品传达状态。

Three reliable ways to combine colors

三种可靠的配色组合方式

1. Monochromatic. Different lightnesses and saturations of a single hue. Always safe, very cohesive. Best for serious, content-heavy products.

1. 单色搭配。同一色相的不同明度与饱和度。永远安全、统一感强。最适合内容密集、严肃的产品。

2. Analogous. Two or three hues that sit next to each other on the color wheel (e.g. blue and teal). Calm and harmonious, but low contrast — use one as the dominant and the others sparingly.

2. 类比搭配。色轮上相邻的 2–3 个色相（例如蓝和青绿）。平静、协调，但对比度低 —— 用一种作为主色，其他少量点缀。

3. Complementary. Two hues opposite each other (e.g. blue and orange). High contrast and energetic. Use the complementary color for accents only, otherwise the page feels loud.

3. 互补搭配。色轮上相对的两个色相（例如蓝和橙）。对比强、富有活力。互补色只用作强调，否则页面会显得嘈杂。

Contrast is not optional

对比度不是可选项

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background:

Web 内容无障碍指南（WCAG）规定了文本与背景的最低对比度：

• 4.5:1 for normal body text (WCAG AA)
• 4.5:1 用于正文文本（WCAG AA）
• 3:1 for large text (≥18pt regular, or ≥14pt bold) and UI components (WCAG AA)
• 3:1 用于大字号文本（≥18pt 常规或 ≥14pt 粗体）以及 UI 组件（WCAG AA）
• 7:1 for normal body text (WCAG AAA, stricter)
• 7:1 用于正文文本（WCAG AAA，更严格）

Contrast is computed using relative luminance — a measure of perceived brightness that accounts for how human eyes weight different wavelengths. The math is in the color picker: it shows the contrast ratio of your current color against white. Aim for 4.5:1 minimum for any text that carries meaning.

对比度通过"相对亮度"计算 —— 这是考虑人眼对不同波长敏感度差异后的感知亮度度量。具体算法在 颜色选择器 中可以看到：它会显示当前颜色与白色的对比度。任何承载信息的文本至少要达到 4.5:1。

Don't rely on color alone

不要只靠颜色传达信息

About 8% of men and 0.5% of women have some form of color vision deficiency, most commonly red-green. If a form error is shown only by turning the field red, a red-green colorblind user will miss it. Pair color with another signal: an icon, a label, an underline. WCAG calls this "not relying on color alone" (Success Criterion 1.4.1).

约 8% 的男性和 0.5% 的女性存在某种形式的色觉缺陷，最常见的是红绿色盲。如果表单错误只用"输入框变红"来提示，红绿色盲用户会错过。再加一个信号：图标、标签、下划线。WCAG 称之为"不仅靠颜色传达信息"（成功标准 1.4.1）。

Common mistakes

常见错误

• Too many hues. Stick to one or two main colors plus neutrals. A rainbow is noise.
• 色相过多。坚持一到两个主色加中性色。彩虹是噪音，不是设计。
• Pure black text on pure white background. Slightly off-white backgrounds and slightly off-black text reduce eye strain.
• 纯黑文本配纯白背景。略微偏灰的背景与文本更护眼。
• Low-contrast gray text. Many sites use #999 on white. That is only 2.85:1 — fails AA. Use at least #595959 on white for body text.
• 低对比度灰色文本。很多网站在白底上用 #999，对比度只有 2.85:1 —— 不达 AA。正文至少要用 #595959。
• Different blue for every link. Pick one link color and reuse it everywhere. Consistency builds trust.
• 每个链接用不同的蓝色。全站统一一种链接色，一致性建立信任。
• Color that competes with content. Saturated backgrounds behind long text hurt readability. Keep text on near-white or near-black.
• 背景色与内容抢戏。长文本配高饱和背景会严重破坏可读性。文字应放在近白或近黑的背景上。

Quick workflow

快速工作流

1. Pick a primary hue in HSL — e.g. hsl(217, 91%, 60%).
2. 在 HSL 中选一个主色相 —— 例如 hsl(217, 91%, 60%)。
3. Generate a scale by varying lightness: 95, 90, 80, 70, 60, 50, 40, 30, 20, 10.
4. 通过改变明度生成色阶：95, 90, 80, 70, 60, 50, 40, 30, 20, 10。
5. Build a neutral gray scale the same way (use a desaturated version of your primary for the warmest gray).
6. 用同样的方法构建中性灰阶（暖灰可以基于去饱和的主色）。
7. Test every text/background pair with the color picker until they pass 4.5:1.
8. 用 颜色选择器 检查每对文本/背景组合，确保对比度 ≥ 4.5:1。
9. Use the same accent color (a slightly desaturated or darkened primary) consistently for interactive elements.
10. 交互元素统一使用同一种强调色（主色的低饱和或加深版）。

Bottom line

总结

Great color choices on the web are mostly about restraint, contrast, and accessibility. A small, well-chosen palette with rigorous contrast will outperform a rainbow every time. Open the color picker to start exploring — every value is computed in your browser.

网页上的好配色，归根到底是克制、对比和无障碍。一个小而精、对比度达标的配色方案，永远胜过彩虹。打开 颜色选择器 开始探索 —— 所有数值都在你的浏览器中计算。