skills.rest
tanaka-mambinge
tanaka-mambingeCOMMUNITY
Explore all skills by this author →
Website𝕏@iamt12eGitHub

colorize

Create a color palette and application plan for monochromatic user interfaces.

Updated Jan 2, 2026
Search Tags:#design#branding#ui#accessibility#color-palette#oklch#colorize
One-click install
npx skills add https://github.com/tanaka-mambinge/dotfiles --skill colorize-tanaka-mambinge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/tanaka-mambinge/dotfiles/tree/main/ai-configs/skills/impeccable-colorize
Command: npx skills add https://github.com/tanaka-mambinge/dotfiles --skill colorize-tanaka-mambinge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality, helping teams create more engaging and navigable interfaces.

Core Features & Use Cases

  • Purposeful color strategy: Defines a small, intentional palette (2-4 colors) and a plan for applying dominant, secondary, and accent colors across UI components.
  • Semantic & accessibility guidance: Provides rules for color meanings (success, error, warning, info) and ensures WCAG-conscious contrast.
  • Implementation guidance: Offers steps for context gathering, color planning, and consistent application across surfaces, headers, buttons, and data visualizations.

Quick Start

Provide a UI design context (target audience, brand personality, and existing colors) and ask Colorize to propose a color palette and application plan.

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 monochromatic UI design without losing readability?▼

To colorize a monochromatic UI without losing readability, define a small intentional palette of 2-4 colors. Establish a structured plan for dominant, secondary, and accent colors while ensuring WCAG-conscious contrast for accessibility.

What is the best way to structure a color strategy for data-heavy dashboards?▼

The best way to structure a color strategy for data-heavy dashboards is to define semantic color meanings for status indicators like success, error, and warning. You must also establish clear application rules for background treatments, headers, and data visualizations.

How do I apply semantic colors to UI components while maintaining accessibility?▼

To apply semantic colors while maintaining accessibility, assign specific meanings to colors for success, error, warning, and info states. Use WCAG-conscious contrast ratios across surfaces, buttons, and visual elements to ensure text remains legible.

Can I use OKLCH to generate a UI color palette for web and mobile interfaces?▼

Yes, you can use OKLCH to generate a UI color palette for web and mobile interfaces. It helps define dominant, secondary, and accent colors for dashboards and forms, ensuring perceptually uniform color application across different screen surfaces.

What context do I need to provide to generate a UI color palette and application plan?▼

To generate a UI color palette and application plan, you need to provide context including your target audience, brand personality, and existing colors. This ensures the proposed colorization strategy improves visual warmth and hierarchy effectively.

Related Skills

Explore More Design & Creative Skills→
hi-yuki-922hi-yuki-922
1

i-teach-impeccable

Gather design context from codebase and user input into CLAUDE.md.

Community
Intermediate
LortunateLortunate
1

colorize

Apply a defined color palette to monochrome interfaces with WCAG contrast rules.

Community
Intermediate
ksciuskscius
2

web-accessibility

Enforce WCAG 2.1 AA accessibility requirements for web UI components.

Community
Intermediate
byonk19-svgbyonk19-svg

colorize

Apply strategic color palettes to user interfaces for hierarchy and accessibility.

Community
Advanced