skills.rest
anthril
anthrilOFFICIAL
Explore all skills by this author →
WebsiteGitHub

color-palette

Generate accessible brand color systems with WCAG-validated contrast and JSON output.

3|Updated Apr 1, 2026
Search Tags:#branding#wcag#contrast#colors#design-tokens#palette#oklch
One-click install
npx skills add https://github.com/anthril/official-claude-plugins --skill color-palette-anthril
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-palette
Source: https://github.com/anthril/official-claude-plugins/tree/main/plugins/brand-manager/skills/color-palette
Command: npx skills add https://github.com/anthril/official-claude-plugins --skill color-palette-anthril

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate a complete, accessible brand colour system from a single palette specification.

Core Features & Use Cases

  • Primary, secondary, semantic, and neutral colour ramps aligned to OKLCH lightness for consistent UI contrast.
  • WCAG 2.2 AA/AAA validated colour pairings to support accessible branding across web and apps.
  • Exports to design-tokens friendly JSON and provides a roadmap for token-based design systems.

Quick Start

Apply the colour-palette skill to generate a full palette for a brand's web and app design.

Frequently Asked Questions about color-palette

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

FAQPage Schema
How do I generate a WCAG-compliant brand color system from a single palette?▼

Generate a WCAG-compliant brand color system by specifying a single base palette to automatically produce primary, secondary, semantic, and neutral color ramps with validated contrast pairings.

What is OKLCH-based lightness management for UI color design tokens?▼

OKLCH-based lightness management is a color space technique ensuring consistent perceptual lightness across UI color ramps, providing stable contrast for accessible design tokens.

Can I validate WCAG 2.2 AA and AAA contrast ratios for my web and app palette?▼

Validate WCAG 2.2 AA and AAA contrast ratios for web and app palettes using the included contrast-checker.py script to certify accessible branding compliance.

How do I export accessible color ramps to a design-tokens compatible JSON format?▼

Export accessible color ramps to a design-tokens compatible JSON format directly from the generated palette output, ready for integration into token-based design systems.

Does this color system generator support semantic and neutral color tuning for product UI?▼

The color system generator supports product UI by producing an 11-step neutral ramp alongside semantic color tuning, ensuring adaptable and accessible interface states.

Why does my brand palette fail WCAG contrast validation across different UI components?▼

Brand palettes fail WCAG contrast validation when perceptual lightness is inconsistent; OKLCH-based lightness control aligns color ramps to ensure compliant pairings across components.

Related Skills

Explore More Design & Creative Skills→
SyntaxAsSpiralSyntaxAsSpiral
5

catppuccin-theming

Generate CSS variables, JSON palettes, and terminal themes from Catppuccin flavors.

Community
Intermediate
hopeoverturehopeoverture
6

ui-library-usage-auditor

Audit shadcn/ui component usage for accessibility and design-system conformance.

Community
Advanced
JansenAnalyticsJansenAnalytics
5

a11y-audit

Audit web content for WCAG accessibility issues and generate remediation reports.

Community
Intermediate
mikkermikker
102

oklch-skill

Convert hex, rgb, hsl inputs to OKLCH values for Tailwind v4 theming.

Community
Intermediate