How many colors should a brand palette have?

One base plus a handful of derived roles is enough: primary, secondary, accent, four surfaces, two text colors and four feedback colors — sixteen values here, but they all descend from a single seed. Fewer decisions, applied consistently, beat a large unstructured swatch board.

What are semantic color roles?

Semantic roles are named jobs rather than specific hues — color.primary, color.surface, color.error. Components consume the name, so the underlying hex can change across themes, seasons or rebrands without touching a single component.

How do I create a dark mode version of my brand colors?

Derive it from the same base instead of inverting: surfaces step darker, text steps lighter, and feedback colors gain lightness to stay visible on dark backgrounds. This tool generates that dark set automatically and shows both themes side by side for comparison.

06 · Brand palette

Brand color palette, sixteen roles from one base.

Brand base color

Semantic roles

#845EC2

Brand

Primary

color.primary

#845EC2

rgb(132, 94, 194)

Primary · hover

color.primaryHover

#6E44B3

rgb(110, 68, 179)

Primary · active

color.primaryActive

#5C3996

rgb(92, 57, 150)

Secondary

color.secondary

#B366BB

rgb(179, 102, 187)

Accent

color.accent

#B9CD5E

rgb(185, 205, 94)

Surfaces

Background

color.background

#F8F7FA

rgb(248, 247, 250)

Surface

color.surface

#FFFFFF

rgb(255, 255, 255)

Surface · elevated

color.surfaceElevated

#FCFCFD

rgb(252, 252, 253)

Border

color.border

#E5E2E9

rgb(229, 226, 233)

Text

Heading text

color.text

#201C26

rgb(32, 28, 38)

Muted text

color.mutedText

#716B7A

rgb(113, 107, 122)

Feedback

Success

color.success

#397F5E

rgb(57, 127, 94)

Warning

color.warning

#B18943

rgb(177, 137, 67)

Error

color.error

#BE5855

rgb(190, 88, 85)

Information

color.info

#4977AC

rgb(73, 119, 172)

Light & dark preview

Same tokens, two themes

AcmeOverviewReportsSettings

Upgrade

Weekly revenue

Last 7 days · updated 2m ago

Sessions+12.4%

[email protected]

We'll never share your email.

Invoice #2041Paid

Invoice #2042Pending

Invoice #2043Failed

View all invoices

All systems operational: modal surface example

DismissConfirm

Light theme

AcmeOverviewReportsSettings

Upgrade

Weekly revenue

Last 7 days · updated 2m ago

Sessions+12.4%

[email protected]

We'll never share your email.

Invoice #2041Paid

Invoice #2042Pending

Invoice #2043Failed

View all invoices

All systems operational: modal surface example

DismissConfirm

[data-theme="dark"]

Export design system

css · json · scss · tailwind · js

css

:root {
  --color-primary: #845EC2;
  --color-primary-hover: #6E44B3;
  --color-primary-active: #5C3996;
  --color-secondary: #B366BB;
  --color-accent: #B9CD5E;
  --color-background: #F8F7FA;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FCFCFD;
  --color-border: #E5E2E9;
  --color-text: #201C26;
  --color-muted-text: #716B7A;
  --color-success: #397F5E;
  --color-warning: #B18943;
  --color-error: #BE5855;
  --color-info: #4977AC;
}

[data-theme="dark"] {
  --color-primary: #9B7CCD;
  --color-primary-hover: #AC92D6;
  --color-primary-active: #BDA8DE;
  --color-background: #16141A;
  --color-surface: #201D25;
  --color-surface-elevated: #2A2730;
  --color-border: #3C3843;
  --color-text: #EFEEF1;
  --color-muted-text: #9D99A3;
}

Guide

What is a brand color palette?

A brand color palette is more than the one color in your logo. It is a small, governed set of roles — a primary for calls to action, a secondary and accent for support, surfaces for background and elevation, text and muted text for content, and success, warning, error and info colors for feedback — all derived from a single base so the system stays unmistakably yours.

Naming those roles instead of raw hex values is what makes a palette a system: components reference color.primary, never #845EC2, so rebranding becomes a one-line change. Swatchboard derives all sixteen semantic roles from your base color with safe lightness spacing between them, in matched light and dark themes, so every role keeps its job when the theme flips.

Building a brand system from one base color

Enter your brand base color and the page lays out the four role groups — brand, surfaces, text and feedback — each showing token name, label, hex and RGB. The live preview renders the same tokens through a realistic component mock in light and dark side by side, which is the fastest way to spot a primary that fights its surface or feedback colors that read as decoration rather than alerts.

Once the roles balance, export the whole system as CSS custom properties with dark overrides, JSON, SCSS, a Tailwind extension or a JavaScript object. Save the palette to your library to iterate on it later, and run the text roles through the WCAG contrast checker — an accessible brand system is far cheaper to build than to retrofit.

Frequently asked questions

How many colors should a brand palette have?: One base plus a handful of derived roles is enough: primary, secondary, accent, four surfaces, two text colors and four feedback colors — sixteen values here, but they all descend from a single seed. Fewer decisions, applied consistently, beat a large unstructured swatch board.
What are semantic color roles?: Semantic roles are named jobs rather than specific hues — color.primary, color.surface, color.error. Components consume the name, so the underlying hex can change across themes, seasons or rebrands without touching a single component.
How do I create a dark mode version of my brand colors?: Derive it from the same base instead of inverting: surfaces step darker, text steps lighter, and feedback colors gain lightness to stay visible on dark backgrounds. This tool generates that dark set automatically and shows both themes side by side for comparison.