Builds an accessible brand color palette – one anchor color, role assignments, 9-step tonal scales, 60-30-10 distribution, and documented usage rules – ready for a developer to implement without guessing.
Builds an accessible brand color palette - one anchor color, role assignments, 9-step tonal scales, 60-30-10 distribution, and documented usage rules - ready for a developer to implement without guessing. Use when someone asks "pick our brand colors", "build a color system for our app", "what shade should our buttons be", or is defining the color layer of a design system. Do NOT use for auditing or fixing contrast failures and color-blindness issues in an existing product - use color-accessibility instead; for assembling the full brand book around the palette, use brand-guidelines.This is the skill's description: the text your AI reads to decide when the skill applies.
color-palette-builder/SKILL.md
---
name: Color Palette Builder
description: Builds an accessible brand color palette - one anchor color, role assignments, 9-step tonal scales, 60-30-10 distribution, and documented usage rules - ready for a developer to implement without guessing. Use when someone asks "pick our brand colors", "build a color system for our app", "what shade should our buttons be", or is defining the color layer of a design system. Do NOT use for auditing or fixing contrast failures and color-blindness issues in an existing product - use color-accessibility instead; for assembling the full brand book around the palette, use brand-guidelines.
---
# Color Palette Builder
A brand color palette is not a mood board - it is a functional system with roles, scales, and rules. The costly failure is shipping pretty swatches with no usage rules: developers guess, screens drift, and within months the product has fourteen slightly different blues and body text that fails contrast. Build the palette so a developer can implement it without asking a single question.
## Operating procedure
Work the steps in order: roles before scales, scales before contrast checks - contrast is verified per color pair, and pairs only exist once the scales do.
### Step 1: Gather inputs
Collect these before generating anything; label any guess as a guess.
- Anchor color, if one exists (hex value). If none, collect 3-5 brand adjectives plus the category's color conventions to derive one.
- Surfaces in scope: marketing site, product UI, or both. Product UI needs a deeper neutral scale.
- Dark mode: in scope now, later, or never. Default to architecting semantic tokens regardless - it adds no cost now and prevents significant rework later.
- Accessibility target: default WCAG 2.1 AA. Ask whether AAA is required (government, healthcare, and education products often require it).
- Constraints: category semantics (red and green in finance already mean loss and gain), competitor colors to avoid, and any existing token naming convention to match.
### Step 2: Choose or validate the anchor
… load the full skill through Skill MeClick to play with sound.