Enter a base hex, pick its shade, copy the snippet. The generator works in OKLCH so your hue stays stable across the whole scale.
Base color
Anchor shade
Which shade does your base color represent?
Curve
Hue drift
Small shifts change the whole scale's hue — useful if the base color feels a little off at the shade you anchored on.
Tailwind v4 @theme
@theme {
--color-brand-50: #e0feee;
--color-brand-100: #c2f8dc;
--color-brand-200: #99eac3;
--color-brand-300: #63d4a2;
--color-brand-400: #0fb981;
--color-brand-500: #009b64;
--color-brand-600: #007e4d;
--color-brand-700: #00643a;
--color-brand-800: #004d2c;
--color-brand-900: #00341c;
--color-brand-950: #001b0c;
}CSS custom properties
:root {
--brand-50: #e0feee;
--brand-100: #c2f8dc;
--brand-200: #99eac3;
--brand-300: #63d4a2;
--brand-400: #0fb981;
--brand-500: #009b64;
--brand-600: #007e4d;
--brand-700: #00643a;
--brand-800: #004d2c;
--brand-900: #00341c;
--brand-950: #001b0c;
}Paste or pick a base color
Any hex works. Neutrals stay neutral; colored hues get full chroma treatment.
Anchor it to a shade
Tell the generator which shade your base represents — 500 is the most common, but 600 or 700 fit brand colors that feel darker.
Tune the curve
Tailwind default, flatter, or contrastier. Add a few degrees of hue drift if needed.
Copy the snippet
Tailwind v4 @theme block or CSS custom properties — paste straight into your project.
HSL is cheap but it doesn't reflect how bright colors look to the eye — a pure HSL yellow reads much brighter than a pure HSL blue at the same lightness value. OKLCH is perceptually uniform, so a generated scale looks evenly spaced across every hue.
It tells the generator which rung of the scale your input color is supposed to sit on. If you enter #10b981 and anchor at 500, you get Tailwind's emerald. Anchor at 700 and the same hex becomes the darker end of a lighter-ish scale.
Yes — the output is just CSS variables. Shadcn-style themes consume --color-brand-500 etc. directly. Rename the @theme block's prefix to match your design token naming.
Tailwind's default palette was hand-tuned, so it's not purely algorithmic. This generator approximates the curve but won't reproduce Tailwind's hand-polished values 1:1. For a brand-new hue, though, the scale it generates is more consistent than rolling one manually.
Contrast checker
Pick foreground and background from the Tailwind palette and check WCAG AA / AAA.
Gradient generator
Build Tailwind-palette gradients and export wallpaper, social, and OG sizes.
Translating screenshots into every locale is what lokal was built for. Upload once, ship to every store.
Explore lokal