colorize

Introduce strategic color palettes into monochromatic interface designs.

Updated Apr 15, 2026
One-click install
npx skills add https://github.com/joaopaulotr/PesquiseMaisHealth --skill colorize-joaopaulotr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/joaopaulotr/PesquiseMaisHealth/tree/main/.agents/skills/colorize
Command: npx skills add https://github.com/joaopaulotr/PesquiseMaisHealth --skill colorize-joaopaulotr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces built with pure grayscale or a single timid accent often look dull, lack visual hierarchy, and fail to communicate state or meaning. This Skill guides the systematic introduction of purposeful color so designs gain warmth, hierarchy, and semantic clarity without becoming chaotic. ## Core Features & Use Cases - Color Opportunity Assessment: Analyzes the current design to find where color adds meaning, hierarchy, categorization, or delight, factoring in existing brand colors. - Strategic Palette Planning: Defines a 60/30/10 dominant-secondary-accent structure with 2-4 colors beyond neutrals, using OKLCH for perceptually uniform scales. - Systematic Application: Applies color across semantic states, CTAs, backgrounds, data visualization, borders, typography, and decorative elements while enforcing WCAG contrast and color-blind safety. - Use Case: A dashboard built entirely in grays feels lifeless. Use this Skill to add green success indicators, a branded primary button color, warm tinted surfaces, and colored section headers while keeping the palette restrained and accessible. ## Quick Start Use the colorize skill to add strategic color to my dashboard, which currently looks too gray and dull.

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 gray or monochromatic UI design?

Start by assessing where color adds meaning, such as semantic states, primary actions, and section hierarchy. Then define a small palette of 2-4 colors beyond neutrals and apply them systematically using a 60/30/10 dominant-secondary-accent balance.

How many colors should a UI color palette have?

Choose 2-4 colors beyond neutrals, with one dominant color covering about 60% of colored elements, a secondary at 30%, and an accent at 10%. Using every color in the rainbow creates chaos rather than hierarchy.

Why use OKLCH instead of hex or HSL for UI colors?

OKLCH is perceptually uniform, meaning equal steps in lightness look equal to the human eye. This makes it well suited for generating harmonious color scales and consistent tints across a design system.

Does adding color to a UI affect accessibility?

Yes, all color combinations must meet WCAG contrast ratios of 4.5:1 for text and 3:1 for UI components. Color should never be the only indicator; pair it with icons, labels, or patterns so color-blind users can still interpret states.

When should I not add more color to a design?

Avoid adding color when it would be applied randomly without semantic meaning, when everything becomes colorful and hierarchy is lost, or when it defaults to generic purple-blue gradients. Strategic restraint matters more than saturation and variety.