colorize

为色彩过于单调、灰暗，或缺乏视觉温度和个性的设计策略性地引入色彩。

必须完成的准备

阅读 frontend-design，并遵循其中的上下文收集流程。重用可用的上下文，仅针对会产生重要影响的信息缺口提问。此外，还要收集：现有品牌颜色。

---

评估色彩应用机会

分析当前状态并找出机会：

1. 了解当前状态：

   • 缺少色彩：是否为纯灰度？中性色有限？只有一种不显眼的强调色？
   • 错失的机会：哪些地方可以用色彩增添含义、层级或趣味？
   • 背景：什么风格适合这个领域和受众？
   • 品牌：是否有应该使用的现有品牌颜色？
   • 色温：中性色调给人的感觉是温暖、冷冽，还是不经意地显得毫无生气？
   • 无色彩时的层级：如果在脑海中去掉色彩，界面是否仍然清晰？

2. 找出色彩能发挥作用的地方：

   • 语义含义：成功（绿色）、错误（红色）、警告（黄色／橙色）、信息（蓝色）
   • 层级：吸引用户注意重要元素
   • 分类：区分不同的版块、类型或状态
   • 情绪基调：温暖、活力、信任、创造力
   • 导航指引：帮助用户浏览并理解结构
   • 趣味性：创造视觉亮点和个性化时刻

如果从代码库中无法明确判断以上任何一点，请直接向用户提问，澄清无法推断的信息。

重要：色彩越多 ≠ 越好。策略性地使用色彩总胜过胡乱堆砌彩虹色。每种颜色都应该有明确用途。色彩应该强化已有层级，而不是取而代之。

制定色彩策略

制定有明确目的的色彩引入计划：

参考 color and contrast，了解色板结构、对比度、色系选择、色温和主题行为。 需要构建或修复色调、浓淡、明暗变化以及可复用的颜色阶梯时，参考 color ramp workflow。 当色彩需要表达状态、警报或状态信息，而不仅仅是品牌个性时，参考 semantic color。

• 色板：哪些颜色符合品牌／背景？（除中性色外，最多选择 2-4 种颜色）
• 色板关系：最适合采用单色、类似色、互补色还是三角色彩方案？
• 主导色：哪种颜色占据 60% 的有色元素？
• 强调色：哪些颜色用于制造对比和突出重点？（30% 和 10%）
• 应用策略：每种颜色出现在哪里，为什么？
• 明暗系统：开始应用颜色前，已有哪几种灰色、主色明暗阶和语义色阶？
• 规范：颜色角色和可用色阶是否有清晰文档，足以让后续界面保持一致？

重要：色彩应增强层级和含义，而非制造混乱。越重要，越要少即是多。

先构建色板，再应用

即使最终使用 OKLCH 编码色板，也要从色相、饱和度和亮度入手思考。

中性色阶

• 预先定义 8-10 种中性色，从深近黑色到灰白色
• 为中性色略微加入暖色或冷色色调，让界面显得经过精心设计，而非毫无生气
• 最深的中性色留给主要文本，最浅的留给页面背景

主色和强调色阶

• 选择一种基础色，适合用于按钮、激活状态或醒目的高亮
• 定义用于文本／高对比度 UI 的深色端，以及用于染色背景的浅色端
• 填补中间色阶，形成稳定的 5-10 阶色阶，避免每个界面都临时发挥

饱和度和亮度控制

• 颜色变得更浅或更深时，适当提高饱和度，避免颜色显得浑浊
• 当一组渐变色显得暗淡时，不要只调整亮度；必要时可将色相稍微转向更显明亮的色调
• 对于中性色和细微的表面色，色温比单纯的饱和度更重要
• 纯色显得过于刺眼、像玩具或视觉上过于杂乱时，使用柔和的变体

对比度策略

• 对于强调程度较低的彩色表面，优先使用浅色背景上的深色文字，而不是深色背景上的白色文字
• 文字位于彩色背景上时，使用同一色系中更深或更浅的色调，而不是通用灰色

策略性地引入颜色

从以下维度系统地添加颜色：

语义色彩

• 状态指示器：

  • 成功：绿色调（翡翠绿、森林绿、薄荷绿）
  • 错误：红色／粉色调（玫瑰红、深红、珊瑚红）
  • 警告：橙色／琥珀色调
  • 信息：蓝色调（天蓝、海洋蓝、靛蓝）
  • 中性：非活动状态使用灰色／石板色

• 状态徽章：为状态（活动、待处理、已完成等）使用彩色背景或边框

• 进度指示器：使用彩色条、环或图表显示完成情况或状态

强调色的应用

• 主要操作：为最重要的按钮／CTA 添加颜色
• 链接：为可点击文本添加颜色（保持无障碍性）
• 图标：为关键图标着色，提升辨识度并彰显个性
• 标题／名称：为章节标题或关键标签添加颜色
• 悬停状态：在交互时引入颜色

背景与表面

• 染色背景：将纯灰色（#f5f5f5）替换为暖色中性色（oklch(97% 0.01 60)）或冷色调（oklch(97% 0.01 250)）
• 彩色区块：使用细微的背景色区分不同区域
• 渐变背景：使用细腻且有意设计的渐变增加层次感（不要使用通用的紫蓝渐变）
• 卡片与表面：为卡片或表面稍微染色，增添暖意

使用 OKLCH 实现：它具有感知均匀性，也就是说，亮度相同的步进看起来也相同。非常适合生成协调的色阶。不过，在决定颜色的表现方式时，仍要从色相、饱和度和亮度的角度进行概念性思考。

数据可视化

• 图表：使用颜色编码类别或数值
• 热力图：通过颜色强度显示密度或重要性
• 比较：使用颜色区分不同的数据集或时间范围

边框与强调

• 强调边框：为卡片或区块添加彩色左边框／上边框
• 下划线：为下划线添加颜色，以示强调或表示活动状态
• 分隔线：使用细微的彩色分隔线替代灰线
• 焦点环：使用与品牌相匹配的彩色焦点指示器

字体颜色

• 彩色标题：使用品牌色作为章节标题颜色（保持对比度）
• 高亮文本：使用颜色突出重点或标示类别
• 标签与标记：为元数据或类别添加小型彩色标签

将颜色作为层级关系的辅助：

• 主体文本大多保持中性
• 谨慎使用颜色来表示操作、状态和强调
• 如果屏幕只有在所有内容都着色时才显得活泼，那你可能用色过度了

装饰元素

• 插画：添加彩色插画或图标
• 形状：使用品牌色的几何形状作为背景元素
• 渐变：添加彩色渐变叠层或网格背景
• 色块／有机形状：使用柔和的彩色形状增添视觉趣味

平衡与润色

确保添加颜色后效果有所改善，而非喧宾夺主：

保持层次

• 主色（60%）：品牌主色或使用最多的强调色
• 次要色（30%）：用于丰富变化的辅助色
• 强调色（10%）：用于关键时刻的高对比度颜色
• 中性色（其余部分）：用于构建结构的灰色、黑色或白色

将色彩心理学视为指导原则，而非铁律：

• 暖色和亮色通常更容易吸引注意力
• 冷色通常更稳定，也更不显眼
• 深色调通常给人更严肃或更商务的感觉
• 亮色调通常给人更年轻或更有活力的感觉

然后，根据产品的受众和语气验证实际效果，而不是盲目相信色轮。

无障碍性

• 对比度：确保符合 WCAG 标准（文本为 4.5:1，UI 组件为 3:1）
• 不要只依赖颜色：在颜色之外，同时使用图标、标签或图案
• 进行色盲测试：确认红绿色搭配适用于所有用户
• 必要时反转对比：如果在彩色表面使用白色文本需要将背景调得太暗，请改用较浅的背景和较深的文本

协调性

• 调色板一致：使用已定义调色板中的颜色，而非随意挑选
• 系统化应用：始终保持颜色含义一致（绿色始终代表成功）
• 色温一致：暖色调保持暖色，冷色调保持冷色

切勿：

• 用尽彩虹中的所有颜色（除中性色外，选择 2–4 种颜色）
• 毫无语义地随机使用颜色
• 在彩色背景上放置灰色文本——这会显得黯淡；请改用背景色的较深色调或透明度
• 临时使用随手编写的提亮／加深辅助函数来生成色阶，并称之为系统
• 仅仅因为偏好带色调的调色板，就替换已批准的中性色、黑色或白色色值
• 违反 WCAG 对比度要求
• 只用颜色作为指示（这会造成无障碍问题）
• 让所有元素都五彩缤纷（这会适得其反）
• 默认使用紫蓝渐变（AI 垃圾美学）

验证添加颜色的效果

测试上色是否改善了体验：

• 层次更清晰：颜色是否恰当地引导注意力？
• 含义更明确：颜色是否帮助用户理解状态／类别？
• 更具吸引力：界面是否感觉更温暖、更亲切？
• 依然无障碍：所有颜色搭配是否都符合 WCAG 标准？
• 不过度：颜色是否平衡且有目的？

请记住：色彩富有情感和力量。运用它营造温暖感、引导注意力、传达含义并展现个性。但克制和策略比饱和度和多样性更重要。让色彩丰富，但要有明确意图。