color-architect

Generate accessible UI color palettes with OKLCH/HCT and WCAG AA contrast validation.

1|Updated Dec 20, 2025

Search Tags:#branding #theming #accessibility #contrast #design-system #color-palette #color-theory

Ready to run

npx skills add https://github.com/ari-ayvazyan/AISkills --skill color-architect

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: color-architect
Source: https://github.com/ari-ayvazyan/AISkills/tree/main/skills/color-architect
Command: npx skills add https://github.com/ari-ayvazyan/AISkills --skill color-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generating cohesive, accessible color palettes that align with brand strategy and design systems, reducing guesswork and ensuring consistent theming across products.

Core Features & Use Cases

Generate primary, secondary, neutral, and semantic color scales using perceptually uniform color models (OKLCH/HCT) for consistent visual weight.
Create light and dark mode variants that preserve contrast and emotional impact across surfaces.
Map semantic roles (success, warning, error, info) and enforce WCAG-compliant contrast in UI components.
Integrate into the detected theme file and provide a clear, auditable summary of changes for design handoffs.

Quick Start

Generate a cohesive color palette for a brand's UI and apply it to the current theming system.

Frequently Asked Questions about color-architect

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

FAQPage Schema

How do I generate a UI color palette that meets WCAG AA contrast standards?▼

Generate WCAG AA-compliant UI color palettes by applying perceptual color models like OKLCH or HCT to create a full tonal scale. This process validates all color combinations against contrast targets, ensuring accessible light and dark mode theming for your design system.

What is the best way to create light and dark mode variants for a design system?▼

Create light and dark mode variants by mapping semantic roles such as success, warning, error, and info across a perceptually uniform color scale. This approach preserves visual weight and emotional impact while enforcing contrast compliance across all UI surfaces.

How does OKLCH color theory help with building accessible brand theming?▼

OKLCH color theory helps build accessible brand theming by using a perceptually uniform color model to generate consistent tonal scales. This ensures visual weight remains balanced across light and dark modes while automatically validating combinations against WCAG AA contrast targets.

Can I automatically apply a generated color scale to my existing theme file?▼

Yes, you can automatically apply a generated color scale by integrating the palette into your detected theme file. The process updates the exact file paths and provides a clear, auditable summary of changes for design handoffs.

Do I need a specific framework to generate semantic colors for my UI components?▼

No specific framework dependency is required to generate semantic colors for UI components. The palette generation maps semantic roles like success, warning, error, and info to a neutral foundation, validating them against WCAG targets for direct integration.

Why does my design system need a neutral foundation color scale?▼

A neutral foundation color scale provides the structural baseline for your design system, ensuring consistent surface colors across light and dark modes. It anchors the primary, secondary, and semantic colors while maintaining WCAG-compliant contrast across UI components.