colorize

Introduce strategic 2-4 color palettes to monochromatic UI designs with WCAG contrast verification.

5|Updated Apr 18, 2026
One-click install
npx skills add https://github.com/russosalv/NONoise --skill colorize-russosalv
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/russosalv/NONoise/tree/main/packages/skills/vendor/impeccable/colorize
Command: npx skills add https://github.com/russosalv/NONoise --skill colorize-russosalv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Colorize helps designers and product teams rescue interfaces that feel monochromatic, gray, or emotionally flat by introducing a restrained, purposeful color system that improves hierarchy, meaning, and delight while preserving brand constraints.

Core Features & Use Cases

  • Strategic palette design: Recommend 2–4 brand-aligned colors plus neutrals and specify dominant, secondary, and accent roles.
  • Semantic mapping: Assign colors to states (success, error, warning, info) and UI roles (primary actions, links, badges).
  • Accessibility-first guidance: Propose OKLCH-based color scales and WCAG-checked contrast pairs for text and UI components.
  • Use Case: Transform a gray admin dashboard by adding a dominant brand accent to primary CTAs, a secondary color for highlights, and clear semantic colors for status badges.

Quick Start

Use the colorize skill to generate a 2–4 color palette aligned to the brand, assign a dominant color to primary actions, map semantic state colors, and verify WCAG contrast.

Frequently Asked Questions about colorize

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

FAQPage Schema
How do I add semantic colors to a monochromatic UI dashboard?

To add semantic colors to a monochromatic UI dashboard, you introduce a 2-4 color palette mapping specific hues to states like success, error, warning, and info while verifying WCAG contrast for accessibility.

What is the best way to generate an accessible color palette for product interfaces?

The best way to generate an accessible color palette is using OKLCH perceptual color choices to create scales and verifying WCAG-checked contrast pairs for text and UI components.

How do I assign dominant and accent colors to improve UI visual hierarchy?

To improve UI visual hierarchy, assign a dominant brand color to primary actions and a secondary color for highlights, reserving accent colors for specific roles like badges and links.

Can I introduce strategic color to a design without breaking existing brand constraints?

Yes, you can introduce strategic color without breaking brand constraints by recommending 2-4 brand-aligned colors alongside neutrals and mapping them to semantic states.

Why does my gray interface lack warmth and how do I fix it?

A gray interface lacks warmth because it is monochromatic and emotionally flat; you fix it by introducing a restrained, purposeful color system that improves hierarchy and meaning.

Does semantic state mapping work for charts and status indicators?

Yes, semantic state mapping works for charts and status indicators by assigning specific brand-aligned colors to distinct states, ensuring clear visual hierarchy and user engagement.