What it does
Takes a single brand hex value or a logo image, derives a small set of complementary and analogous tones for backgrounds, text, and accents, then checks every likely foreground/background pairing against WCAG contrast before finalizing. Outputs values in the format the active theme actually consumes, so the palette can be dropped in rather than manually re-typed.
Install
This skill isn't packaged in an installable registry. It's a plain SKILL.md file you can copy directly. Copy it from the SKILL.md tab and save it at the path for your assistant:
Use it in your AI assistant
Claude Code
.claude/skills/color-palette-generator/ (or ~/.claude/skills/color-palette-generator/ for all projects)
GitHub Copilot (VS Code)
.github/skills/color-palette-generator/
OpenAI Codex
.codex/skills/color-palette-generator/
Cursor
.cursor/skills/color-palette-generator/ (or ~/.cursor/skills/color-palette-generator/ globally)
Compatibility
Best on block themes that store their palette in theme.json. Classic themes require the values to be added as CSS custom properties instead.
The complete SKILL.md for this skill:
---
name: color-palette-generator
description: Use when a user wants a color palette built from a brand color or logo, or asks for site colors that are both on-brand and accessible.
---
# Color Palette Generator
## When to use
The user has one brand color (a hex value or a logo to sample from) and needs a full, usable palette: text, background, accent, and state colors, that's checked for contrast before it's applied.
## Procedure
1. Get the starting point: a hex value directly, or sample the dominant colors from a provided logo image.
2. Derive a working set: a primary, one or two complementary or analogous accents, a neutral scale for backgrounds and body text, and clear state colors (success, error, warning) that don't clash with the palette.
3. Check every foreground/background pairing likely to occur (body text on background, button text on button color, link on background) against WCAG contrast minimums.
4. Adjust any failing pairing by shifting lightness rather than hue where possible, to stay visually close to the original brand color.
5. Output the final palette in the format the active theme consumes (theme.json color entries, or CSS custom properties for classic themes).
6. Present the palette with a short rationale for each role (primary, accent, neutral) before applying it site-wide.
## Guardrails
- Don't silently drop or override the user's original brand color to fix contrast, flag the conflict and offer alternatives instead.
- Verify contrast on the actual final values used, not on an intermediate color before adjustment.