Color Palette

A color palette is a defined set of colors used consistently across a brand or product interface to create visual harmony, hierarchy, and emotional tone.

Category: Design

Author: Atomic Glue Editorial Team

## Definition

A color palette is a curated collection of colors that represents a brand or design system. It typically includes primary colors (the dominant brand colors), secondary colors (supporting accents), neutral colors (grays, off-whites, near-blacks for text and backgrounds), and semantic colors (success, error, warning, info for conveying meaning). In digital design, colors are specified in multiple formats: hex for web, RGB for screen, HSL for programmatic manipulation, and sometimes CMYK for print. A well-designed palette provides enough variety to cover every UI need while remaining cohesive and accessible.

## Building a Palette That Works

Start with the primary brand color. Then select a secondary color that complements or contrasts it appropriately. Build a neutral scale with enough steps for text (often black-adjacent instead of pure black for reduced eye strain), backgrounds, borders, and dividers. Add semantic colors for feedback states. Finally, create tonal variations (lighter and darker shades) of each core color so you have hover states, disabled states, and surface colors without introducing new hues.

## Accessibility Is Not Optional

Every color combination in your palette must meet WCAG contrast standards. Text needs at least 4.5:1 contrast ratio for normal text and 3:1 for large text. This means you cannot choose colors purely by aesthetics. You must verify them. Tools like Contrast Checker, Stark (for Figma), and the WebAIM contrast checker should be part of every designer's workflow. An inaccessible palette excludes users and damages brand trust.

## Dark Mode Requires a Separate Palette

A good color palette includes a dark mode mapping. Dark mode is not simply inverting colors. It requires a rethought neutral scale (darker backgrounds, lighter text), adjusted saturation levels (vivid colors often feel harsh on dark backgrounds), and careful handling of shadows and elevation that would not make sense in a dark interface. Plan for both modes from the start rather than retrofitting later.

## In code

:root {
  /* Light mode palette */
  --color-primary: #0066ff;
  --color-primary-hover: #0052cc;
  --color-primary-light: #e8f0ff;
  --color-secondary: #7c3aed;
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-700: #374151;
  --color-neutral-900: #111827;
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-bg: #ffffff;
  --color-bg-surface: #f9fafb;
}

[data-theme='dark'] {
  --color-bg: #0f172a;
  --color-bg-surface: #1e293b;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-neutral-50: #1e293b;
  --color-neutral-900: #f8fafc;
}

## Common questions

Q: How many colors should a palette have?

A: A good minimum: 1 primary, 1-2 secondary, 3-5 neutrals, 3-4 semantic colors (success, error, warning, info). Each core color should have 5-9 tonal steps for flexibility. This gives you enough range without creating decision paralysis. More than 10 core colors usually signals a system that lacks focus.

Q: Should I use pure black (#000000) for text?

A: Avoid it. Pure black text on white creates excessive contrast that causes eye strain during extended reading. Use a very dark gray like #111827 or #1a1a1a instead. This provides sufficient contrast (well above 4.5:1) without the harshness of pure black.

## Key takeaways

• A color palette includes primary, secondary, neutral, and semantic colors with tonal variations.
• Every color combination must meet WCAG accessibility contrast standards.
• Dark mode requires a separate, thoughtfully mapped palette, not simple inversion.
• Avoid pure black (#000) for text. Use near-black dark grays for better readability.
• Define colors in multiple formats: hex (Web), HSL (manipulation), and optionally CMYK (print).

## Related entries

• [Brand Identity](atomicglue.co/glossary/brand-identity)
• [Design Tokens](atomicglue.co/glossary/design-tokens)
• [Brand Guidelines](atomicglue.co/glossary/brand-guidelines)

Last updated July 2026. Permalink: atomicglue.co/glossary/color-palette