colorize

Apply strategic color design to monochromatic interfaces with brand-aligned palettes.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of interfaces looking monochromatic, gray, dull, or lacking visual warmth and personality by introducing color with clear intent instead of random decoration.

Core Features & Use Cases

  • Assess color opportunities: Identify where color can improve hierarchy, meaning, wayfinding, and emotional tone using the current UI state and available brand colors.
  • Plan a purposeful palette: Define a 2–4 color strategy (plus neutrals) with dominant/accent/secondary roles and a consistent application plan.
  • Apply semantic and interactive color: Use color for status semantics (success/error/warning/info), emphasis (CTAs, headers, links), surfaces (tinted backgrounds), and visualization (charts/heatmaps) while preserving accessibility.

Quick Start

Ask the AI to colorize your UI by proposing a limited brand-aligned palette and specifying exactly where to apply semantic, accessible color across states, CTAs, surfaces, and icons.

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 monochromatic UI without losing visual hierarchy?▼

Plan a limited 2-4 color brand palette with dominant, accent, and secondary roles to define visual hierarchy. Apply these colors intentionally to semantic states, CTAs, and surfaces to improve meaning and warmth without random decoration.

What is the best way to map semantic state colors for UI design?▼

Assign distinct brand-aligned hues to success, error, warning, and info statuses to ensure clear state signaling. Maintain accessibility by verifying WCAG-conscious contrast and providing non-color-only indicators alongside the semantic mapping.

How do I use OKLCH for UI color strategy?▼

Use OKLCH color guidance to define perceptually uniform tints for surfaces and semantic states. This ensures consistent visual warmth and accessible contrast across charts, badges, and interactive elements throughout the interface.

Can I apply color strategy to charts and data visualizations?▼

Apply intentional accent colors to charts and heatmaps to convey visual meaning and hierarchy. Ensure the chosen brand palette colors maintain WCAG-conscious contrast and do not rely on color alone to convey critical data.

Do I need a brand palette plan before colorizing an interface?▼

Yes, you need a brand-aligned palette plan of 2-4 colors beyond neutrals before colorizing. This ensures color application is intentional, targeting hierarchy, wayfinding, and emotional tone instead of random decoration across the UI.