← All tools
Palette from one color
Enter a brand color, pick a harmony mode, and preview contrast plus a tiny UI mock. Export CSS
variables, Tailwind @theme, or JSON.
Harmony mode
Opposite hue for secondary; triadic accent.
Swatches
Primary
#6366f1
Secondary
#eeea2b
Accent
#f53d41
Muted
#5f6195
Surface
#f6f6f8
Contrast (WCAG 2.x)
Ratios for text on fills. Normal text needs 4.5:1 (AA); large text 3:1 (AA).
- White on primary 4.47 · Normal Fail · Large AA
- Black on primary 4.70 · Normal AA · Large AA
- Muted on surface (body) 5.36 · Normal AA · Large AA
Suggested text on primary: #000000 (contrast 4.70)
UI mock
Acme Co
Welcome back
Secondary line of body copy on your surface color to check readability.
Accent pill
:root {
--brand-primary: #6366f1;
--brand-secondary: #eeea2b;
--brand-accent: #f53d41;
--brand-muted: #5f6195;
--brand-surface: #f6f6f8;
}
How to use this tool
- Start from a color you already use (logo or key UI).
- Switch harmony modes to explore different relationships before committing.
- Use the contrast table to pick accessible text colors on buttons and surfaces.
- Paste exports into your global CSS or Tailwind theme file.
Bake these colors into a full brand kit
In BrandTap, AI proposes multiple palette directions with rationale, accessibility notes, and usage ratios — then ties them to story, logos, type, and voice in one PDF.