A curated collection of colors chosen to work together in a design, brand, or product.
A color palette is a defined set of colors selected to be used together in a design system, brand identity, or product. Rather than picking colors ad-hoc, a palette establishes a deliberate, limited selection that ensures visual consistency across all contexts where the design appears.
In UI design, a palette typically includes a range of shades for each hue (from the lightest tints used for backgrounds to the darkest shades used for text), along with semantic roles (primary, secondary, neutral, success, warning, error) that map colors to specific UI purposes.
A defined color palette is the foundation of visual consistency. Without one, colors accumulate randomly across a product: slightly different grays, blues that don't quite match, button colors that vary across pages. A palette prevents this by creating a single source of truth for color decisions.
For teams, a palette also reduces decision fatigue and speeds up design and development. When every team member uses the same named tokens from the same palette, there's no ambiguity about which blue goes on the CTA or which gray appears in form labels.
Start with a primary hue. Choose the main brand color and generate a full shade scale, typically 10-12 steps from near-white to near-black. Tools like Atmos let you do this automatically while controlling perceptual uniformity.
Add neutral shades. Most UI work happens in grays: text, backgrounds, borders, dividers. Build a neutral scale that pairs well with your primary color.
Add semantic colors. Define at least success (green), warning (yellow/amber), error (red), and info (blue) shades. These communicate system states and feedback.
Assign semantic roles. Map your palette colors to roles like color.background.primary, color.text.muted, or color.border.subtle. This abstraction layer — also called color tokens — is what makes the palette maintainable and themeable.
A minimal SaaS palette might include:
Material Design and Tailwind CSS both publish example palettes of this structure that serve as useful references.
A practical UI palette typically has 3-6 hues, each with a scale of 10-12 shades. That gives you 50-80 specific color values. More than that becomes hard to maintain; fewer makes it difficult to express all the UI states you need. Brand palettes are often smaller (2-3 hues) because they focus on identity rather than UI coverage.
A color palette is the base set of color values (e.g., blue-500 = #3B82F6). Color tokens are semantic names mapped to palette values (e.g., color.button.primary.bg = blue-500). Tokens are the layer that makes a palette usable in code and enables theming. Most mature design systems have both.
It can be, but it doesn't have to be. The cleanest approach is to build one base palette with all your hues and shades, then define separate semantic token mappings for light mode and dark mode. That way the underlying palette is shared, and only the role-to-value mapping changes between themes.