colorize_skill

Overview

This skill adds strategic color to interfaces that are too monochromatic or lack visual warmth and personality. It introduces a restrained, purposeful palette and applies color to hierarchy, states, and moments of delight while respecting brand and accessibility constraints.

How this skill works

First, run the Context Gathering Protocol to collect design context and existing brand colors (if none, run teach-impeccable). Then analyze the UI for color absence, missed opportunities, and appropriate emotional tone. Finally, propose a 2-4 color palette, assign dominant/secondary/accent roles, and map colors to semantic states, actions, surfaces, and data visualizations.

When to use it

• UI feels flat, gray, or overly neutral and needs personality without redesign
• You need clearer hierarchy or visual emphasis for CTAs and important elements
• Status, categories, or data require quick, color-coded recognition
• Onboarding or marketing screens that must feel warmer or more inviting
• When brand colors exist but aren’t applied consistently across the product

Best practices

• Choose 2–4 colors beyond neutrals; pick a dominant (60%), secondary (30%), and accent (10%)
• Prefer OKLCH color definitions for perceptual uniformity and harmonious scales
• Apply semantic color consistently (success, error, warning, info) and don’t rely on color alone
• Keep WCAG contrast ratios (4.5:1 for text, 3:1 for UI) and test color-blind scenarios
• Use subtle tinted backgrounds, accent borders, and colored focus rings instead of overpowering fills

Example use cases

• Colorize a product dashboard: warm secondary background bands, green progress bars, blue info chips
• Introduce a primary brand color for the main CTA and a contrasting accent for destructive actions
• Improve data visualizations by assigning distinct OKLCH-based colors to series and heatmap intensities
• Add colored status badges and icon accents to a task list so states read at-a-glance
• Tint card surfaces with a warm or cool neutral to separate content areas without heavy borders