colorize

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

必须的准备工作

用户通过 /colorize 启动此工作流。此技能激活后，加载 $frontend-design — 其中包含设计原则、反模式和 上下文收集协议。继续之前，请遵循该协议；如果尚无设计上下文，必须先加载 $setup。此外，还需了解：现有品牌色。

---

评估色彩机会

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

1. 了解当前状态：

   • 缺少色彩：是否纯灰度？中性色有限？只有一种不显眼的强调色？
   • 错失的机会：在哪里可以通过色彩增加含义、层级或趣味？
   • 上下文：什么样的色彩适合该领域和受众？
   • 品牌：是否有我们应该使用的现有品牌色？
   • 冷暖倾向：中性色给人的感觉是偏暖、偏冷，还是无意间显得毫无生气？
   • 无色彩时的层级：在脑海中去掉色彩后，界面是否依然清晰？

2. 找出色彩能带来价值之处：

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

如果无法从代码库中判断其中任何一点，请直接询问用户，澄清无法推断的内容。

关键：色彩越多 ≠ 越好。每次都应以策略性配色取代彩虹般的杂乱堆砌。每种颜色都应有其用途。色彩应强化已有层级，而非取而代之。

规划配色策略

制定有明确目的的色彩引入方案：

请参阅 色彩与对比度，了解调色板结构、对比度、色系选择、冷暖倾向和主题行为。 当需要构建或修复色调、明暗变化以及可复用的色阶时，请参阅 色阶工作流。 当色彩需要传达状态、警报或状态信息，而不仅仅是品牌个性时，请参阅 语义色彩。

• 调色板：哪些颜色适合该品牌／上下文？（除中性色外，最多选择 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 种颜色）
• 不赋予颜色语义，随意使用
• 在彩色背景上使用灰色文本——这会显得褪色；改用更深的背景色，或使用透明度
• 临时使用随意的变亮/变暗辅助方法来生成色阶，并称之为一套色彩系统
• 将纯灰色用作中性色——加入微妙的色彩倾向（暖色或冷色），让效果更精致
• 在大面积区域使用纯黑（#000）或纯白（#fff）
• 违反 WCAG 对比度要求
• 仅用颜色作为指示（这会造成无障碍问题）
• 让所有内容都色彩缤纷（这会失去色彩的意义）
• 默认使用蓝紫渐变（AI 滥用风格）

验证新增颜色

测试颜色是否让体验变得更好：

• 层次更清晰：颜色是否恰当地引导注意力？
• 含义更明确：颜色是否帮助用户理解状态/类别？
• 更具吸引力：界面是否显得更温暖、更令人乐于使用？
• 仍然无障碍：所有配色是否都符合 WCAG 标准？
• 不会令人眼花缭乱：颜色是否均衡且使用得当？

记住：颜色会影响情绪，也蕴含强大力量。用它营造温暖感、引导注意力、传达含义并展现个性。但克制和策略比饱和度与多样性更重要。大胆用色，但要有意识地运用。