UI 设计色阶生成指南

为什么色阶很重要

没有色阶，设计师只能临时取色。按钮用一种蓝，徽章用另一种，图表再用第三种。单独看每个都没问题，但整个产品缺乏统一感。色阶强制要求所有蓝色来自同一个色系——在不限制灵活性的同时创造视觉统一。

50–950 色阶的结构

• 50 — 接近白色。页面背景、白色表面上的悬停状态。
• 100–200 — 浅色调。背景、标签、徽章。
• 300–400 — 中浅色。边框、禁用状态、占位符文字。
• 500 — 基础色。品牌主色、按钮、链接。
• 600–700 — 中深色。悬停和按下状态。
• 800–900 — 深色。浅色背景上的文字、深色模式表面。
• 950 — 接近黑色。深色模式深层背景。

明度曲线

设计良好的色阶明度并非线性递增，而是遵循感知曲线。人眼对深色区域差异更敏感，深色级别需要更小的明度增量才能显得均匀间隔。构建色阶时应使用 OKLCH 或 HSL，而非 RGB。

饱和度补偿

纯明度缩放会产生褪色的浅色调和发灰的深色调。解决方法是沿色阶微调饱和度：在中间范围（400–600）略微提高，在两端降低。这样色阶从头到尾保持"活力"，而不会在两端退化为接近灰色。

色相偏移

高级色阶会引入细微的色相旋转——蓝色在较浅级别可能向暖色旋转。这模拟了颜料的物理行为，使色阶感觉更自然。整个范围内 5–15 度的旋转通常就已足够。

需要几套色阶？

• 1–2 套品牌色阶（主色、辅色）
• 1 套中性色 / 灰色阶
• 各一套语义色：成功（绿）、警告（黄）、危险（红）、信息（蓝）

共 6–8 套，足以覆盖所有 UI 状态，同时不会让色库变得难以管理。