colorize

Generates a brand-aligned color introduction plan for grayscale user interfaces.

Updated Apr 29, 2026

Search Tags:#branding #accessibility #ui-design #design-system #visual-design #color-palette #colorize

Ready to run

npx skills add https://github.com/davidbasilefilho/skills --skill colorize-davidbasilefilho

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/davidbasilefilho/skills/tree/main/skills/colorize
Command: npx skills add https://github.com/davidbasilefilho/skills --skill colorize-davidbasilefilho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Colorize adds purposeful, brand-aligned color to monochrome interfaces to improve readability, hierarchy, and emotional impact.

Core Features & Use Cases

Semantic color: State indicators, status badges, progress indicators that convey meaning with color.
Accent color application: Primary actions, links, icons, headers, and hover states to reinforce brand.
Background and surfaces: Subtle tinted backgrounds, gradient depth, and cohesive card surfaces to improve readability and aesthetics.

Quick Start

Provide a purposeful color introduction plan for a grayscale UI to align with brand colors and improve visual hierarchy.

Frequently Asked Questions about colorize

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

FAQPage Schema

How do I add brand-aligned color to a grayscale UI design?▼

To add brand-aligned color to a grayscale UI, apply a defined 2-4 color palette across semantic states, accents, and surfaces to improve readability, hierarchy, and emotional impact.

What is the best way to assign color roles in a design system?▼

Assigning color roles in a design system involves defining dominant, secondary, and accent colors to reinforce brand identity while validating accessibility and visual cohesion across UI elements.

How do I apply semantic colors to UI state indicators and progress bars?▼

Apply semantic colors to UI state indicators by mapping purposeful brand colors to status badges and progress indicators, ensuring meaning is conveyed clearly while maintaining accessibility.

Can I use a limited color palette for dashboards and marketing pages?▼

Yes, you can use a limited 2-4 color palette for dashboards and marketing pages by assigning dominant, secondary, and accent roles to backgrounds, typography, and decorative elements.

How do I improve visual hierarchy with accent colors in forms?▼

Improve visual hierarchy in forms by applying accent colors to primary actions, links, icons, and hover states, which reinforces brand identity and guides user attention effectively.