skills.rest
chroniicallydiistracted
chroniicallydiistractedCOMMUNITY
Explore all skills by this author →
GitHub

colorize

Apply restrained OKLCH-based color palettes to UI designs with semantic mapping.

Updated May 14, 2026
Search Tags:#accessibility#visual design#color palette#semantic design#oklch#ui hierarchy#status badges
One-click install
npx skills add https://github.com/chroniicallydiistracted/LorcanaChamp --skill colorize-chroniicallydiistracted
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/chroniicallydiistracted/LorcanaChamp/tree/main/references/lorcana-simulator/.agents/skills/colorize
Command: npx skills add https://github.com/chroniicallydiistracted/LorcanaChamp --skill colorize-chroniicallydiistracted

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses designs that feel monochromatic, gray, or visually cold by introducing color with clear meaning and improved visual hierarchy.

Core Features & Use Cases

  • Strategic color planning: Creates a restrained palette (typically 2–4 colors) with defined dominance and accent ratios to avoid rainbow inconsistency.
  • Semantic-first color application: Applies color to states, badges, progress, categories, and feedback using consistent conventions (e.g., success/warning/error).
  • UI and accessibility refinement: Uses OKLCH for harmonious color scales and checks that contrast and non-color cues support readability and inclusivity.

Quick Start

Use the colorize skill to analyze my current UI design state and propose a minimal, semantic color palette using OKLCH, including exactly where each color should be applied for hierarchy, badges, and interactive states.

Frequently Asked Questions about colorize

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

FAQPage Schema
How do I add semantic color to a UI design without causing accessibility violations?▼

To add semantic color without accessibility violations, define a restrained 2–4 color palette using OKLCH-based tinting, establish dominance ratios for hierarchy, and ensure non-color cues support WCAG readability.

What is the best way to create a color palette for dashboards and status badges?▼

The best way to create a color palette for dashboards and status badges is semantic-first application, mapping consistent conventions like success, warning, and error to states, categories, and progress indicators across components.

How do I use OKLCH to build harmonious color scales for interface hierarchy?▼

Use OKLCH to build harmonious color scales by generating tints with consistent lightness and chroma, then apply dominance ratios to separate primary actions, surface backgrounds, and interactive states for clear visual hierarchy.

Can I fix a monochromatic or visually cold interface by applying accent colors?▼

You can fix a monochromatic or visually cold interface by strategically applying purposeful accent colors to headers, CTAs, and surfaces, adding warmth and visual meaning while maintaining a strict 2–4 color limit.

Does this approach to UI color planning work for forms and interactive components?▼

Yes, this UI color planning approach works for forms and interactive components by applying semantic mapping to feedback, states, and progress, ensuring color-only signaling is avoided across tinted surfaces.

Related Skills

Explore More Design & Creative Skills→
MrlykMrlyk

colorize

Apply semantic color palettes to UI components, states, and surfaces.

Community
Advanced
jacob-balslevjacob-balslev
1

color-system-design

Construct accessible color palettes and semantic tokens for light and dark themes.

Community
Advanced
ihlamuryihlamury
73

beehiiv-ui-skills

Enforce Beehiiv's light-mode UI design system with Inter font and 4px grid.

Community
Intermediate
andronicsandronics
1

color-tools

Generate accessible color palettes and validate WCAG contrast for UI designs.

Community
Intermediate