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

必备准备工作

Context Gathering (Do This First)

收集背景信息（首先完成）

You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone, and especially existing brand colors.
Attempt to gather these from the current thread or codebase.
  1. If you don't find exact information and have to infer from existing design and functionality, you MUST STOP and {{ask_instruction}} whether you got it right.
  2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST {{ask_instruction}} clarifying questions first to complete your context.
Do NOT proceed until you have answers. Guessing leads to generic AI slop colors.
若没有必要的背景信息，你无法出色完成任务，比如目标受众（关键）、预期使用场景（关键）、品牌个性/调性，尤其是现有的品牌色彩。
尝试从当前对话线程或代码库中收集这些信息。
  1. 如果你未找到确切信息，必须从现有设计和功能中推断，此时你必须停止并{{ask_instruction}}确认推断是否正确。
  2. 否则，如果你无法完全推断，或你的置信度为中等及以下，必须先{{ask_instruction}}提出澄清问题以完善背景信息。
在得到答案前请勿继续。猜测会导致生成通用的AI劣质配色。

Use frontend-design skill

使用frontend-design技能

Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
运用frontend-design技能了解设计原则与反模式。在该技能执行完毕并明确所有注意事项前，请勿继续。

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_instruction}}
CRITICAL: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.
分析当前状态并识别应用机会：
  1. 了解当前状态：
    • 色彩缺失情况：纯灰度？仅有限的中性色？只有一种保守的强调色？
    • 错失的机会：哪些位置可以通过添加色彩来增强意义、层级或愉悦感？
    • 背景环境：该领域与受众适合什么样的色彩？
    • 品牌要求：是否有需要沿用的现有品牌色彩？
  2. 确定色彩能增添价值的场景：
    • 语义含义：成功（绿色）、错误（红色）、警告（黄色/橙色）、信息（蓝色）
    • 层级区分：吸引用户关注重要元素
    • 分类标识：区分不同板块、类型或状态
    • 情感调性：营造温暖、活力、信任、创意的氛围
    • 导航引导：帮助用户导航并理解结构
    • 视觉愉悦：打造富有视觉趣味与个性的时刻
如果从代码库中无法明确以上任何一点，请{{ask_instruction}}
重点提示：色彩越多≠效果越好。策略性配色永远胜过杂乱无章的彩虹色。每一种色彩都应有其存在的意义。

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
  • 插画：添加彩色插画或图标
  • 几何形状：将品牌色彩的几何形状作为背景元素
  • 渐变效果：彩色渐变叠加或网格背景
  • 有机形状/ blob：柔和的彩色形状以增加视觉趣味

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标准？
  • 不会造成负担：色彩是否平衡且有明确目的？
请记住：色彩具有情感力量。用它来营造温暖感、引导注意力、传递意义并展现个性。但克制与策略比饱和度与多样性更重要。要富有色彩，但更要有的放矢。