What goes into a brand color palette?

A brand palette gives every color a job. The primary is the one people remember, on the logo and main buttons. A secondary supports it, an accent makes calls to action stand out, and a background and text color hold the page together.

Contrast matters as much as taste. The Web Content Accessibility Guidelines (WCAG) ask for at least 4.5:1 between normal text and its background, or 7:1 for the stricter AAA level.

Tool description

Describe your brand in About your brand: what it does, who it's for and how it should feel. Pick a Brand personality (Professional, Playful, Luxurious, Minimal, Bold or Natural), or leave it on Match the description and the AI infers it from your text.

You get five named colors: Primary, Secondary, Accent, Background and Text. Output format switches their values between HEX, RGB, HSL, CMYK and other formats, and each color has a copy button. The Usage guide says how to use each color, and CSS variables gives a block to paste into a stylesheet. The AI is asked to keep the text at 7:1 or more against the background, and the primary and accent colors at 3:1 or more.

Example

For "A neighborhood coffee roaster in Portland. Warm, welcoming and sustainable", you might get a roast brown primary, a cream background and a terracotta accent, with CSS variables like these:

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

Features

  • Five colors with clear roles, a name and a usage note for each
  • Six personalities, or one picked from your description
  • Copy colors in the format you need, or the whole set as CSS variables

Limitations

The tool doesn't measure contrast itself, so run the text and background pair through a contrast checker before you ship it.