Create a color palette

---
name: create-a-color-palette
category: design
description: Create a role-based color palette with accessible contrast, state coverage, theme behavior, and reproducible tokens. Use when a visual system needs more than a collection of attractive swatches.
---

# create-a-color-palette

Name colors by purpose before naming them by appearance.

## When to use

- Use for product, brand, data, light and dark theme, or status-color work.
- Do not communicate status or meaning by color alone.

## Procedure

1. Inventory surfaces, text, borders, focus, links, actions, selection, disabled, status, charts, overlays, and themes.
2. Define neutral and accent families with enough steps for real role pairs.
3. Assign semantic tokens such as text, surface, border, action, danger, warning, success, and focus.
4. Calculate and visually test required foreground-background contrast for text and meaningful graphics.
5. Check hover, active, selected, disabled, visited, focus, and high-contrast behavior.
6. Test color-vision differences, grayscale, dark mode, transparency, images, and printed output where relevant.
7. Document token values, role pairings, prohibited pairings, and ownership.

## Done

- A palette file lists source values, semantic tokens, supported role pairings, states, themes, and restrictions
- Contrast checks and visual tests verify text, controls, focus, status, charts, and non-color cues