home / skills / a5c-ai / babysitter / color-palette-generator

color-palette-generator skill

/plugins/babysitter/skills/babysit/process/specializations/ux-ui-design/skills/color-palette-generator

This skill generates accessible WCAG-compliant color palettes, including scales and dark mode variants, exporting design tokens for CSS, SCSS, or JSON.

npx playbooks add skill a5c-ai/babysitter --skill color-palette-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

2.4 KB

---
name: color-palette-generator
description: Generate accessible color palettes with WCAG compliance
allowed-tools:
  - Read
  - Write
  - Edit
  - Bash
  - Glob
  - Grep
---

# 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

```json
{
  "type": "object",
  "properties": {
    "baseColors": {
      "type": "array",
      "items": { "type": "string" },
      "description": "Base colors in hex format"
    },
    "schemeType": {
      "type": "string",
      "enum": ["complementary", "analogous", "triadic", "split-complementary", "monochromatic"]
    },
    "contrastLevel": {
      "type": "string",
      "enum": ["AA", "AAA"],
      "default": "AA"
    },
    "includeDarkMode": {
      "type": "boolean",
      "default": true
    },
    "outputFormat": {
      "type": "string",
      "enum": ["css", "scss", "json", "tokens"],
      "default": "tokens"
    }
  },
  "required": ["baseColors"]
}
```

## Output Schema

```json
{
  "type": "object",
  "properties": {
    "palette": {
      "type": "object",
      "description": "Generated color palette with scales"
    },
    "contrastMatrix": {
      "type": "array",
      "description": "Contrast ratios between color pairs"
    },
    "darkModePalette": {
      "type": "object",
      "description": "Dark mode color variants"
    },
    "tokenOutput": {
      "type": "string",
      "description": "Exported tokens in requested format"
    },
    "accessibilityReport": {
      "type": "object",
      "description": "WCAG compliance report"
    }
  }
}
```

## Usage Example

```javascript
const result = await skill.execute({
  baseColors: ['#1a73e8', '#34a853', '#ea4335'],
  schemeType: 'complementary',
  contrastLevel: 'AA',
  includeDarkMode: true,
  outputFormat: 'tokens'
});
```

Overview

This skill generates accessible color palettes that meet WCAG contrast requirements and exports them as design tokens. It creates color scales, complementary and analogous schemes, and produces dark-mode variants ready for design systems. The output includes contrast matrices and an accessibility report for quick validation.

How this skill works

Provide base hex colors and choose a scheme type, contrast level (AA or AAA), and output format. The skill builds color scales using color manipulation, evaluates every pair against WCAG contrast thresholds, and adjusts or suggests alternatives to reach compliance. It can produce dark-mode variants and export tokens in CSS, SCSS, JSON, or Style Dictionary-compatible formats.

When to use it

When building or updating a design system and needing WCAG-compliant palettes.
When creating theme tokens for components across light and dark modes.
During accessibility audits to verify color contrast across UI elements.
When prototyping color schemes that must meet AA or AAA requirements.
When exporting palette tokens for cross-platform implementation.

Best practices

Provide clear base colors in hex format to ensure deterministic scaling.
Choose AAA only for critical text or high-contrast needs; AA is sufficient for most UIs.
Include multiple base colors to generate cohesive multi-hue palettes.
Review suggested alternatives manually when brand fidelity is critical.
Test exported tokens in real UI contexts to confirm perceived contrast.

Example use cases

Generate a complementary palette from primary brand colors and export tokens for the component library.
Produce dark-mode variants alongside light tokens for theme switching in an app.
Run an accessibility report listing contrast ratios between text and background layers.
Create triadic or analogous schemes for marketing pages while ensuring WCAG compliance.
Export JSON tokens for Style Dictionary to integrate into build pipelines.

FAQ

What input format does the skill expect for colors?

Base colors should be provided as hex strings (e.g., #1a73e8).

Can the skill guarantee exact brand color matches and WCAG compliance?

It prioritizes accessibility by suggesting adjusted alternatives; exact brand matches may need manual review if they fail contrast thresholds.

Which output formats are supported?

Supported exports include css, scss, json, and tokens (Style Dictionary-friendly).