Back to Details

colorize

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.
有策略地为过于单调、灰暗或缺乏视觉温暖感与个性的设计引入色彩。

MANDATORY PREPARATION

强制准备

Users start this workflow with 
/colorize
. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: existing brand colors.
用户通过 
/colorize
启动此工作流。此 skill 激活后，加载 $frontend-design——其中包含设计原则、反模式以及 Context Gathering Protocol。继续执行前必须遵循该协议；如果尚未建立设计上下文，则必须先加载 $setup。此外，还需收集现有的品牌色彩。

Assess Color Opportunity

评估用色机会

Analyze the current state and identify opportunities:
  1. Understand current state:
    • Color absence: Pure grayscale? Limited neutrals? One timid accent?
    • Missed opportunities: Where could color add meaning, hierarchy, or delight?
    • Context: What's appropriate for this domain and audience?
    • Brand: Are there existing brand colors we should use?
    • Temperature: Do the neutrals feel warm, cool, or accidentally lifeless?
    • Hierarchy without color: If you mentally remove color, is the interface still clear?
  2. Identify where color adds value:
    • Semantic meaning: Success (green), error (red), warning (yellow/orange), info (blue)
    • Hierarchy: Drawing attention to important elements
    • Categorization: Different sections, types, or states
    • Emotional tone: Warmth, energy, trust, creativity
    • Wayfinding: Helping users navigate and understand structure
    • Delight: Moments of visual interest and personality
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
CRITICAL: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. Color should reinforce hierarchy that already exists — not replace it.
分析当前状态并识别用色机会：
  1. 了解当前状态：
    • 色彩缺失：纯灰度？中性色有限？只有一个胆怯的强调色？
    • 错失的机会：可以在哪些地方利用色彩传达意义、建立层级或增添愉悦感？
    • 上下文：该领域和受众适合什么风格？
    • 品牌：是否已有需要沿用的品牌色彩？
    • 色温：中性色给人的感觉偏暖、偏冷，还是无意间显得毫无生气？
    • 不依赖色彩的层级：如果在头脑中移除所有色彩，界面是否依然清晰？
  2. 确定色彩能够创造价值的位置：
    • 语义含义：成功（绿色）、错误（红色）、警告（黄色/橙色）、信息（蓝色）
    • 层级：将注意力引向重要元素
    • 分类：区分不同的区块、类型或状态
    • 情绪基调：温暖、活力、信任、创意
    • 路径引导：帮助用户导航并理解结构
    • 愉悦感：创造具有视觉吸引力和个性的瞬间
如果代码库无法明确提供上述信息，应直接向用户询问无法推断的内容。
关键原则：更多色彩 ≠ 更好。策略性用色永远胜过一次“彩虹大杂烩”。每种色彩都应有明确用途。色彩应当强化已经存在的层级，而不是取代层级。

Plan Color Strategy

规划色彩策略

Create a purposeful color introduction plan:
Consult the color and contrast reference for palette structure, contrast, color-family selection, temperature, and theme behavior. Consult the color ramp workflow reference when you need to build or repair tints, tones, shades, and reusable color stops. Consult the semantic color reference when color needs to communicate state, alerts, or status—not just brand personality.
  • Color palette: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
  • Palette relationship: Is this best treated as monochrome, analogous, complementary, or triadic?
  • Dominant color: Which color owns 60% of colored elements?
  • Accent colors: Which colors provide contrast and highlights? (30% and 10%)
  • Application strategy: Where does each color appear and why?
  • Shade system: Which greys, primary shades, and semantic ramps exist before you start applying them?
  • Schema: Are the color roles and usable stops documented clearly enough for later screens to stay consistent?
IMPORTANT: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
制定有明确目的的色彩引入方案：
查阅 色彩与对比度 参考资料，了解调色板结构、对比度、色彩家族选择、色温以及主题行为。 需要构建或修复色阶、明暗层次及可复用色彩节点时，查阅 色彩渐变工作流 参考资料。 当色彩需要传达状态、警报或状态信息，而不只是塑造品牌个性时，查阅 语义化色彩 参考资料。
  • 色彩调色板：哪些颜色与品牌和上下文相符？（在中性色之外最多选择 2-4 种颜色）
  • 调色板关系：采用单色、类似色、互补色还是三色关系最合适？
  • 主色：哪种颜色占据彩色元素的 60%？
  • 辅助色：哪些颜色用于提供对比和亮点？（分别占 30% 和 10%）
  • 应用策略：每种颜色出现在哪里，原因是什么？
  • 明暗系统：开始应用之前，已经定义了哪些灰色、主色色阶和语义色渐变？
  • 规范：色彩角色和可用色阶是否记录得足够清晰，以便后续页面保持一致？
重要：色彩应当增强层级和意义，而不是制造混乱。越少越精炼，越能发挥关键作用。

Build the Palette Before Applying It

先构建调色板，再加以应用

Think in hue, saturation, and lightness even if you ultimately encode the palette in OKLCH.
即使最终使用 OKLCH 编码调色板，也应先从色相、饱和度和明度的角度进行思考。

Neutral scale

中性色阶

  • Define 8-10 neutrals up front, from a dark near-black to an off-white
  • Tint them slightly warm or cool so the interface feels intentional instead of lifeless
  • Reserve the darkest neutral for primary text and the lightest for page backgrounds
  • 预先定义 8-10 个中性色，覆盖接近黑色的深色到偏白的浅色
  • 为它们加入轻微的暖色或冷色倾向，使界面显得有意为之，而不是死气沉沉
  • 将最深的中性色保留给主要文本，最浅的中性色保留给页面背景

Primary and accent scales

主色与辅助色色阶

  • Pick a base shade that could plausibly work for a button, active state, or strong highlight
  • Define the dark edge for text / high-contrast UI and the light edge for tinted backgrounds
  • Fill the gaps so you have a stable 5-10 shade ramp instead of improvising on every screen
  • 选择一个 基础色阶，使其能够合理地用于按钮、激活状态或强烈的高亮元素
  • 为文字和高对比度 UI 定义 深色边缘，并为着色背景定义 浅色边缘
  • 补齐中间层级，形成稳定的 5-10 级色阶，而不是在每个页面临时发挥

Saturation and brightness control

饱和度与亮度控制

  • As colors get much lighter or darker, increase saturation enough to keep them from going muddy
  • When a ramp looks dull, don't only change lightness — slightly rotate hue toward a brighter-feeling hue if needed
  • For neutrals and subtle surfaces, temperature matters more than raw saturation
  • Use toned-down variants when pure color feels too harsh, toy-like, or visually noisy
  • 当颜色变得很浅或很深时，应适当提高饱和度，避免颜色变得浑浊
  • 当色阶显得沉闷时，不要只调整明度；必要时可轻微旋转色相，使其呈现更明快的倾向
  • 对于中性色和细微表面，色温比单纯的饱和度更重要
  • 当纯色显得过于刺眼、玩具感过强或视觉噪声过多时，使用降低饱和度的变体

Contrast strategy

对比度策略

  • For low-emphasis colored surfaces, prefer dark text on light color instead of white text on dark color
  • When text sits on a colored background, use a darker or lighter shade of that same hue family instead of generic grey
  • 对于低强调度的着色表面，优先使用 浅色背景配深色文字，而不是深色背景配白色文字
  • 当文字位于彩色背景上时，使用同一色相家族中更深或更浅的色阶，而不是通用灰色

Introduce Color Strategically

有策略地引入色彩

Add color systematically across these dimensions:
从以下维度系统地添加色彩：

Semantic Color

语义化色彩

  • State indicators:
    • Success: Green tones (emerald, forest, mint)
    • Error: Red/pink tones (rose, crimson, coral)
    • Warning: Orange/amber tones
    • Info: Blue tones (sky, ocean, indigo)
    • Neutral: Gray/slate for inactive states
  • Status badges: Colored backgrounds or borders for states (active, pending, completed, etc.)
  • Progress indicators: Colored bars, rings, or charts showing completion or health
  • 状态指示器：
    • 成功：绿色调（emerald、forest、mint）
    • 错误：红色/粉色调（rose、crimson、coral）
    • 警告：橙色/琥珀色调
    • 信息：蓝色调（sky、ocean、indigo）
    • 中性：灰色/slate，用于非激活状态
  • 状态徽章：使用彩色背景或边框表示状态（激活、待处理、已完成等）
  • 进度指示器：使用彩色进度条、圆环或图表展示完成情况或健康状态

Accent Color Application

辅助色的应用

  • Primary actions: Color the most important buttons/CTAs
  • Links: Add color to clickable text (maintain accessibility)
  • Icons: Colorize key icons for recognition and personality
  • Headers/titles: Add color to section headers or key labels
  • Hover states: Introduce color on interaction
  • 主要操作：为最重要的按钮/CTA 添加颜色
  • 链接：为可点击文本添加颜色，同时保持无障碍访问
  • 图标：为关键图标添加颜色，以增强识别度和个性
  • 标题：为区块标题或关键标签添加颜色
  • 悬停状态：在交互过程中引入色彩

Background & Surfaces

背景与表面

  • Tinted backgrounds: Replace pure gray (
    #f5f5f5
    ) with warm neutrals (
    oklch(97% 0.01 60)
    ) or cool tints (
    oklch(97% 0.01 250)
    )
  • Colored sections: Use subtle background colors to separate areas
  • Gradient backgrounds: Add depth with subtle, intentional gradients (not generic purple-blue)
  • Cards & surfaces: Tint cards or surfaces slightly for warmth
Use OKLCH for implementation: It's perceptually uniform, meaning equal steps in lightness look equal. Great for generating harmonious scales. But still think conceptually in hue, saturation, and lightness when deciding how colors should behave.
  • 着色背景：将纯灰色（
    #f5f5f5
    ）替换为暖中性色（
    oklch(97% 0.01 60)
    ）或冷色倾向（
    oklch(97% 0.01 250)
    ）
  • 彩色区块：使用细微的背景颜色区分不同区域
  • 渐变背景：通过细微且有目的的渐变增加层次，避免使用泛泛的紫蓝渐变
  • 卡片与表面：为卡片或表面添加轻微着色，以增强温暖感
实施时使用 OKLCH：它具有感知均匀性，意味着明度上的等量变化在视觉上看起来也是等量的，非常适合生成协调的色阶。但在决定色彩表现时，仍应从色相、饱和度和明度的概念出发进行思考。

Data Visualization

数据可视化

  • Charts & graphs: Use color to encode categories or values
  • Heatmaps: Color intensity shows density or importance
  • Comparison: Color coding for different datasets or timeframes
  • 图表与图形：使用色彩编码类别或数值
  • 热力图：通过色彩强度展示密度或重要性
  • 对比分析：使用不同颜色区分数据集或时间范围

Borders & Accents

边框与强调元素

  • Accent borders: Add colored left/top borders to cards or sections
  • Underlines: Color underlines for emphasis or active states
  • Dividers: Subtle colored dividers instead of gray lines
  • Focus rings: Colored focus indicators matching brand
  • 强调边框：为卡片或区块添加彩色左边框或上边框
  • 下划线：使用彩色下划线强调内容或表示激活状态
  • 分隔线：使用细微的彩色分隔线代替灰色线条
  • 焦点环：使用与品牌一致的彩色焦点指示器

Typography Color

文字颜色

  • Colored headings: Use brand colors for section headings (maintain contrast)
  • Highlight text: Color for emphasis or categories
  • Labels & tags: Small colored labels for metadata or categories
Treat color as a support to hierarchy:
  • Keep primary body text mostly neutral
  • Use color sparingly for action, state, and emphasis
  • If a screen feels exciting only because everything is colored, you've probably overdone it
  • 彩色标题：使用品牌色呈现区块标题，同时保持足够的对比度
  • 高亮文字：使用颜色强调内容或区分类别
  • 标签与标记：使用小型彩色标签展示元数据或类别
将色彩视为层级的辅助手段：
  • 主要正文大多使用中性色
  • 谨慎地将颜色用于操作、状态和强调
  • 如果一个页面仅因为所有元素都有颜色就显得热闹过头，那么通常意味着用色过度

Decorative Elements

装饰性元素

  • Illustrations: Add colored illustrations or icons
  • Shapes: Geometric shapes in brand colors as background elements
  • Gradients: Colorful gradient overlays or mesh backgrounds
  • Blobs/organic shapes: Soft colored shapes for visual interest
  • 插画：添加彩色插画或图标
  • 形状：在背景元素中使用品牌色几何形状
  • 渐变：添加彩色渐变覆盖层或网格背景
  • 斑块/有机形状：使用柔和的彩色形状增添视觉趣味

Balance & Refinement

平衡与优化

Ensure color addition improves rather than overwhelms:
确保添加色彩能够改善体验，而不是压倒体验：

Maintain Hierarchy

保持层级

  • Dominant color (60%): Primary brand color or most used accent
  • Secondary color (30%): Supporting color for variety
  • Accent color (10%): High contrast for key moments
  • Neutrals (remaining): Gray/black/white for structure
Treat color psychology as a directional tool, not a law:
  • warmer, brighter colors usually attract more attention
  • cooler colors often stabilize and recede
  • darker palettes often feel more serious or corporate
  • brighter palettes often feel more youthful or energetic
Then verify the actual result against the product's audience and tone instead of trusting the color wheel blindly.
  • 主色（60%）：主要品牌色或使用最频繁的辅助色
  • 次色（30%）：用于丰富变化的辅助色
  • 强调色（10%）：用于关键瞬间的高对比度颜色
  • 中性色（其余部分）：使用灰色、黑色和白色构建结构
应将色彩心理学视为方向性工具，而非绝对规律：
  • 更温暖、更明亮的颜色通常会吸引更多注意力
  • 更冷调的颜色往往会稳定视觉，并产生后退感
  • 更暗的调色板通常显得更严肃或更具企业气质
  • 更明亮的调色板通常显得更年轻或更有活力
随后，应根据产品的受众和基调验证实际效果，而不是盲目依赖色轮。

Accessibility

无障碍访问

  • Contrast ratios: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
  • Don't rely on color alone: Use icons, labels, or patterns alongside color
  • Test for color blindness: Verify red/green combinations work for all users
  • Flip contrast when needed: If white text on a colored surface demands too-dark a background, use a lighter background with darker text instead
  • 对比度比例：确保符合 WCAG 要求（文本为 4.5:1，UI 组件为 3:1）
  • 不要仅依赖颜色：同时使用图标、标签或图案
  • 色觉障碍测试：验证红绿组合对所有用户都有效
  • 必要时反转对比关系：如果彩色表面上的白色文字需要过暗的背景才能保持对比度，应改用较浅背景和较深文字

Cohesion

一致性

  • Consistent palette: Use colors from defined palette, not arbitrary choices
  • Systematic application: Same color meanings throughout (green always = success)
  • Temperature consistency: Warm palette stays warm, cool stays cool
NEVER:
  • Use every color in the rainbow (choose 2-4 colors beyond neutrals)
  • Apply color randomly without semantic meaning
  • Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead
  • Build shades on the fly with ad-hoc lighten/darken helpers and call it a system
  • Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication
  • Use pure black (
    #000
    ) or pure white (
    #fff
    ) for large areas
  • Violate WCAG contrast requirements
  • Use color as the only indicator (accessibility issue)
  • Make everything colorful (defeats the purpose)
  • Default to purple-blue gradients (AI slop aesthetic)
  • 一致的调色板：使用既定调色板中的颜色，避免临时选择
  • 系统性应用：在整个产品中保持相同色彩含义（绿色始终表示成功）
  • 色温一致性：暖色调色板始终保持暖调，冷色调保持冷调
绝不：
  • 使用彩虹中的所有颜色（在中性色之外选择 2-4 种颜色）
  • 随机应用颜色，而不赋予其语义含义
  • 在彩色背景上使用灰色文字——这会显得褪色；应使用背景色的更深色阶或透明度
  • 使用临时 lighten/darken 辅助方法即时构建色阶，并将其称为设计系统
  • 使用纯灰色作为中性色——加入轻微的暖色或冷色倾向，以提升精致感
  • 在大面积区域使用纯黑色（
    #000
    ）或纯白色（
    #fff
    ）
  • 违反 WCAG 对比度要求
  • 将颜色作为唯一指示方式（无障碍问题）
  • 让所有元素都变得色彩斑斓（这会违背用色目的）
  • 默认使用紫蓝渐变（典型的 AI 粗制滥造审美）

Verify Color Addition

验证用色效果

Test that colorization improves the experience:
  • Better hierarchy: Does color guide attention appropriately?
  • Clearer meaning: Does color help users understand states/categories?
  • More engaging: Does the interface feel warmer and more inviting?
  • Still accessible: Do all color combinations meet WCAG standards?
  • Not overwhelming: Is color balanced and purposeful?
Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional.
测试着色是否改善了体验：
  • 层级更清晰：色彩是否恰当地引导了注意力？
  • 含义更明确：色彩是否帮助用户理解状态或类别？
  • 体验更吸引人：界面是否显得更温暖、更友好？
  • 仍然具备无障碍访问能力：所有色彩组合是否都符合 WCAG 标准？
  • 不会造成视觉压迫：色彩是否均衡且具有明确目的？
请记住：色彩既感性又强大。可以利用它营造温暖感、引导注意力、传达意义并表达个性。但克制和策略比饱和度与多样性更重要。可以充满色彩，但必须有意为之。