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

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标准？
  • 不过度繁杂：色彩是否平衡且有明确目的？
请记住：色彩具有情感力量。用它来创造温暖、引导注意力、传递意义并展现个性。但克制和策略比饱和度和多样性更重要。可以大胆使用色彩，但务必有的放矢。