skills.rest
l0lxl0lw
l0lxl0lwCOMMUNITY
Explore all skills by this author →
GitHub

colorize

Introduce strategic color palettes into monochromatic interface designs.

Updated Dec 18, 2025
Search Tags:#accessibility#frontend#color palette#wcag#ui design#oklch#semantic color
One-click install
npx skills add https://github.com/l0lxl0lw/dotfiles --skill colorize-l0lxl0lw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/l0lxl0lw/dotfiles/tree/main/ai/shared/skills/impeccable/colorize
Command: npx skills add https://github.com/l0lxl0lw/dotfiles --skill colorize-l0lxl0lw

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces built with pure grayscale or a single timid accent feel flat and fail to communicate state, hierarchy, or brand personality. This Skill guides the deliberate introduction of color so every hue carries semantic meaning instead of decorative noise. ## Core Features & Use Cases - Color Opportunity Assessment: Analyzes the current design for color absence, missed semantic opportunities, and existing brand colors before making changes. - Strategic Palette Planning: Defines a 60/30/10 dominant-secondary-accent structure with 2-4 colors beyond neutrals, using OKLCH for perceptually uniform scales. - Systematic Application: Applies color across semantic states, CTAs, tinted backgrounds, data visualization, borders, typography, and decorative elements while enforcing WCAG contrast ratios. - Use Case: A dashboard built entirely in gray needs warmth and clearer status communication. The Skill audits the UI, proposes an emerald/amber/rose semantic palette with warm-tinted neutrals, and applies it to badges, progress indicators, and primary actions. ## Quick Start Ask the AI to colorize the dashboard component so status states and primary actions use a purposeful brand-aligned palette.

Frequently Asked Questions about colorize

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add color to a grayscale UI without making it chaotic?▼

Choose 2-4 colors beyond neutrals and assign each a semantic role such as success, error, or primary action. Apply a 60/30/10 hierarchy where one dominant color covers most colored elements and accents stay rare.

What is the best way to build an accessible color palette for web UI?▼

Use OKLCH color values because equal lightness steps look perceptually equal, making harmonious scales easy to generate. Verify every text and component combination meets WCAG ratios of 4.5:1 for text and 3:1 for UI elements.

Why should I avoid pure gray backgrounds in interface design?▼

Pure gray like #f5f5f5 reads as flat and lifeless. Replacing it with a subtly warm or cool tinted neutral, such as oklch(97% 0.01 60), adds sophistication while preserving a neutral feel.

Can color alone indicate status in an accessible interface?▼

No, color must never be the only indicator because colorblind users may not distinguish it. Pair colored states with icons, labels, or patterns, and test red/green combinations for color blindness compatibility.

When should I not add more color to a design?▼

Avoid adding color when the palette already exceeds 2-4 hues, when colors lack semantic meaning, or when everything becomes colorful and hierarchy collapses. Strategic restraint matters more than saturation and variety.

Related Skills

Explore More Design & Creative Skills→
thnakonthnakon

colorize

Add color to web and product interfaces using semantic and emotional design principles.

Community
Intermediate
curiositechcuriositech
181

color-contrast-auditor

Audit color contrast against WCAG 2.1 and suggest accessible hex alternatives.

Official
Intermediate
booklib-aibooklib-ai
35

refactoring-ui

Apply Refactoring UI principles to improve visual hierarchy in UI designs.

Official
Intermediate
artivillaartivilla

tailwind-v4

Automate Tailwind v4 theming with CSS-first @theme directives and OKLCH tokens.

Community
Advanced