Does this skill help with accessibility?

Yes, it includes mandatory checks for WCAG contrast ratios and ensures that color is never the sole indicator of information, maintaining inclusivity.

What is the benefit of using OKLCH for color in this skill?

OKLCH is perceptually uniform, meaning changes in lightness or chroma appear consistent to the human eye, making it superior for generating harmonious and predictable UI scales.

Can I use my own brand colors with the colorize skill?

Absolutely. The skill follows a Context Gathering Protocol to identify and respect existing brand identities before suggesting an expanded palette.

How does the skill prevent 'rainbow vomit' or overwhelming designs?

It follows a strict 60/30/10 distribution strategy—60% dominant, 30% secondary, and 10% accent—to ensure color is used intentionally and maintains hierarchy.

Strategic UI Colorization

Name: Strategic UI Colorization
Author: pbakaus

bypbakaus

•

18,680

•

设计工具

Enhances monochromatic user interfaces by strategically applying purposeful, accessible, and brand-aligned color palettes.

The colorize skill transforms dull or gray interfaces into engaging, expressive designs by applying color with intent. It goes beyond simple aesthetics to improve wayfinding, hierarchy, and semantic meaning using the OKLCH color space for perceptual uniformity. By adhering to the 60/30/10 rule and WCAG accessibility standards, it ensures that color additions are functional and inclusive rather than overwhelming, helping developers inject personality and clarity into their applications while avoiding common design pitfalls like 'AI slop' gradients.

主要功能

01Implements semantic color systems for states like success, error, and warnings.

02Generates sophisticated tinted neutrals to replace flat, uninspiring grays.

03Applies the 60/30/10 rule to maintain visual hierarchy and balance.

04Automates WCAG-compliant contrast checks for all text and UI elements.

05Utilizes the OKLCH color space for perceptually uniform and harmonious palettes.

0618,680 GitHub stars

使用场景

01Revitalizing a 'boring' dashboard that lacks visual hierarchy or brand personality.

02Adding semantic feedback to complex forms to improve user error recovery and navigation.

03Modernizing legacy UIs by replacing pure grays with warm, sophisticated neutral tints.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pbakaus/impeccable colorize

For use in Claude.ai and ChatGPT