i-colorize

Identify color palette improvements and generate OKLCH-based strategies with WCAG contrast standards.

8|1|Updated Mar 14, 2026
One-click install
npx skills add https://github.com/Olatisunkanmi/claudefiles --skill i-colorize-olatisunkanmi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: i-colorize
Source: https://github.com/Olatisunkanmi/claudefiles/tree/main/skills/i-colorize
Command: npx skills add https://github.com/Olatisunkanmi/claudefiles --skill i-colorize-olatisunkanmi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams improve color palettes, contrast, and theming when designs feel dull, unbrand-aligned, or inaccessible.

Core Features & Use Cases

  • Current-state assessment: Identify color absence, low contrast, and branding gaps.
  • Color strategy creation: Propose a focused 2-4 color palette beyond neutrals, using perceptually uniform OKLCH palettes, with accessibility in mind.
  • Application guidance: Define semantic color mappings, accent usage, backgrounds, borders, typography, and hover states.
  • Implementation planning: Provide concrete steps and verification criteria to apply the palette consistently across UI.
  • Use Case: Example: brighten a grayscale UI by introducing 2 primary colors and 1 accent to improve hierarchy and personality.

Quick Start

Share the current design context and brand guidelines, and I will propose a color strategy and apply it to your UI.

Frequently Asked Questions about i-colorize

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve a monochrome UI color palette to enhance hierarchy and warmth?

To improve a monochrome UI color palette, introduce a focused 2-4 color strategy beyond neutrals to enhance semantic meaning, visual hierarchy, and accessibility. This process utilizes perceptually uniform OKLCH palettes to ensure colors feel cohesive and brand-aligned.

How does OKLCH color space work for generating accessible UI design systems?

OKLCH color space generates accessible UI design systems by creating perceptually uniform color palettes that maintain consistent visual lightness across hues. This ensures semantic color mappings and typography meet WCAG contrast standards while providing a cohesive appearance.

What is the best way to apply a scoped color strategy to existing design components?

The best way to apply a scoped color strategy is to define semantic color mappings for backgrounds, borders, typography, and hover states using 2-4 primary colors and accents. You then follow a concrete implementation plan with specific verification criteria.

Can I use this color theming approach to fix low contrast and accessibility gaps in my current design?

Yes, you can fix low contrast and accessibility gaps by conducting a current-state assessment of your design to identify color absence and branding issues. The strategy then specifies WCAG contrast requirements to ensure the new theming passes accessibility verification.

What brand guidelines and design context do I need to provide for color strategy creation?

You need to provide your current design context and existing brand guidelines to initiate color strategy creation. This input allows the system to assess branding gaps and propose a focused, accessible color palette that aligns with your specific visual identity.

Why does my grayscale design lack personality and how can theming fix it?

A grayscale design lacks personality due to color absence and low contrast, making the hierarchy feel dull. Theming fixes this by introducing 2 primary colors and 1 accent, applying a scoped color strategy to improve visual structure and semantic meaning.