---
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.