manastalukdar UI Colorize
I'll audit the color usage in your UI, identify where color is absent or arbitrary, and propose a coherent palette with OKLCH coordinates and WCAG AA contrast ratios.
Purpose
Monochromatic UIs feel flat; arbitrary color feels amateurish. This skill introduces color strategically — anchored to a single hue, expressed with OKLCH for perceptual consistency, and validated for accessibility.
Usage
/ui-colorize— audit changed UI files and propose color additions/ui-colorize [file]— target a specific file/ui-colorize --apply— apply proposed palette to files after user approval
Behavior
Step 1 — Detect existing color usage
# Find current color values
grep -rn "#[0-9a-fA-F]\{3,8\}\|rgb(\|hsl(\|oklch(\|color:" \
--include="*.css" --include="*.scss" --include="*.tsx" | head -30
# Check for design system color tokens
grep -rn "primary\|secondary\|accent\|brand\|surface\|muted" \
--include="*.css" --include="tailwind.config*" | head -20
# Check for the cream/sand/beige trap
grep -rni "cream\|sand\|beige\|bone\|ivory\|eggshell\|#f[5-9][e-f][0-9a-f]\{2\}" \
--include="*.css" --include="*.scss" | head -10
Read the shape brief if present (.claude/cache/ui-shape/).
Step 2 — Assess color health
Report:
- Total unique colors found: N
- On a systematic scale? Yes/No (are values drawn from a consistent set?)
- Contrast failures? Check text/background pairs
- Cream trap detected? Flag explicitly if colors fall in OKLCH L 0.84–0.97, C < 0.06, hue 40–100 (warm white that looks clinical under artificial light)
- Missing color? Is the UI entirely gray with no accent or brand signal?
Step 3 — Propose palette
Based on register (from shape brief or inferred from file context):
Brand register palette:
Anchor hue: oklch(L C H) — one primary brand color
Light surface: oklch(0.98 0.005 H) — near-white with hue tint (not pure white, not cream)
Dark surface: oklch(0.15 0.01 H) — near-black with hue tint
Accent: oklch(L C H+120) — complementary, used sparingly (CTAs, highlights)
Status: standard red/amber/green in OKLCH
Product register palette:
Neutral surface hierarchy: oklch(0.99 0 0) → oklch(0.95 0 0) → oklch(0.90 0 0)
Single accent: oklch(0.55 0.18 H) — one purposeful color for primary actions
Status: oklch red/amber/green (accessible by default in OKLCH)
No decorative color
For each proposed color, state:
- OKLCH coordinates
- Hex equivalent
- Contrast ratio against white and black surfaces
- Intended use
Step 4 — Apply (with --apply flag or user confirmation)
- Propose changes as CSS custom properties
- Read affected files
- Apply in one Edit per file
:root {
--color-brand: oklch(0.55 0.18 255);
--color-surface: oklch(0.98 0.005 255);
--color-surface-muted: oklch(0.94 0.008 255);
--color-text: oklch(0.15 0.01 255);
--color-accent: oklch(0.60 0.20 195);
}
Examples
/ui-colorize src/styles/globals.css
→ finds 47 unique hex values, no system → proposes 6-token OKLCH palette
/ui-colorize --apply
→ proposes palette → waits for approval → applies to CSS files
Token Optimization
Expected range: 500–1,500 tokens
Early exit: If palette already uses OKLCH custom properties and passes contrast checks, report "Color system looks healthy" and stop.
Patterns used: Grep-before-Read, progressive disclosure (audit → propose → apply in stages)
Edge Cases
- Dark mode: propose both light and dark surface tokens; check contrast for both
- Design system already configured (Tailwind color scale): extend it rather than replace; propose additions only
- No CSS files (CSS-in-JS): propose palette as a theme object constant
Safety
Does not apply any color changes without user confirmation. Reads files before editing.