skills.rest
microlinkhq
microlinkhqOFFICIAL
Explore all skills by this author →
Website𝕏@microlinkhqGitHub

colorize

Add strategic OKLCH color palettes to monochromatic interfaces with WCAG contrast validation.

142|31|Updated Jul 13, 2017
Search Tags:#accessibility#design system#ui design#OKLCH#visual hierarchy#color strategy#semantic states
One-click install
npx skills add https://github.com/microlinkhq/www --skill colorize-microlinkhq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/microlinkhq/www/tree/main/.agents/skills/colorize
Command: npx skills add https://github.com/microlinkhq/www --skill colorize-microlinkhq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you fix interfaces that look overly monochromatic, gray, or visually flat by introducing color with clear meaning instead of random decoration.

Core Features & Use Cases

  • Assess color opportunity by identifying where color can improve hierarchy, state communication, wayfinding, and emotional tone while staying on-brand.
  • Plan a strategic palette using a 60/30/10 distribution approach (dominant/secondary/accent) with a tight set of 2–4 brand-aligned colors beyond neutrals.
  • Introduce color systematically across semantic states (success/error/warning/info), accents (CTAs, links, icons, headings), surfaces (tinted backgrounds/cards), data visualization, and accessibility-safe borders and focus rings.
  • Verify and refine through hierarchy and meaning checks plus WCAG contrast validation to ensure color is helpful, not overwhelming.

Quick Start

Use the colorize skill to colorize your monochrome interface while preserving accessibility and applying brand-aligned semantic states and accent hierarchy.

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 monochrome UI without breaking visual hierarchy or WCAG contrast rules?▼

To add color to a monochrome UI, analyze the visual state and brand colors, select a limited harmonious palette using OKLCH, apply semantic and accent colors consistently, and validate accessibility with WCAG contrast rules.

What is the best way to plan a strategic color palette for flat or gray interfaces?▼

Planning a strategic color palette for flat interfaces involves assessing color opportunities for hierarchy and wayfinding, then applying a 60/30/10 distribution approach with a tight set of 2–4 brand-aligned colors beyond neutrals.

Can I use OKLCH to introduce semantic states and accent colors systematically?▼

Yes, you can use OKLCH to introduce semantic states like success, error, warning, and info, alongside accents for CTAs, links, and headings, ensuring color application is systematic and meaningfully applied across UI elements.

How do I apply tinted surfaces and data visualization colors to a design system?▼

Applying tinted surfaces and data visualization colors requires selecting a limited harmonious palette, distributing it systematically across UI components like tinted backgrounds and charts, and verifying the results through hierarchy checks and WCAG contrast validation.

When should I check WCAG contrast validation during a UI color refactor?▼

You should check WCAG contrast validation after applying semantic and accent colors to verify that the color additions improve hierarchy and meaning without overwhelming the user or failing accessibility-safe borders and focus rings.

Related Skills

Explore More Design & Creative Skills→
luyangliuableluyangliuable

colorize

Apply strategic color palettes to monochrome UI interfaces.

Community
Intermediate
Shaarav4795Shaarav4795

colorize

Define WCAG-compliant color palettes for monochromatic UI designs.

Community
Intermediate
teamniteoteamniteo
5

brand-designer

Generate WCAG-compliant brand color palettes using OKLCH hue rotation.

Official
Intermediate
yahya-azeemyahya-azeem

colorize

Add strategic UI color to monochromatic interfaces using brand colors and WCAG contrast.

Community
Advanced