Why does it use OKLCH instead of Hex or RGB?

OKLCH is perceptually uniform, meaning equal steps in lightness look consistent to the human eye, which is essential for generating harmonious and professional color scales.

How does it handle web accessibility?

It enforces WCAG contrast standards (4.5:1 for text) and ensures that color is never the only indicator for information, making the UI accessible to all users.

Does this skill support existing brand colors?

Yes, the skill prioritizes gathering brand context first to ensure all color additions align with your existing design system and brand identity.

Can I use this for both light and dark modes?

Absolutely. The skill applies color strategically based on surface context, ensuring appropriate depth and readability across different themes.

Strategic UI Colorizer

Name: Strategic UI Colorizer
Author: SHUAXINDIARY

bySHUAXINDIARY

0•

Design Tools

Transforms monochromatic or dull interfaces into engaging, accessible, and brand-aligned designs using strategic color application.

Strategic UI Colorizer is a specialized Claude Code skill designed to breathe life into monochromatic web interfaces by introducing purposeful color. It systematically analyzes existing codebases to identify opportunities for semantic meaning, visual hierarchy, and user delight while strictly adhering to brand guidelines and WCAG accessibility standards. By utilizing the OKLCH color space for perceptual uniformity and applying the 60/30/10 rule, this skill ensures that color additions are intentional and sophisticated rather than overwhelming, making it an essential tool for developers looking to enhance their frontend aesthetic without compromising usability.

Key Features

01Semantic color mapping for system states like success, error, and warnings

02Perceptually uniform color scaling using the OKLCH color space

03Refinement of neutrals with subtle warm or cool tints to avoid flat grays

04Balanced hierarchy implementation using the 60/30/10 color rule

050 GitHub stars

06Automated WCAG contrast compliance checks for all text and UI elements

Use Cases

01Converting a wireframe-like grayscale dashboard into a professional, data-driven interface

02Infusing brand personality into generic UI kits or component libraries

03Adding semantic state indicators and badges to a complex feature list or data table

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shuaxindiary/index-page colorize

For use in Claude.ai and ChatGPT