colorize

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces built with pure grayscale or a single timid accent feel dull and fail to communicate state, hierarchy, and meaning. This Skill guides the deliberate introduction of color so every hue serves a purpose instead of creating visual chaos. ## 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 OKLCH-based harmonious scales. - Systematic Application: Applies color across semantic states, CTAs, backgrounds, data visualization, borders, typography, and decorative elements while enforcing WCAG contrast ratios. - Use Case: A dashboard built entirely in gray tones needs warmth and clearer status communication. The Skill audits the UI, proposes a warm neutral base with green/amber/red semantic states and one brand accent, then applies it while verifying accessibility. ## Quick Start Ask the AI to colorize the dashboard page because it looks too gray and needs a warmer, more expressive 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 gray or monochromatic UI design?▼

Start by assessing where color adds meaning, such as semantic states, hierarchy, and wayfinding. Then choose 2-4 colors beyond neutrals, assign a dominant 60% color with 30% and 10% accents, and apply them systematically to CTAs, badges, and backgrounds.

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 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 of state; pair it with icons, labels, or patterns so colorblind users are not excluded.

What are common mistakes when adding color to interfaces?▼

Common mistakes include applying color randomly without semantic meaning, using pure black or white for large areas, putting gray text on colored backgrounds, defaulting to generic purple-blue gradients, and making everything colorful, which defeats the purpose of strategic emphasis.