How does the Colorize skill choose specific colors?

The skill begins by gathering context regarding your target audience and brand personality. It then generates a strategic palette—usually 2-4 colors plus neutrals—using the OKLCH color space to ensure visual harmony and perceptual uniformity.

Does this skill help with web accessibility?

Yes. It mandates WCAG compliance for contrast ratios (4.5:1 for text) and ensures that color is never the only indicator for meaning, incorporating icons or labels for color-blind users.

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

It is a design principle for balancing color: 60% dominant neutral/primary color, 30% secondary color for variety, and 10% accent color for high-contrast key elements like CTAs.

Can I use my existing brand colors with this skill?

Absolutely. The skill is designed to prompt for existing brand colors and will infer them from your codebase if present to ensure the colorization is consistent with your identity.

Strategic UI Colorizer

Name: Strategic UI Colorizer
Author: SHUAXINDIARY

bySHUAXINDIARY

0•

Design Tools

Transforms monochromatic interfaces by strategically introducing purposeful color to improve hierarchy, engagement, and emotional tone.

The Strategic UI Colorizer skill enables Claude to move beyond bland, grayscale designs by applying intentional color systems that enhance user experience. It follows professional design principles like the 60-30-10 rule and leverages the OKLCH color space to create harmonious, perceptually uniform palettes. By gathering brand context and audience data before execution, it avoids generic 'AI slop' aesthetics, ensuring that every color serves a semantic or structural purpose while maintaining strict WCAG accessibility compliance. This skill is ideal for developers looking to add visual warmth, improve wayfinding, and create more expressive, brand-aligned frontends.

Key Features

01Accessibility-first design with automated contrast verification

02Context-aware brand and audience color synthesis

03OKLCH-based harmonious color scale generation

04Semantic mapping for success, error, warning, and info states

05Strategic application of accent colors and sophisticated background tints

060 GitHub stars

Use Cases

01Refreshing monochromatic or 'wireframe-style' dashboards with professional palettes

02Implementing semantic color systems for complex data visualization and status tracking

03Adding visual personality and brand alignment to generic CSS frameworks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shuaxindiary/index-page colorize

For use in Claude.ai and ChatGPT