colorize

Apply a limited color palette to UI components with WCAG-compliant contrast checks.

Updated Oct 30, 2025

Search Tags:#theming #accessibility #ui-design #design-systems #color-strategy #brand-colors #colorize

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

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

Color strategy planning and semantic color assignment to UI components
Accessibility-conscious color application with contrast checks
Brand-aligned theming and gradual rollout across surfaces
Use case: apply a cohesive color system to headers, CTAs, and icons to improve recognition

Quick Start

Provide a brand color palette and start applying it to primary UI components to establish the baseline.

Frequently Asked Questions about colorize

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

FAQPage Schema

How do I apply a color palette to UI components while maintaining WCAG accessibility?▼

To apply a color palette accessibly, assign semantic colors to UI components and verify WCAG-compliant contrast. This ensures visual hierarchy and mood are preserved while preventing contrast failures.

What is the 60/30/10 color balance rule for UI design systems?▼

The 60/30/10 color balance is a theming strategy that distributes a limited palette across key UI components. It establishes visual hierarchy by allocating dominant, secondary, and accent proportions to enhance interface clarity.

How do I add warmth and visual hierarchy to a monochromatic UI design?▼

Add warmth to monochromatic UI by strategically introducing a purposeful, limited palette to key components like headers and CTAs. This color strategy enhances visual recognition and improves overall interface mood.

Can I use brand colors for theming semantic elements without failing contrast checks?▼

Yes, you can apply brand colors to semantic elements like buttons and links while ensuring accessibility by checking contrast. The system satisfies visual plans through defined palettes and WCAG-compliant adjustments.

Do I need a predefined brand color palette to start theming my interface?▼

You need a predefined brand color palette to start theming your interface. Providing this baseline allows you to begin applying semantic color assignments to primary UI components for cohesive visual recognition.