colorize

Introduce strategic color palettes into monochromatic interface designs with semantic and accessible application.

Updated Mar 24, 2026
One-click install
npx skills add https://github.com/Ssrrb/cerramos-codebase --skill colorize-ssrrb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/Ssrrb/cerramos-codebase/tree/main/.codex/skills/colorize
Command: npx skills add https://github.com/Ssrrb/cerramos-codebase --skill colorize-ssrrb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces that are purely grayscale or visually flat lack hierarchy, meaning, and personality. This Skill guides the deliberate introduction of color so that states, categories, and key actions become clear without overwhelming the design. ## Core Features & Use Cases - Color Opportunity Assessment: Analyzes the current design for color absence, missed semantic opportunities, and existing brand colors before making changes. - Strategic Palette Planning: Defines a 2-4 color palette with a 60/30/10 dominant-secondary-accent distribution and purposeful application rules. - Systematic Color Application: Applies color across semantic states, CTAs, backgrounds, data visualization, borders, typography, and decorative elements using OKLCH values. - Use Case: A dashboard built entirely in gray tones needs visual hierarchy. Use this Skill to add green success badges, a branded primary button color, warm tinted surfaces, and colored section headers while maintaining WCAG contrast compliance. ## Quick Start Use the colorize skill to add strategic color to my dashboard UI, which currently uses only gray tones.

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 grayscale UI design?▼

Start by assessing where color adds meaning: semantic states, hierarchy, and wayfinding. Then define a palette of 2-4 colors beyond neutrals, assign a dominant color to 60% of colored elements, and apply accents to primary actions, badges, and headers.

How many colors should a UI palette have?▼

Choose 2-4 colors beyond neutrals, following a 60/30/10 distribution: one dominant color, one secondary, and one high-contrast accent. 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 reliable 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. Never rely on color alone to convey meaning; pair it with icons, labels, or patterns so colorblind users are not excluded.

What are common mistakes when colorizing an interface?▼

Common mistakes include using pure black or white for large areas, putting gray text on colored backgrounds, defaulting to generic purple-blue gradients, and applying color randomly without semantic meaning. Neutrals should carry a subtle warm or cool tint.