Can I use my existing brand colors with this skill?

Absolutely. The skill includes a mandatory preparation protocol to identify and integrate existing brand colors before suggesting or applying any additions.

How does the skill prevent the 'rainbow vomit' effect?

It follows a strict 'Plan Color Strategy' phase that limits the palette to 2-4 purposeful colors beyond neutrals, using a 60-30-10 distribution to ensure balance.

What is OKLCH and why does this skill use it?

OKLCH is a modern color space that is perceptually uniform. The skill uses it to create harmonious color scales where lightness levels look consistent to the human eye across different hues.

Does this skill support accessibility standards?

Yes, the skill prioritizes WCAG contrast compliance and ensures that color is never the only indicator for information, making designs inclusive for color-blind users.

Strategic UI Colorizer

Name: Strategic UI Colorizer
Author: Moliboy5000

byMoliboy5000

0•

디자인 도구

Enhances monochromatic interfaces by applying purposeful, accessible, and brand-aligned color strategies to improve visual hierarchy and user engagement.

The Colorize skill is designed to transform dull, grayscale, or visually uninspired interfaces into professional, high-impact designs through the strategic application of color. By leveraging modern color spaces like OKLCH for perceptual uniformity and following a rigorous context-gathering protocol, it introduces color with intent—focusing on semantic meaning, status indicators, and navigational wayfinding. The skill ensures that every design choice is rooted in accessibility (WCAG compliance) and brand consistency, avoiding visual clutter while maximizing emotional resonance and functional clarity.

주요 기능

010 GitHub stars

02Semantic Color Mapping for status and state indicators

03OKLCH-based color generation for perceptual uniformity

04Visual hierarchy optimization using the 60-30-10 design rule

05Automated tinting of neutrals and surfaces for visual warmth

06WCAG accessibility and contrast ratio verification

사용 사례

01Transforming a 'wireframe-style' dashboard into a production-ready, engaging interface

02Applying brand-specific identity to generic open-source UI components

03Improving the usability of complex data tables through semantic color-coding

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add moliboy5000/.claude colorize

For use in Claude.ai and ChatGPT