Tailwind color scale generator (50–950)
Generate a Tailwind-style 50–950 color scale in OKLCH from any brand color, and copy it as Tailwind v4 @theme variables for use alongside your shadcn/ui theme.
Tailwind v4 @theme
Adds utilities like bg-brand-100 and text-brand-700.
@theme {
--color-brand-50: oklch(0.975 0.0118 259.81);
--color-brand-100: oklch(0.94 0.0287 259.81);
--color-brand-200: oklch(0.88 0.0587 259.81);
--color-brand-300: oklch(0.8 0.101 259.81);
--color-brand-400: oklch(0.71 0.1516 259.81);
--color-brand-500: oklch(0.63 0.188 259.81);
--color-brand-600: oklch(0.55 0.1843 259.81);
--color-brand-700: oklch(0.47 0.1692 259.81);
--color-brand-800: oklch(0.4 0.1467 259.81);
--color-brand-900: oklch(0.34 0.1222 259.81);
--color-brand-950: oklch(0.26 0.094 259.81);
}Suggested shadcn mapping
A starting point for wiring the scale into your theme's tokens.
:root {
--primary: oklch(0.55 0.1843 259.81);
--ring: oklch(0.63 0.188 259.81);
--accent: oklch(0.94 0.0287 259.81);
--accent-foreground: oklch(0.4 0.1467 259.81);
}
.dark {
--primary: oklch(0.71 0.1516 259.81);
--ring: oklch(0.63 0.188 259.81);
--accent: oklch(0.34 0.1222 259.81);
--accent-foreground: oklch(0.94 0.0287 259.81);
}How it works
- 1
Enter your brand color. It anchors the 500 step.
- 2
Eleven shades are generated with lightness steps modeled on Tailwind's default palette, and chroma tapered toward the lightest tints and darkest shades.
- 3
Copy the @theme block to get utilities like bg-brand-100 and text-brand-700.
FAQ
How is this different from a shadcn theme?
A shadcn theme assigns colors to roles (primary, muted, border…). A scale gives you a full range of one hue for illustrations, charts, badges and marketing pages. Most projects use both.
Can I use it for shadcn tokens?
Yes. A common pattern is primary = 600, ring = 500, accent = 100 and accent-foreground = 800 in light mode.