Why does the skill prefer OKLCH over Hex or RGB?

OKLCH is a perceptually uniform color space, meaning that steps in lightness and chroma look consistent to the human eye, which is essential for creating harmonious and accessible UI scales.

What is the 60-30-10 rule mentioned in the skill?

It is a design principle where 60% of the UI uses a dominant neutral or brand color, 30% uses a secondary color, and 10% uses an accent color to create a balanced, professional look.

Can I use my existing brand colors with this skill?

Absolutely. The skill includes a mandatory preparation phase where it identifies or asks for your specific brand colors to ensure the new design remains consistent with your identity.

Does this skill ensure web accessibility?

Yes, the skill is programmed to prioritize WCAG compliance, ensuring all color combinations meet the necessary contrast ratios (4.5:1 for text) for readability and inclusion.

Strategic UI Colorization

Name: Strategic UI Colorization
Author: SHUAXINDIARY

bySHUAXINDIARY

0•

Design Tools

Enhances monochromatic user interfaces by strategically applying purposeful color palettes to improve hierarchy, meaning, and visual engagement.

The Colorize skill helps developers transform dull, grayscale, or under-designed interfaces into vibrant, professional UIs through the intentional application of color. It enforces a systematic approach, moving beyond arbitrary choices to implement semantic meaning for states, brand-aligned accentuation, and accessible contrast ratios. By utilizing modern color spaces like OKLCH and following established design principles like the 60-30-10 rule, it ensures that color additions enhance navigation and user experience rather than creating visual clutter. The skill prioritizes context-gathering to ensure every color choice reflects the target audience and brand personality.

Key Features

01Accessibility verification against WCAG contrast requirements

02Implementation of the 60-30-10 distribution rule for visual balance

03Semantic color mapping for success, error, warning, and info states

04Context-aware color selection based on brand personality and audience

050 GitHub stars

06Perceptually uniform color scaling using the OKLCH color space

Use Cases

01Improving UX wayfinding by adding semantic color coding to status badges and progress indicators

02Modernizing legacy CSS by replacing generic neutrals with sophisticated, tinted color scales

03Revitalizing a 'gray-box' prototype into a high-fidelity, brand-aligned interface

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shuaxindiary/index-page colorize

For use in Claude.ai and ChatGPT