colorize

Introduce color to monochromatic UI with OKLCH values and WCAG contrast.

2|Updated Mar 21, 2026
One-click install
npx skills add https://github.com/Daiwik-Chilukuri/HTI-LAB-AGENTIC-AI --skill colorize-daiwik-chilukuri
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/Daiwik-Chilukuri/HTI-LAB-AGENTIC-AI/tree/main/.claude/skills/colorize
Command: npx skills add https://github.com/Daiwik-Chilukuri/HTI-LAB-AGENTIC-AI --skill colorize-daiwik-chilukuri

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Strategic application of color fixes interfaces that are overly monochromatic, improving visual hierarchy, semantic clarity, and emotional tone so users understand and enjoy the product more quickly.

Core Features & Use Cases

  • Opportunity assessment: Diagnose color absence, identify places where color can add meaning or delight, and check for brand constraints.
  • Palette & strategy: Propose a concise 2–4 color palette with dominant, secondary, and accent roles and guidance on percentage usage.
  • Semantic and UI application: Map colors to semantic states (success, error, warning, info), buttons, links, badges, charts, backgrounds, and focus rings while preserving WCAG contrast.
  • Use Cases: Revitalize a bland dashboard with meaningful status colors; add brand-consistent accents to a documentation site; colorize data visualizations for clearer comparison.
  • Technical guidance: Recommend OKLCH color values, accessibility checks, and testing strategies for color-blind users.

Quick Start

Ask the colorize skill to analyze the current interface screenshots or styles and produce a 3-color palette, semantic color map, and application plan that respects existing brand colors and WCAG contrast.

Frequently Asked Questions about colorize

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

FAQPage Schema
How do I add meaningful color to a monochromatic UI design?

To add meaningful color to a monochromatic UI design, diagnose color absence and apply a concise 2–4 color palette with dominant, secondary, and accent roles to establish visual hierarchy and emotional tone.

How do I map semantic color roles for UI states while preserving WCAG contrast?

Map semantic color roles by assigning specific palette colors to success, error, warning, and info states across buttons, badges, and focus rings, ensuring all combinations meet WCAG contrast ratio requirements for accessibility.

What is the best way to colorize a bland dashboard with brand color constraints?

The best way to colorize a bland dashboard with brand constraints is to assess existing brand colors, propose a compliant 2–4 color palette, and apply it strategically to status indicators, charts, and backgrounds for clearer comparison.

Why use OKLCH color values for UI design palettes?

Use OKLCH color values for UI design palettes because they are perceptually uniform, allowing consistent visual lightness and chroma adjustments across semantic states and brand-led product surfaces.

Does this colorization approach work for both web and mobile interfaces?

Yes, this colorization approach works for both web and mobile interfaces, applying semantic color mapping, accessibility checks, and brand-constrained accent application across diverse product surfaces.

How do I test UI color choices for color-blind users?

Test UI color choices for color-blind users by applying recommended testing strategies alongside OKLCH perceptually-uniform color values and WCAG contrast checks to ensure semantic clarity and accessibility.