skills.rest
AkaraChen
AkaraChenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

colorize

Introduce strategic color palettes into monochromatic interface designs.

Updated Apr 4, 2026
Search Tags:#accessibility#frontend#color palette#wcag#ui design#visual hierarchy#oklch
One-click install
npx skills add https://github.com/AkaraChen/proxy-up --skill colorize-akarachen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/AkaraChen/proxy-up/tree/main/.agents/skills/colorize
Command: npx skills add https://github.com/AkaraChen/proxy-up --skill colorize-akarachen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces built with pure grayscale or a single timid accent often look dull, lack hierarchy, and fail to communicate state or meaning. This Skill guides the structured introduction of purposeful color so designs gain warmth, clarity, and personality without becoming chaotic. ## Core Features & Use Cases - Color Opportunity Assessment: Analyzes the current design to find where color adds semantic meaning, hierarchy, categorization, or delight. - 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, accents, backgrounds, data visualization, borders, typography, and decorative elements while enforcing WCAG contrast and accessibility rules. - Use Case: A dashboard built entirely in gray feels lifeless. Use this Skill to add green success indicators, a branded accent color for primary actions, warm tinted surfaces, and colored status badges while keeping contrast compliant. ## 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, hierarchy, and categorization. Then plan a palette of 2-4 colors beyond neutrals using a 60/30/10 dominant-secondary-accent split, and apply it systematically to actions, badges, backgrounds, and typography.

How many colors should a UI palette have?▼

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

Why use OKLCH instead of hex or HSL for color palettes?▼

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.

How do I keep colored UI accessible and WCAG compliant?▼

Maintain contrast ratios of at least 4.5:1 for text and 3:1 for UI components, and never rely on color alone to convey meaning. Pair colors with icons, labels, or patterns, and verify red/green combinations work for color-blind users.

What are common mistakes when adding color to interfaces?▼

Common mistakes include applying color randomly without semantic meaning, putting gray text on colored backgrounds, using pure black or white for large areas, and defaulting to generic purple-blue gradients. Every color should have a defined purpose.

Related Skills

Explore More Design & Creative Skills→
fauzanazzfauzanazz

colorize

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

Community
Intermediate
AutumnsGroveAutumnsGrove
5

gathering-ui

Design and implement accessible glassmorphism UI components with seasonal theming.

Community
Advanced
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
chris78reychris78rey

design-system-components

Generate HTML/Tailwind UI components and design tokens with CSS variables and reusable patterns.

Community
Basic