Skip to content
ChromaBrew

Tailwind color generator

Generate Tailwind CSS v4 @theme color variables from a single brand color, with a full 50–950 perceptual scale ready to paste.

tailwind-brand.css

@theme {
  --color-brand-50: #fff4fb;
  --color-brand-100: #ffe4f6;
  --color-brand-200: #ffcdef;
  --color-brand-300: #f5b4e2;
  --color-brand-400: #e097cb;
  --color-brand-500: #c87cb3;
  --color-brand-600: #b0639b;
  --color-brand-700: #934b81;
  --color-brand-800: #773867;
  --color-brand-900: #5e2750;
  --color-brand-950: #47003a;
}

Need semantic tokens too? Open the full generator for background/primary/status roles and dark mode.

How to use this tool

  1. Enter your brand color.
  2. A full 50–950 perceptual scale is generated and emitted as Tailwind CSS v4 @theme variables.
  3. Copy the snippet into your global stylesheet — bg-brand-500 style utilities become available immediately.

Frequently asked questions

Does this support Tailwind CSS v4?
Yes — output uses Tailwind v4's native @theme block with --color-* variables, so you can paste it straight into your CSS entry file; utilities like bg-brand-600 just work.
Where do the 50–950 steps come from?
Your brand color is expanded into an eleven-step perceptual scale in OKLCH, so tints and shades stay visually even instead of washing out or muddying.
Can I rename the generated color?
Yes — change the scale name before copying and every variable and utility reference follows along.

Related tools