Turn one hex color into a full 50 to 950 Tailwind scale in OKLCH, with the @theme block and the shadcn tokens ready to paste.
@theme {
--color-brand-50: oklch(0.971 0.0138 276.97);
--color-brand-100: oklch(0.936 0.0308 276.97);
--color-brand-200: oklch(0.885 0.0564 276.97);
--color-brand-300: oklch(0.808 0.0972 276.97);
--color-brand-400: oklch(0.704 0.1562 276.97);
--color-brand-500: oklch(0.637 0.1967 276.97);
--color-brand-600: oklch(0.577 0.2346 276.97);
--color-brand-700: oklch(0.5106 0.2301 276.97);
--color-brand-800: oklch(0.444 0.2004 276.97);
--color-brand-900: oklch(0.396 0.1756 276.97);
--color-brand-950: oklch(0.258 0.1286 276.97);
}OKLCH is perceptually uniform, so every step of the scale looks like an equal step in lightness. HSL scales drift: the same lightness value reads much brighter for yellow than for blue. Tailwind v4 ships its own palette in OKLCH for the same reason.
Paste the @theme block into your CSS entry file. Tailwind v4 reads theme variables from CSS, so a --color-brand-500 variable immediately gives you bg-brand-500, text-brand-500 and every other color utility.
shadcn/ui reads semantic variables such as --primary and --primary-foreground. The second tab maps the generated scale onto those variables for light and dark mode, so a Beste UI block picks up the new color with no class changes.