UI Palette Builder

Turn one color into usable UI tokens

Source Color

Color value

Dashboard card

Token preview with surface, border, text, primary, and accent roles.

PrimaryAccent

Muted content area

Tokens

Export format

Background

Page background

#f9fafb

Surface

Cards and panels

#eef0f2

Muted

Subtle fills

#dadfe2

Border

Dividers and outlines

#c0c8ce

Text

Main readable text

#1a2328

Primary

Primary actions

#3498db

Primary Text

Text on primary

#f9fafb

Accent

Secondary accent

#e7553c

Accent Text

Text on accent

#fbf9f9

:root {
  --color-background: #f9fafb;
  --color-surface: #eef0f2;
  --color-muted: #dadfe2;
  --color-border: #c0c8ce;
  --color-text: #1a2328;
  --color-primary: #3498db;
  --color-primary-text: #f9fafb;
  --color-accent: #e7553c;
  --color-accent-text: #fbf9f9;
}

Related tools

Color Stash

Save, name, and copy colors

Color Picker

Pick, tune, save, and copy colors

Brand Palette Extractor

Extract and export colors from an image

UI Palette Builder

Turn one color into usable UI tokens

Source Color

Color value

Dashboard card

Token preview with surface, border, text, primary, and accent roles.

PrimaryAccent

Muted content area

Tokens

Export format

Background

Page background

#f9fafb

Surface

Cards and panels

#eef0f2

Muted

Subtle fills

#dadfe2

Border

Dividers and outlines

#c0c8ce

Text

Main readable text

#1a2328

Primary

Primary actions

#3498db

Primary Text

Text on primary

#f9fafb

Accent

Secondary accent

#e7553c

Accent Text

Text on accent

#fbf9f9

:root {
  --color-background: #f9fafb;
  --color-surface: #eef0f2;
  --color-muted: #dadfe2;
  --color-border: #c0c8ce;
  --color-text: #1a2328;
  --color-primary: #3498db;
  --color-primary-text: #f9fafb;
  --color-accent: #e7553c;
  --color-accent-text: #fbf9f9;
}

Related tools

Color Stash

Save, name, and copy colors

Color Picker

Pick, tune, save, and copy colors

Brand Palette Extractor

Extract and export colors from an image