| name | color-palette-generator |
| description | Generate accessible color palettes with WCAG compliance |
| allowed-tools | ["Read","Write","Edit","Bash","Glob","Grep"] |
| graph | {"domains":["domain:web-development"],"specializations":["specialization:ux-ui-design"],"skillAreas":["skill-area:color-theory","skill-area:visual-design"],"roles":["role:product-designer"],"workflows":["workflow:user-feedback-loop","workflow:product-discovery"]} |
Color Palette Generator Skill
Purpose
Generate accessible color palettes that comply with WCAG contrast requirements, create color scales, and export to design token formats.
Capabilities
- Create color scales from base colors
- Generate complementary, analogous, and triadic color schemes
- Ensure WCAG 2.1 AA/AAA contrast compliance
- Export palettes to design token formats (CSS, SCSS, JSON)
- Generate dark mode color variants
- Calculate color contrast ratios
- Suggest accessible color alternatives
Target Processes
- design-system.js
- component-library.js (colorSystemDesignTask)
- accessibility-audit.js
Integration Points
- chroma.js for color manipulation
- color-contrast-checker for WCAG validation
- Style Dictionary for token export
Input Schema
{