Brand Palette

One source of truth for your brand colours. Name each role, pair light and dark, and export a PNG swatch sheet, a JSON token file, and a CSS variables block in one go. Hand it to a designer, a developer, or the next agent in the chain.

Everything runs in your browser. No colours, names, or exports are sent to a server. Your palette is saved locally so refreshing keeps your work.

Brand name

The brand name shows up on the downloaded swatch sheet, the JSON, and the CSS variable file.

Include a dark mode pair

Disable if you only want a single light palette.

Light mode

9 swatches

Dark mode

8 swatches

Preview

Light mode

Background

#FAF9F7

Foreground

#2B2723

Card

#F6F4F1

Secondary

#EDECEA

Muted

#E8E7E4

Muted foreground

#7E756B

Accent

#428C87

Border

#DBD9D6

Destructive

#CE3131

Dark mode

Background

#141414

Foreground

#EDE8E1

Card

#1C1C1C

Secondary

#242424

Muted

#2E2E2E

Muted foreground

#B0A595

Accent

#508F8A

Border

#333333

Export

A PNG swatch sheet for sharing, a JSON file for design tools, and CSS variables for the codebase.

Preview the CSS variables

/* Light mode */
:root {
  --background: 40, 23%, 97%;
  --foreground: 30, 10%, 15%;
  --card: 36, 22%, 95%;
  --secondary: 40, 8%, 92%;
  --muted: 45, 8%, 90%;
  --muted-foreground: 32, 8%, 46%;
  --accent: 176, 36%, 40%;
  --border: 36, 6%, 85%;
  --destructive: 0, 62%, 50%;
}

/* Dark mode */
:root.dark {
  --background: 0, 0%, 8%;
  --foreground: 35, 25%, 91%;
  --card: 0, 0%, 11%;
  --secondary: 0, 0%, 14%;
  --muted: 0, 0%, 18%;
  --muted-foreground: 36, 15%, 64%;
  --accent: 175, 28%, 44%;
  --border: 0, 0%, 20%;
}

Pair with Brand Profile Generator

Your palette lives in your browser only. Refreshing keeps it. Clearing site data resets it.