hierarchy-color-and-tone

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Hierarchy through color and tone

借助颜色与色调构建视觉层级

Color is the most attention-grabbing visual dimension and the most accessibility-loaded. Used well, it can establish a hierarchy of importance at a glance. Used poorly, it creates noisy, fatiguing, or inaccessible UIs. This skill is about using color and tone deliberately, as a third hierarchy axis on top of size and weight — almost never as the only hierarchy signal.

颜色是最吸引注意力的视觉维度，同时也是与无障碍设计关联最紧密的元素。使用得当，它能让用户一眼识别出内容的重要性层级；使用不当，则会打造出嘈杂、易疲劳或不符合无障碍要求的UI。本技能旨在教你有意识地运用颜色与色调，将其作为尺寸和字重之外的第三层级轴——几乎从不将其作为唯一的层级信号。

When this is the decisive sub-aspect

何时需重点关注此子领域

You're picking the primary color, accent palette, and neutral ramp for a design system.
You're designing status badges, semantic colors (success/warning/danger), or a chart palette.
You have a layout where size and weight hierarchy work but the page still feels "flat" or "monochrome."
You're trying to fix a "noisy" UI — too many colors, all competing.
You're checking accessibility and need to keep hierarchy intact while satisfying contrast requirements.

你正在为设计系统选择主色、强调色板和中性色阶。
你正在设计状态徽章、语义色彩（成功/警告/危险）或图表配色。
你的布局中，尺寸和字重层级已生效，但页面仍显得“平淡”或“单调”。
你试图修复一个“嘈杂”的UI——颜色过多，彼此争夺注意力。
你正在检查无障碍设计，需要在满足对比度要求的同时保持层级结构完整。

Core ideas

核心理念

Tone (value/contrast) is the universal hierarchy axis

色调（明度/对比度）是通用的层级轴

Value is how light or dark a color is; contrast is the value difference between figure and ground. Tone hierarchy works across hue, theme (light/dark), color blindness, and grayscale rendering. It's the most robust hierarchy dimension you have.

A workable tone ladder for foreground text on a light background:

primary text       hsl(0 0% 9%)      contrast 19.9:1   /* near-black */
secondary text     hsl(0 0% 35%)     contrast  9.9:1
tertiary text      hsl(0 0% 50%)     contrast  6.4:1
disabled text      hsl(0 0% 70%)     contrast  3.6:1   /* WCAG AA fails for body */

Use this ladder additively with size and weight:

display

is large + heavier and highest contrast;

caption

is small + light and lowest contrast. The three axes compound.

Mirror the ladder for dark themes (light values on a dark ground), tuned for the different perceptual response to light-on-dark.

明度指颜色的明暗程度；对比度指图形与背景之间的明度差异。色调层级适用于所有色相、主题（浅色/深色）、色盲场景以及灰度渲染。它是你拥有的最可靠的层级维度。

适用于浅色背景上前景文本的实用色调阶梯：

primary text       hsl(0 0% 9%)      contrast 19.9:1   /* near-black */
secondary text     hsl(0 0% 35%)     contrast  9.9:1
tertiary text      hsl(0 0% 50%)     contrast  6.4:1
disabled text      hsl(0 0% 70%)     contrast  3.6:1   /* WCAG AA fails for body */

将此阶梯与尺寸和字重叠加使用：

display

类文本是大尺寸+粗字重+最高对比度；

caption

类文本是小尺寸+细字重+最低对比度。三个维度相互强化。

为深色主题镜像此阶梯（深色背景上的浅色值），调整以适配人眼对“浅色-on-深色”的不同感知反应。

Color (hue) carries categorical meaning, not rank

颜色（色相）承载分类意义，而非等级

Hue is a categorical signal: red, blue, green are different kinds, not different amounts. Using hue to rank items ("red is most important, orange is next, yellow is third") fails for colorblind viewers and contradicts cultural expectations.

Use hue to encode category or state, not rank:

Status semantics: green = success, yellow = warning, red = danger/destructive.
Brand emphasis: the primary brand color marks the action the brand wants you to take.
Categorical data: chart series, tag colors, project labels.

For ranking, use tone (value) and saturation, which behave like amounts.

色相是分类信号：红、蓝、绿代表不同类型，而非不同等级。用色相对项目排序（“红色最重要，橙色次之，黄色第三”）对色盲用户无效，且违背文化预期。

使用色相来编码类别或状态，而非等级：

状态语义：绿色=成功，黄色=警告，红色=危险/破坏性操作。
品牌强调：品牌主色用于标记品牌希望用户执行的操作。
分类数据：图表系列、标签颜色、项目标签。

对于排序，请使用色调（明度）和饱和度，它们的表现更接近“量级”。

Saturation distinguishes emphasis from background

饱和度区分重点元素与背景

Saturated colors call for attention; desaturated colors recede. A useful pattern: full-saturation for emphasis, desaturated/muted for background.

primary action       full saturation, full hue       /* "Save" button */
recommended option   medium saturation               /* hover, selected state */
disabled / inactive  desaturated to grey             /* unavailable items */

When a brand color appears everywhere at full saturation, it loses meaning — the eye dismisses it as decoration. Reserve saturation for the things you want noticed.

高饱和度颜色吸引注意力；低饱和度颜色则退居次要位置。一个实用模式：高饱和度用于重点元素，低饱和度/柔和色调用于背景。

primary action       full saturation, full hue       /* "Save" button */
recommended option   medium saturation               /* hover, selected state */
disabled / inactive  desaturated to grey             /* unavailable items */

当品牌色以全饱和度出现在所有地方时，它会失去意义——用户会将其视为装饰而忽略。请将高饱和度留给你希望用户注意的元素。

One primary color, one or two semantic colors, the rest neutral

一种主色，一到两种语义色，其余为中性色

A common failure mode: the brand has a primary, secondary, tertiary, and accent color, plus warning, error, success, info. Eight colors in active use means the eye can't tell what means what.

A robust default palette has three roles in active color:

Primary — the brand color, used for primary actions and selection states.
Destructive — red, used only for destructive actions and errors.
Success / muted positive — used sparingly for confirmation states and positive deltas.

Everything else lives in the neutral ramp (5–10 grey values from background to primary text). Neutrals do most of the work; color is reserved for moments.

常见的错误模式：品牌有主色、辅助色、第三辅助色、强调色，再加上警告、错误、成功、信息色。同时使用八种颜色会让用户无法分辨每种颜色的含义。

一个可靠的默认配色方案包含三种活跃色彩角色：

主色——品牌色，用于主要操作和选中状态。
破坏性色——红色，仅用于破坏性操作和错误提示。
成功/柔和积极色——谨慎用于确认状态和正向变化。

所有其他元素均使用中性色阶（从背景到主文本的5-10种灰色调）。中性色承担大部分视觉工作；颜色仅用于特定时刻。

Build a neutral ramp

构建中性色阶

A useful neutral ramp at 9 stops:

neutral-50    background, lightest                hsl(0 0% 98%)
neutral-100   subtle background, hover            hsl(0 0% 96%)
neutral-200   borders, dividers                   hsl(0 0% 92%)
neutral-300   strong borders, disabled inputs     hsl(0 0% 85%)
neutral-400   placeholder text, icons             hsl(0 0% 65%)
neutral-500   muted text, captions                hsl(0 0% 50%)
neutral-600   secondary text                      hsl(0 0% 40%)
neutral-700   primary body text                   hsl(0 0% 27%)
neutral-800   strong text, headings               hsl(0 0% 18%)
neutral-900   highest contrast, display text      hsl(0 0% 9%)

For dark themes, invert (but slightly compress, since white-on-black is more glaring than black-on-white).

When you find yourself reaching for a "fourth" colored element on a page, stop. It probably belongs in the neutral ramp.

包含9个档位的实用中性色阶：

neutral-50    background, lightest                hsl(0 0% 98%)
neutral-100   subtle background, hover            hsl(0 0% 96%)
neutral-200   borders, dividers                   hsl(0 0% 92%)
neutral-300   strong borders, disabled inputs     hsl(0 0% 85%)
neutral-400   placeholder text, icons             hsl(0 0% 65%)
neutral-500   muted text, captions                hsl(0 0% 50%)
neutral-600   secondary text                      hsl(0 0% 40%)
neutral-700   primary body text                   hsl(0 0% 27%)
neutral-800   strong text, headings               hsl(0 0% 18%)
neutral-900   highest contrast, display text      hsl(0 0% 9%)

对于深色主题，反转色阶（但略微压缩，因为白色-on-黑色比黑色-on-白色更刺眼）。

当你发现自己想要在页面中添加“第四种”彩色元素时，请停止。它很可能应该归入中性色阶。

Color tinted toward the primary

向主色偏移的中性色

A subtle move that lifts perceived quality: tint your neutral ramp very slightly toward the primary brand color. Pure-grey neutrals can feel sterile; a 2–4% chroma toward the brand makes the whole UI feel cohesive.

/* Pure neutral */
neutral-700: hsl(0 0% 27%);

/* Tinted toward a blue brand */
neutral-700: hsl(220 6% 28%);

The difference is invisible side by side and obvious on the whole UI.

一个提升视觉质感的微妙技巧：将中性色阶略微向品牌主色偏移。纯灰色中性色可能显得生硬；向品牌色偏移2-4%的色度会让整个UI感觉更连贯。

/* Pure neutral */
neutral-700: hsl(0 0% 27%);

/* Tinted toward a blue brand */
neutral-700: hsl(220 6% 28%);

单独对比时差异不可见，但在整个UI中差异会很明显。

Worked example: a status badge system

实战示例：状态徽章系统

Three badges encoding three states. Color carries the category; tone and weight carry the rank.

html

<style>
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
  }
  .badge-success {
    background: hsl(142 70% 96%);
    color:      hsl(142 70% 22%);   /* dark text on light tint, contrast > 7:1 */
  }
  .badge-warning {
    background: hsl(38 95% 95%);
    color:      hsl(38 90% 25%);
  }
  .badge-destructive {
    background: hsl(0 80% 96%);
    color:      hsl(0 75% 32%);
  }
  .badge-neutral {
    background: hsl(0 0% 96%);
    color:      hsl(0 0% 30%);
  }
</style>

<span class="badge badge-success">●  Paid</span>
<span class="badge badge-warning">●  Pending</span>
<span class="badge badge-destructive">●  Overdue</span>
<span class="badge badge-neutral">●  Draft</span>

Each badge uses both hue (category) and tone (legibility). The dot icon adds a non-color signal so colorblind users can still differentiate at a glance.

三个徽章编码三种状态。颜色承载分类信息；色调和字重承载等级信息。

html

<style>
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
  }
  .badge-success {
    background: hsl(142 70% 96%);
    color:      hsl(142 70% 22%);   /* dark text on light tint, contrast > 7:1 */
  }
  .badge-warning {
    background: hsl(38 95% 95%);
    color:      hsl(38 90% 25%);
  }
  .badge-destructive {
    background: hsl(0 80% 96%);
    color:      hsl(0 75% 32%);
  }
  .badge-neutral {
    background: hsl(0 0% 96%);
    color:      hsl(0 0% 30%);
  }
</style>

<span class="badge badge-success">●  Paid</span>
<span class="badge badge-warning">●  Pending</span>
<span class="badge badge-destructive">●  Overdue</span>
<span class="badge badge-neutral">●  Draft</span>

每个徽章同时使用色相（分类）和色调（可读性）。圆点图标添加了非颜色信号，以便色盲用户也能快速区分。

Worked example: a primary action among secondary actions

实战示例：次要操作中的主操作

html

<style>
  .btn { padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 500; cursor: pointer; }
  .btn-primary {
    background: hsl(220 90% 50%);
    color: white;
    border: 0;
  }
  .btn-secondary {
    background: white;
    color: hsl(0 0% 27%);
    border: 1px solid hsl(0 0% 85%);
  }
  .btn-tertiary {
    background: transparent;
    color: hsl(0 0% 40%);
    border: 0;
  }
</style>

<button class="btn-tertiary">Cancel</button>
<button class="btn-secondary">Save draft</button>
<button class="btn-primary">Publish</button>

The primary uses full saturation + brand hue + white text. The secondary uses neutral-on-neutral (no color emphasis). The tertiary uses no surface, just dimmer text. The eye picks the primary instantly.

html

<style>
  .btn { padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 500; cursor: pointer; }
  .btn-primary {
    background: hsl(220 90% 50%);
    color: white;
    border: 0;
  }
  .btn-secondary {
    background: white;
    color: hsl(0 0% 27%);
    border: 1px solid hsl(0 0% 85%);
  }
  .btn-tertiary {
    background: transparent;
    color: hsl(0 0% 40%);
    border: 0;
  }
</style>

<button class="btn-tertiary">Cancel</button>
<button class="btn-secondary">Save draft</button>
<button class="btn-primary">Publish</button>

主按钮使用全饱和度+品牌色相+白色文本。次要按钮使用中性色-on-中性色（无颜色强调）。第三按钮无背景，仅使用更暗的文本。用户会立刻注意到主按钮。

Anti-patterns

反模式

Color as the only signal. "Required fields are red." A red asterisk works in conjunction with the word "required" or
```
aria-required
```
. Color alone fails ~8% of male users (red-green color blindness) and anyone in glare or with degraded vision.
Brand color everywhere. When every link, every heading, every active state, every illustration is the brand color, the brand color stops registering. Reserve it for moments.
Saturated everything. A page of fully-saturated icons, badges, illustrations, and CTAs is a noise field. Pick which 1–3 things deserve full saturation; mute the rest.
Mid-tone trap. Body text at hsl(0 0% 50%) (mid-grey) on white just clears WCAG AA at 18px. It feels elegant in design comps and tires real users in real lighting. Use neutral-700 or darker for body.
Decorative status colors. A red border around a card that has no error, just because it "looks important." Status colors should only carry semantic meaning; otherwise users learn to dismiss them.
Ten-color palette. Every product role gets its own bespoke color. Users can't learn the system; the brand fragments. A workable palette is small.

仅使用颜色作为信号：“必填字段为红色”。红色星号应与“必填”文字或
```
aria-required
```
属性配合使用。仅靠颜色会让约8%的男性用户（红绿色盲）以及处于强光下或视力受损的用户无法识别。
品牌色无处不在：当每个链接、每个标题、每个活跃状态、每个插图都使用品牌色时，品牌色将不再具有辨识度。请将其保留用于特定时刻。
所有元素都高饱和：满是高饱和图标、徽章、插图和CTA的页面就像一个噪音场。选择1-3个值得使用高饱和度的元素；将其余元素调暗。
中间色调陷阱：白色背景上的正文使用hsl(0 0% 50%)（中灰色），仅在18px时勉强达到WCAG AA标准。在设计稿中看起来优雅，但在实际光线环境下会让用户感到疲劳。正文请使用neutral-700或更深的色调。
装饰性状态色：卡片周围添加红色边框，但并无错误，只是因为“看起来重要”。状态色应仅承载语义含义；否则用户会学会忽略它们。
十种颜色的配色方案：每个产品角色都有专属颜色。用户无法理解该系统；品牌形象会碎片化。实用的配色方案应简洁。

Heuristics and accessibility

启发式方法与无障碍设计

Grayscale test. Convert your design to grayscale. Hierarchy that survives is robust. If everything collapses to similar-grey, you were leaning on color alone.
Contrast ratios. Body text ≥ 4.5:1 (WCAG AA); large text ≥ 3:1; UI components and graphical objects ≥ 3:1. Use any contrast checker. Failing contrast is a hierarchy failure as well as an accessibility one — low-contrast text literally recedes from view.
Color-blindness simulation. View the design through a deuteranopia filter (Chrome DevTools → Rendering → Emulate vision deficiencies). Status that depends on red/green collapse here.
The "first color you notice" check. Ask someone to glance at the page for 1 second; what color do they remember? It should be your intended emphasis. If it's an accidental detail (a stock photo, an icon), the hierarchy is wrong.

灰度测试：将设计转换为灰度。能在灰度下保留的层级是可靠的。如果所有元素都变成相似的灰色，说明你过度依赖颜色。
对比度比率：正文文本≥4.5:1（WCAG AA标准）；大文本≥3:1；UI组件和图形对象≥3:1。使用任意对比度检查工具。不符合对比度要求既是层级失败，也是无障碍设计失败——低对比度文本确实会从视野中“退去”。
色盲模拟：通过红绿色盲滤镜查看设计（Chrome DevTools → 渲染 → 模拟视觉缺陷）。依赖红绿色的状态在此场景下会失效。
“第一眼注意到的颜色”测试：让某人快速瞥一眼页面1秒钟；他们记得什么颜色？它应该是你想要强调的元素。如果是意外的细节（如库存照片、图标），说明层级设计有误。

Trade-offs and warnings

权衡与注意事项

Color is non-portable across cultures. Red signals luck and prosperity in much of East Asia, danger and stop in much of the West. Don't assume your palette transfers.
Color is non-portable across themes. A palette tuned for light theme often fails in dark — saturation perception inverts, contrast ratios change. Test both.
Color is non-portable across devices. OLED vs. LCD vs. e-ink, calibrated vs. uncalibrated, sun vs. dim. Tone ladders are more portable than hue choices.
Color is non-portable across abilities. Build a hierarchy that works in grayscale; add color on top of it as enhancement, not as the substrate.

颜色的文化差异：红色在东亚大部分地区象征幸运和繁荣，而在西方大部分地区象征危险和停止。不要假设你的配色方案适用于所有文化。
颜色的主题差异：为浅色主题调校的配色方案在深色主题中往往失效——饱和度感知会反转，对比度比率会变化。请测试两种主题。
颜色的设备差异：OLED与LCD与电子墨水屏，校准与未校准屏幕，阳光下与昏暗环境。色调阶梯比色相选择更具通用性。
颜色的能力差异：构建一个在灰度下也能生效的层级；将颜色作为增强层添加在其上，而非作为基础。

hierarchy-color-and-tone

Original

Translation

Hierarchy through color and tone

借助颜色与色调构建视觉层级

When this is the decisive sub-aspect

何时需重点关注此子领域

Core ideas

核心理念

Tone (value/contrast) is the universal hierarchy axis

色调（明度/对比度）是通用的层级轴

Color (hue) carries categorical meaning, not rank

颜色（色相）承载分类意义，而非等级

Saturation distinguishes emphasis from background

饱和度区分重点元素与背景

One primary color, one or two semantic colors, the rest neutral

一种主色，一到两种语义色，其余为中性色

Build a neutral ramp

构建中性色阶

Color tinted toward the primary

向主色偏移的中性色

Worked example: a status badge system

实战示例：状态徽章系统

Worked example: a primary action among secondary actions

实战示例：次要操作中的主操作

Anti-patterns

反模式

Heuristics and accessibility

启发式方法与无障碍设计

Trade-offs and warnings

权衡与注意事项

Related principles

相关原则