Back to Details

i-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
  • 状态指示器：
    • 成功：绿色调（祖母绿、森林绿、薄荷绿）
    • 错误：红/粉色调（玫瑰色、深红色、珊瑚色）
    • 警告：橙/琥珀色调
    • 提示：蓝色调（天蓝色、海蓝色、靛蓝色）
    • 中性色：灰色/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 color: It's perceptually uniform, meaning equal steps in lightness look equal. Great for generating harmonious scales.
  • 淡色背景：将纯灰色（
    #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
  • 彩色标题：使用品牌色作为板块标题色（保证对比度）
  • 高亮文本：用色彩做强调或分类标识
  • 标签与标记：用小型彩色标签标识元数据或分类

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标准？
  • 没有过载：色彩是否平衡、有明确使用目的？
请记住：色彩是有情感、有力量的。用它来营造温暖感、引导注意力、传递信息、表达个性。但克制和策略比饱和度和色彩丰富度更重要。可以用色丰富，但一定要有目的性。