Color Palette
A curated, limited set of colours used consistently across a product or brand.
Plain English
A colour palette is a deliberate constraint. Instead of picking any colour for every element, you define a small set of shades once — a neutral scale, one or two accents, and semantic colours for success/error/warning — and use only those. The result is a UI that feels visually unified because every element speaks the same colour language. Without a palette, colours accumulate until the interface feels chaotic.
Technical
A production-grade palette typically has: one neutral/ink scale (9–11 stops: 50–950), one primary accent scale (5–7 stops), optional secondary accent, and semantic colour tokens (success: green, error: red, warning: amber, info: blue). Colours are defined as CSS custom properties or design tokens and referenced by semantic name (--color-accent-500) never by raw hex values in components. This allows palette swaps without touching component code.
Live Demo
Neutral / Ink scale
Accent scale
Semantic colours
A complete colour system: neutral scale + accent scale + semantic colours.
Usage
✓ Good usage
Define a 10-stop neutral scale and a 7-stop accent scale as CSS variables, then reference only those tokens in components — never raw hex values.
✗ Bad usage
Picking a new shade of blue for each component based on what "looks right" — six slightly different blues across the UI look like six separate bugs.
Recommended values
- Neutral scale: 10–11 stops (50/100/200/300/400/500/600/700/800/900/950)
- Primary accent: 5–7 stops, centred on the main brand colour
- Semantic: success (#16a34a), error (#dc2626), warning (#d97706), info (#2563eb)
- Maximum 2 accent colours in a product — one primary, one optional secondary
- Dark mode: swap surface and text tokens, not individual hex values
Common mistakes
- Too many accent colours — beyond 2, the UI lacks a clear focal point.
- Raw hex values in components instead of tokens — a palette change requires searching the codebase.
- Forgetting to define semantic colours (success/error/warning) — critical for form validation and status indicators.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Define a full colour system: 10-stop neutral scale from #F8FAFC (50) to #020617 (950), primary accent in blue (#2563EB as 500), semantic colours (green/red/amber/blue). Reference only CSS variable tokens in all components.