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

必备准备工作

Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors.
调用 /impeccable 指令——它包含设计原则、反模式以及上下文收集协议。在开始操作前请遵循该协议——如果目前没有设计上下文，你必须先执行 /impeccable teach 指令。此外还需收集：现有品牌色彩。

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?
  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.
分析当前状态并确定应用机会：
  1. 了解当前状态:
    • 色彩缺失情况: 纯灰度？仅有限的中性色？只有一种保守的强调色？
    • 未被利用的机会: 哪些位置添加色彩可以增强意义、层级感或愉悦感？
    • 上下文: 该领域和受众适合什么样的色彩？
    • 品牌: 是否有需要沿用的现有品牌色彩？
  2. 确定色彩能提升价值的场景:
    • 语义含义: 成功（绿色）、错误（红色）、警告（黄/橙色）、信息（蓝色）
    • 层级感: 吸引用户关注重要元素
    • 分类: 区分不同板块、类型或状态
    • 情感基调: 温暖、活力、信任、创意
    • 导航引导: 帮助用户导航并理解结构
    • 愉悦感: 打造视觉趣味和个性时刻
如果从代码库中无法明确以上任何一点，请直接询问用户以澄清你无法推断的信息。
关键提示: 色彩越多≠效果越好。策略性配色永远胜过杂乱无章的彩虹色。每一种色彩都应有其存在的目的。

Plan Color Strategy

制定色彩策略

Create a purposeful color introduction plan:
  • Color palette: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
  • 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?
IMPORTANT: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
制定有明确目标的色彩引入方案：
  • 配色方案: 哪些色彩符合品牌/上下文？（中性色之外最多选择2-4种色彩）
  • 主导色: 哪种色彩占据有色元素的60%？
  • 强调色: 哪些色彩用于提供对比和高亮？（占比30%和10%）
  • 应用策略: 每种色彩出现在哪里？原因是什么？
重要提示: 色彩应强化层级感和语义，而非制造混乱。在关键场景中，少即是多。

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
  • 状态指示器:
    • 成功：绿色调（祖母绿、森林绿、薄荷绿）
    • 错误：红/粉色调（玫瑰红、深红、珊瑚红）
    • 警告：橙/琥珀色调
    • 信息：蓝色调（天蓝色、海蓝色、靛蓝色）
    • 中性：灰/石板灰用于非活跃状态
  • 状态徽章: 为不同状态（活跃、待处理、已完成等）添加彩色背景或边框
  • 进度指示器: 彩色进度条、环形图或图表展示完成度或健康状态

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 color: It's perceptually uniform, meaning equal steps in lightness look equal. Great for generating harmonious scales.
  • 带色调的背景: 用暖中性色（
    oklch(97% 0.01 60)
    ）或冷色调（
    oklch(97% 0.01 250)
    ）替代纯灰色（
    #f5f5f5
    ）
  • 彩色板块: 使用柔和的背景色区分不同区域
  • 渐变背景: 添加微妙且有目的性的渐变以增强层次感（避免通用的紫蓝渐变）
  • 卡片与表面: 为卡片或表面添加轻微色调以提升温暖感
使用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
  • 彩色标题: 为板块标题使用品牌色彩（保持对比度）
  • 高亮文本: 为强调内容或分类添加色彩
  • 标签与标记: 为元数据或分类添加小型彩色标签

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
  • 主导色（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
  • 对比度: 确保符合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
  • 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种）
  • 无语义地随机应用色彩
  • 在彩色背景上使用灰色文本——会显得褪色；应使用背景色的深色版本或透明度替代
  • 使用纯灰色作为中性色——添加微妙的色彩色调（暖或冷）以提升精致感
  • 在大面积区域使用纯黑色（
    #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标准？
  • 是否过于杂乱: 色彩是否平衡且有目的性？
记住：色彩是感性且强大的工具。用它来打造温暖感、引导注意力、传递意义并展现个性。但克制和策略比饱和度和多样性更重要。要敢于用色，但更要做到有的放矢。