Tailwind Color Palette Generator

1. Enter your base color, such as a brand hex.
2. Give the color a name. It becomes part of every class and variable, so brand produces bg-brand-500 and --color-brand-500.
3. Review the 11 steps from 50 to 950 and compare them with your original color.
4. Copy the export you need: Tailwind v4 @theme variables in oklch(), the same variables in HEX, or a Tailwind v3 tailwind.config.js object.

Tailwind scales run 50, 100, 200 and so on to 900, then 950: 11 steps, lightest first. 50 is a near-white wash for page and card backgrounds, 100–300 cover subtle fills and borders, 400–600 are the saturated middle used for buttons, links and icons, and 700–950 handle text, dark surfaces and dark-mode backgrounds. Because every color in a project follows the same ladder, bg-brand-100 and bg-slate-100 sit at similar lightness and can be swapped without redesigning a component. You can compare your scale against the defaults on the Tailwind colors page.

In HSL, 50% lightness means very different things for different hues: hsl(60 100% 50%) yellow looks far brighter than hsl(240 100% 50%) blue. A scale built on HSL lightness therefore has uneven jumps, and its blue tints drift toward purple. OKLCH's L is perceptual, so the generator gives each step a lightness target, holds the hue angle constant, and tapers chroma at the lightest and darkest ends, where sRGB cannot display strong color anyway. The result is a 50 that looks as pale as any other color's 50. Tailwind v4 defines its own default palette in OKLCH for the same reason; read how OKLCH works for the details.

In Tailwind v4, configuration lives in CSS. Paste the @theme block into the stylesheet that imports Tailwind:

@import "tailwindcss"; @theme { --color-brand-50: oklch(97.7% 0.013 236.62); /* … */ --color-brand-500: oklch(68.5% 0.169 237.323); /* … */ --color-brand-950: oklch(29.3% 0.066 243.157); }

Those example values are Tailwind's own sky scale, shown only for the format. Each variable creates utilities such as bg-brand-500, text-brand-700 and border-brand-200, and can be referenced as var(--color-brand-500) in your own CSS. Use the HEX version of the block if another tool in your pipeline cannot read oklch().

In Tailwind v3, colors live in tailwind.config.js under theme.extend.colors. Paste the exported object there so it reads colors: { brand: { 50: '…', 500: '…', 950: '…' } }. Using extend keeps the default palette available alongside your color.

Most brand colors are mid-tones and belong at 500 or 600. The generator keeps your exact hex at whichever step has the closest lightness, marks it as the base, and builds the other ten steps around it. If you would rather have your brand color at 500, pick a slightly lighter or darker base and compare the results.

Button text often settles the question. White text on a 500 step usually lands under the 4.5:1 WCAG AA minimum, while 600 or 700 more often passes; light hues such as yellow and lime typically need 700 behind white text, or dark text instead. Check the real pair in the contrast checker.