colorize

Add strategic color palettes and semantic roles to UI designs.

3|Updated May 23, 2026

Search Tags:#design #ui #accessibility #color #palette

Ready to run

npx skills add https://github.com/waynesutton/finder9 --skill colorize-waynesutton

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/waynesutton/finder9/tree/main/.codex/skills/colorize
Command: npx skills add https://github.com/waynesutton/finder9 --skill colorize-waynesutton

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.

Core Features & Use Cases

Define a purposeful color palette (2-4 colors beyond neutrals) aligned with brand/context.
Apply semantic color usage for status, hierarchy, and meaning (e.g., success = green, error = red, info = blue).
Use accent colors for primary actions, links, headers, and hover states to guide attention while preserving contrast.
Color surfaces, backgrounds, and cards with subtle tints and gradients to add warmth without overwhelming the interface.
Enforce cohesive, accessible color usage with consistent meanings and WCAG-compliant contrast guidelines.

Quick Start

Apply a 2-4 color palette to a UI and test contrast to ensure accessibility.

Frequently Asked Questions about colorize

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

FAQPage Schema

How do I add strategic color to a monochromatic user interface?▼

To add strategic color to a user interface, define a 2-4 color palette aligned with your brand and apply accent colors to primary actions, links, and headers to guide attention while preserving visual contrast.

Does this approach ensure WCAG-compliant contrast for UI accessibility?▼

Yes, enforcing cohesive, accessible color usage includes testing contrast to satisfy WCAG-compliant guidelines, ensuring that semantic colors and accent states remain accessible for all users.

What is the best way to define semantic color usage for status and hierarchy?▼

Defining semantic color usage for status and hierarchy involves applying consistent meanings across the interface, such as using green for success, red for error, and blue for info to improve usability.

Can I apply subtle tints and gradients to UI cards without overwhelming the design?▼

Yes, you can color surfaces, backgrounds, and cards with subtle tints and gradients to add visual warmth and personality to the design without overwhelming the overall user interface.

How do I document a color application strategy for style-system updates?▼

Documenting a color application strategy involves defining semantic and accent roles, establishing accessibility constraints, and recording the cohesive usage guidelines across components, pages, and documentation.

When should I avoid introducing accent colors into my design?▼

You should avoid introducing accent colors if your interface already relies on strict monochromatic constraints for specific accessibility needs, though strategic application is designed to preserve contrast and clarity.