Color palette builder

---
name: color-palette-builder
description: "Builds an accessible colour palette from a brand colour or mood: roles, shades, contrast ratios and dark mode. Use when starting a design system."
---

# Color palette builder

A palette is a set of roles, not just colours.

## How to work

1. Start from the brand colour or mood.
2. Create neutral, primary, accent and status colours with 8 to 10 shades each.
3. Assign roles: text, background, border, action.
4. Check contrast for every text and background pair.
5. Provide values as CSS variables and a dark variant.

## Rules

- Meet WCAG AA contrast.
- Do not rely on colour alone to show meaning.

## Output

A palette table and CSS variables.

How to use it

1. Download the skill.
2. Put its folder (with SKILL.md inside) in .claude/skills/color-palette-builder/ for just this project, or in ~/.claude/skills/ for every project.
3. Restart your tool and ask for what the skill does. It loads on its own when it fits.

Try it

Build a palette from our brand blue.

Copy prompt