Can I use my own brand colors?

Absolutely. The skill is designed to first gather context from your codebase to ensure all color choices align with your existing brand identity and personality.

How does this prevent over-designing or 'rainbow vomit'?

The skill follows a strict strategy involving a 60-30-10 distribution rule and requires semantic justification for every color introduced to ensure restraint and purpose.

Why does it use OKLCH instead of HEX or RGB?

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

Does this skill support accessibility standards?

Yes, it prioritizes WCAG contrast ratios and ensures color is not the only indicator for information, helping you build inclusive interfaces.

Interface Colorizer

Name: Interface Colorizer
Author: cinjoff

bycinjoff

•

Design Tools

Transforms monochromatic or visually dull interfaces into engaging, purposeful designs using strategic color application.

The Interface Colorizer skill empowers Claude to move beyond grayscale designs by introducing sophisticated, brand-aligned color palettes. It systematically applies color to enhance hierarchy, convey semantic meaning (such as success or error states), and improve user wayfinding without overwhelming the interface. By prioritizing OKLCH color spaces and WCAG accessibility standards, it ensures that visual updates are both aesthetically pleasing and inclusive while avoiding the generic 'AI slop' aesthetic.

Key Features

01Automated WCAG-compliant contrast checking for accessible design

02Semantic color mapping for system states and status indicators

03Context-aware brand integration based on existing codebase patterns

04Sophisticated surface tinting using perceptually uniform OKLCH color spaces

05Strategic accent application for high-impact CTAs and navigation

061 GitHub stars

Use Cases

01Revitalizing a 'gray-box' MVP into a professional, production-ready interface

02Enhancing data visualization clarity through purposeful color coding and categories

03Establishing visual hierarchy and emotional warmth in complex, text-heavy dashboards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cinjoff/fhhs-skills colorize

For use in Claude.ai and ChatGPT