skills.rest
andersoncollab
andersoncollabCOMMUNITY
Explore all skills by this author →
GitHub

color-system

Generate accessible color palettes from a base color with WCAG contrast checks.

Updated Aug 23, 2026
Search Tags:#accessibility#tailwind#dark mode#design-tokens#color-system#gradients#wcag contrast
One-click install
npx skills add https://github.com/andersoncollab/design-agent --skill color-system-andersoncollab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-system
Source: https://github.com/andersoncollab/design-agent/tree/main/skills/color-system
Command: npx skills add https://github.com/andersoncollab/design-agent --skill color-system-andersoncollab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It removes the trial-and-error of building brand-ready, accessible color systems by generating cohesive palettes with proven color harmonies and WCAG contrast validation.

Core Features & Use Cases

  • Generate cohesive palettes from a base color: Uses color theory (60-30-10, complementary, analogous, split-complementary, triadic, monochromatic) to produce primary/secondary/accent sets.
  • Export production-ready design tokens: Outputs CSS custom properties and Tailwind config extensions plus light/dark variants.
  • Guarantee accessibility with WCAG contrast checks: Validates contrast ratios for body/large text and UI component thresholds to help prevent unreadable combinations.
  • Deliver gradient recipes: Provides a toolkit of gradient and texture-ready CSS patterns (including mesh/aurora/glass/noise effects) that align with the palette.

Quick Start

Use the instruction “create color palette from #3B82F6 for a production design system with CSS variables, Tailwind config, light/dark variants, WCAG contrast checks, and matching gradient recipes.”

Frequently Asked Questions about color-system

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

FAQPage Schema
How do I generate an accessible color palette from a single hex code?▼

Generate an accessible color palette by inputting a single base hex code to produce primary, secondary, and accent sets using color theory harmonies like complementary, analogous, and triadic, alongside WCAG contrast validation for text and UI components.

Can I export design tokens for Tailwind config and CSS variables from one base color?▼

You can export production-ready design tokens from one base color, generating CSS custom properties and Tailwind config extensions that include semantic token mapping and light/dark mode variants for design system integration.

What's the best way to validate WCAG contrast ratios for dark mode variants?▼

Validate WCAG contrast ratios for dark mode variants by checking generated color combinations against body text, large text, and UI component thresholds to prevent unreadable combinations and ensure accessibility compliance.

Does this approach provide gradient recipes that match my generated color system?▼

This approach provides gradient recipes that match your generated color system, delivering CSS patterns for mesh, aurora, glass, and noise texture effects that align directly with your cohesive palette.

Related Skills

Explore More Design & Creative Skills→
haojing8312haojing8312
154

color-font-skill

Generate presentation-ready color palettes and font pairings with hex codes.

Community
Basic
dz07dz07

Colors

Generate WCAG-compliant color palettes with semantic tokens and contrast calculations.

Community
Intermediate
kws-projectskws-projects
2

color-management

Manage design tokens in Tailwind CSS projects using OKLCH color spaces.

Official
Advanced
andronicsandronics
1

color-tools

Generate accessible color palettes and validate WCAG contrast for UI designs.

Community
Intermediate