Design tokens · WCAG AA

BrandTokens

HEX in. Tokens out.

Turn a brand name or HEX into Tailwind / shadcn design tokens with WCAG AA checks. Paste a HEX or type a brand word, get primary / secondary / accent / muted / background / foreground, contrast checks, and one-click CSS + Tailwind snippets.

Algorithmic HSL (no LLM)
Presets: SaaS landing · Ecommerce PDP
Copy CSS vars + Tailwind

Generate tokens

Enter a HEX color or brand word. Brand words hash to a seed hue; HEX sets the primary hue directly. No LLM — pure HSL harmony.

Brand name or HEX

Seed hue 35° · from brand hash · seed #d08925

Primary

#d38922 · hsl(35 72% 48%)

Secondary

#94983e · hsl(63 42% 42%)

Accent

#2688c5 · hsl(203 68% 46%)

Muted

#aaa592 · hsl(47 12% 62%)

Background

#f9f8f6 · hsl(55 18% 97%)

Foreground

#242119 · hsl(45 18% 12%)

CSS variables (shadcn-style)

:root {
  --background: #f9f8f6;
  --foreground: #242119;
  --primary: #d38922;
  --primary-foreground: #242119;
  --secondary: #94983e;
  --secondary-foreground: #ffffff;
  --accent: #2688c5;
  --accent-foreground: #ffffff;
  --muted: #aaa592;
  --muted-foreground: #242119;
  --border: #e5e3dc;
  --ring: #d38922;
}

Tailwind theme snippet

// tailwind.config — theme.extend.colors (or @theme in Tailwind v4)
colors: {
  background: "#f9f8f6",
  foreground: "#242119",
  primary: { DEFAULT: "#d38922", foreground: "#242119" },
  secondary: { DEFAULT: "#94983e", foreground: "#ffffff" },
  accent: { DEFAULT: "#2688c5", foreground: "#ffffff" },
  muted: { DEFAULT: "#aaa592", foreground: "#242119" },
}

Export pack Pro

CSS + Tailwind + shadcn JSON in one copy.

Unlock with Pro →

Free includes CSS vars + Tailwind snippet above. Pro unlocks the combined export pack JSON.

Saved themes Pro · 20

Save up to 20 brand kits across projects. See Pro pricing.

WCAG contrast checks

AA normal text requires ≥ 4.5:1. Ratios are approximate for the generated pairs — verify critical UI in your design tools.

Pair	Preview	Ratio	AA
Foreground on Background	Aa	15.14:1	Pass · AAA
Primary on Background	Aa	2.68:1	Fail
Foreground on Primary	Aa	5.64:1	Pass
Background on Primary	Aa	2.68:1	Fail
Accent on Background	Aa	3.66:1	Fail
Foreground on Muted	Aa	6.51:1	Pass

Tailwind color generator

Theme snippets ready to paste into Tailwind configs.

Palette from HEX

Start from a single brand HEX and expand a full token set.

shadcn theme tokens

CSS variables aligned with common shadcn/ui roles.

Why design tokens matter

Design tokens are the single source of truth for your app's visual language. Instead of hardcoding colors in twenty components, you define them once and reference everywhere. BrandTokens generates the full token set from a single brand color.

What you get

Tailwind CSS config — Drop-in tailwind.config.js extension with your brand palette
shadcn/ui tokens — CSS custom properties for all shadcn slots
WCAG AA contrast checking — Every pair validated (4.5:1 body, 3:1 large)
Dark mode variant — Automatic dark palette maintaining contrast

FAQ

How do I pick a good brand color?

Start with your logo. If starting fresh, differentiate from competitors — most SaaS defaults to blue, so warm tones stand out.

What's the difference between Tailwind config and CSS variables?

Tailwind config bakes colors at build time. CSS variables (shadcn/ui) allow runtime theme switching. BrandTokens generates both.

Can I use this for multiple brands?

Yes — run once per brand color and save each set.

Does it work with Next.js and shadcn/ui?

Yes — the CSS variables use exact shadcn/ui naming. Copy into globals.css.