colorize

Introduce strategic color palettes into monochromatic user interfaces with semantic and accessible application.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces built with pure grayscale or a single timid accent feel flat and fail to communicate state, hierarchy, or brand personality. This Skill guides the deliberate introduction of color so every hue carries meaning instead of creating visual chaos. ## Core Features & Use Cases - Color Opportunity Assessment: Analyzes the current UI for color absence, missed semantic opportunities, and existing brand colors before making changes. - 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, and typography while enforcing WCAG contrast ratios. - Use Case: A dashboard uses only gray tones and users cannot distinguish order statuses at a glance. The Skill adds green/amber/red status badges, a branded primary button color, and warm-tinted neutral surfaces. ## Quick Start Ask the AI to colorize the orders dashboard so status badges, primary actions, and background surfaces use a purposeful brand-aligned palette.

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 without making it chaotic?▼

Choose 2-4 colors beyond neutrals and assign each a semantic purpose, such as green for success or one brand color for primary actions. Follow a 60/30/10 distribution so one dominant color owns most colored elements while accents stay rare.

How many colors should a UI palette have?▼

Limit the palette to 2-4 colors beyond neutrals, structured as a dominant color at 60 percent, a secondary at 30 percent, and a high-contrast accent at 10 percent. More colors dilute meaning and create visual noise.

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

OKLCH is perceptually uniform, so equal steps in lightness look equal to the human eye. This makes it reliable for generating harmonious color scales and tinted neutrals, unlike HSL where equal numeric steps produce uneven perceived brightness.

Does adding color to a UI affect accessibility?▼

Yes, all colored text must meet WCAG contrast ratios of 4.5:1 for text and 3:1 for UI components. Color must never be the only indicator of state; pair it with icons, labels, or patterns so colorblind users can still interpret meaning.

When should I not add more color to an interface?▼

Avoid adding color when the interface already has a functioning palette, when color would carry no semantic meaning, or when it would break temperature consistency of an established warm or cool scheme. Random color application without purpose degrades hierarchy.