colorize

Apply a strategic color plan to UI designs with semantic roles and WCAG accessibility.

1|Updated Mar 22, 2026
One-click install
npx skills add https://github.com/samcannas/samscode --skill colorize-samcannas
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/samcannas/samscode/tree/main/skills/catalog/colorize
Command: npx skills add https://github.com/samcannas/samscode --skill colorize-samcannas

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.

Core Features & Use Cases

  • Semantic color usage to convey status and meaning
  • Accent, brand-aligned color application for UI elements and typography
  • Guidance for background, surfaces, and accessibility while maintaining cohesion

Quick Start

Apply a strategic color plan to the current UI and present a brand-aligned color palette.

Frequently Asked Questions about colorize

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

FAQPage Schema
How do I add strategic color to a dull UI design?

To add strategic color to a dull UI design, apply a brand-aligned color palette with semantic color roles. This introduces visual warmth and personality while improving readability, hierarchy, and emotional tone across interface elements.

Can I use semantic color roles to convey status in UI prototyping?

Yes, you can use semantic color roles to convey status and meaning in UI prototyping. This approach applies accent and brand-aligned colors to elements and typography to clearly communicate system status and visual hierarchy.

What is the best way to ensure UI color strategy meets WCAG accessibility standards?

The best way to ensure UI color strategy meets WCAG accessibility standards is to apply semantic color roles while checking contrast for backgrounds, surfaces, and typography. This maintains visual cohesion and accessibility per WCAG guidelines.

How do I apply a brand-aligned color palette during a brand refresh project?

To apply a brand-aligned color palette during a brand refresh, introduce strategic semantic colors to monochromatic or gray interfaces. This improves the emotional tone and visual hierarchy while maintaining brand cohesion across UI elements.

When do I need to improve readability and hierarchy in monochromatic interfaces?

You need to improve readability and hierarchy in monochromatic interfaces when designs lack visual warmth and personality. Introducing a strategic color plan with defined palettes resolves dull layouts by adding meaning through accent colors and semantic roles.