colorize

Apply semantic OKLCH color palettes to grayscale UI mockups with WCAG contrast.

1|Updated Oct 27, 2025

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

Ready to run

npx skills add https://github.com/sandrasocial/sselfie-9g --skill colorize-sandrasocial

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/sandrasocial/sselfie-9g/tree/main/.agents/skills/colorize
Command: npx skills add https://github.com/sandrasocial/sselfie-9g --skill colorize-sandrasocial

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designs that are entirely grayscale or lack visual warmth can feel dull, unengaging, and fail to convey brand personality, leading to user fatigue and lower conversion.

Core Features & Use Cases

Strategic palette creation: Choose 2‑4 brand‑aligned colors beyond neutrals and define dominant, secondary, and accent roles.
Semantic color application: Assign colors for success, error, warning, info, and UI states to improve meaning and hierarchy.
Accessibility assurance: Verify WCAG contrast ratios and test for color‑blind safety while avoiding reliance on color alone.
Implementation guidance: Provide detailed instructions for coloring buttons, links, icons, backgrounds, data visualizations, and decorative elements using OKLCH values.

Quick Start

Use the colorize skill by saying, “Add strategic color to the landing page design using our brand palette.”

Frequently Asked Questions about colorize

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

FAQPage Schema

How do I add purposeful color to a grayscale UI mockup without losing visual hierarchy?▼

To add purposeful color to a grayscale UI mockup, select a limited 2-4 color brand palette and apply it semantically to dominant, secondary, and accent roles. This ensures visual warmth while maintaining strict interface hierarchy and meaning.

What is the best way to ensure my interface color palette meets WCAG contrast ratios?▼

The best way to ensure your interface color palette meets WCAG contrast ratios is to verify contrast during palette selection and test for color-blind safety. Using OKLCH color values helps maintain perceptual uniformity and accessibility compliance.

How do I apply semantic colors to UI components like buttons and data visualizations?▼

To apply semantic colors to UI components, assign specific hues for success, error, warning, and info states. This process improves meaning across buttons, links, icons, and data visualizations without relying on color alone to convey critical information.

Can I use OKLCH color values for implementing brand-aligned design system palettes?▼

Yes, you can use OKLCH color values to implement brand-aligned design system palettes. OKLCH provides harmonious color implementation by defining colors in a perceptually uniform space, ensuring consistent visual brightness across your UI components.

Why does my monochromatic design feel dull and fail to convey brand personality?▼

A monochromatic design feels dull and fails to convey brand personality because it entirely lacks visual warmth and strategic color application. Introducing a limited palette with semantic meaning resolves user fatigue and improves conversion rates.

Do I need a predefined brand palette before colorizing a visually bland interface?▼

You do not strictly need a predefined brand palette, but providing brand-aligned colors helps the colorizing process. The skill can strategically select 2-4 colors to define dominant, secondary, and accent roles for your visually bland interface.