Tailwind Color Palette Generator
Turn one brand colour into a full 50–950 shade scale for Tailwind CSS v4 (OKLCH) or v3 (HEX), modelled on Tailwind's own palette.
Code
@theme {
--color-brand-50: oklch(96.9% 0.013 15.865);
--color-brand-100: oklch(93.9% 0.027 15.865);
--color-brand-200: oklch(88.7% 0.052 15.865);
--color-brand-300: oklch(80.1% 0.103 15.865);
--color-brand-400: oklch(69.6% 0.173 15.865);
--color-brand-500: oklch(62.5% 0.218 15.865);
--color-brand-600: oklch(56.3% 0.224 15.865);
--color-brand-700: oklch(49.6% 0.198 15.865);
--color-brand-800: oklch(44.1% 0.166 15.865);
--color-brand-900: oklch(40% 0.141 15.865);
--color-brand-950: oklch(27.1% 0.094 15.865);
}Paste into your main CSS file after @import "tailwindcss";, then use classes like bg-brand-500 and text-brand-700.
Preview
Related Developer Tools
This Tailwind colour palette generator builds the eleven shades Tailwind CSS uses, from 50 to 950, around a single brand colour. The result is ready to paste: a v4 @theme block in OKLCH (the format Tailwind's own palette uses since v4), the same block in HEX, a v3 tailwind.config.js object, plain CSS variables or JSON. Your colour stays exactly as it is at its step, and the shades around it follow the spacing of Tailwind's default palette.
How to Generate a Tailwind Palette
- Enter your brand colour as HEX, RGB, HSL or OKLCH, or pick it.
- Name it. The name becomes the class, so brand gives
bg-brand-500and primary givesbg-primary-500. - Choose its step, or leave it on Auto. The starred swatch is your exact colour.
- Pick a format and copy. The preview shows the shades as a button, badge, alert and dark panel.
How the Shades Are Built
Tailwind's scales are not a straight line from light to dark. Lightness falls slowly through 50–300, quickly through the middle and slowly again at 900–950, and chroma rises to a peak around 400–600 before fading at both ends. The curves also differ by hue: Tailwind's yellow-500 sits at 79.5% lightness, while its blue-500 sits at 62.3%.
This tool uses those curves, measured from the 17 coloured scales and 5 greys in Tailwind v4.1's theme.css. For your colour it blends the curves of the two Tailwind hues on either side of it, stretches them so your colour lands exactly on its step, and keeps the hue constant. Colours with very little chroma use the curve of Tailwind's greys (slate, gray, zinc, neutral and stone), which is darker in the middle.
Which Shade to Use Where
| Shades | Common use |
|---|---|
| 50–100 | Page and card backgrounds, selected rows, soft alerts |
| 200–300 | Borders, dividers, disabled states, focus rings |
| 400–500 | Icons, illustrations, accents on dark backgrounds |
| 600–700 | Buttons and links on white, hover states |
| 800–950 | Headings and body text on light shades, dark-mode backgrounds |
Using the Palette in Tailwind v4 and v3
In Tailwind v4, colours are theme variables. Paste the block after @import "tailwindcss"; and every utility that takes a colour can use it, including opacity modifiers like bg-brand-500/50. Because they are real CSS variables, you can also use them outside Tailwind as var(--color-brand-500).
In Tailwind v3, colours live in the config file. The v3 format uses HEX, which every v3 version and plugin understands. To change a single shade by hand, convert it with the HEX to OKLCH converter or back with the OKLCH to HEX converter, and test your text and background pairs with the contrast checker.
Frequently Asked Questions
How do I add a custom colour palette to Tailwind CSS v4?
Copy the @theme block from the tool and paste it into your main CSS file below @import "tailwindcss";. Each --color-brand-500 variable creates the usual utilities, so bg-brand-500, text-brand-700 and border-brand-200 work straight away. No tailwind.config.js is needed in v4.
How do I add it in Tailwind CSS v3?
Choose the v3 format and merge the colours object into theme.extend.colors in tailwind.config.js. Using extend keeps Tailwind's own colours available alongside yours.
Which shade should my brand colour be?
Auto places it at the step whose usual lightness is closest to your colour, so a light yellow lands on 300 or 400 and a deep navy on 900 or 950. If your design system says the brand colour is 500 or 600, pick that step instead; your colour is always kept exactly at the step you choose.
Is this the same algorithm Tailwind used for its colours?
No. Tailwind's palette was tuned by hand. This tool follows the lightness and chroma curves measured from Tailwind v4.1's default palette, blended for your colour's hue, so the steps are spaced the way Tailwind's are. Fed Tailwind's own blue-500, it gives the same lightness and nearly the same chroma as Tailwind's blue at every step; only the hue differs a little, because Tailwind shifts it slightly along the scale and this tool keeps it fixed.
Why are the values in OKLCH?
Tailwind CSS v4 writes its palette in OKLCH because equal lightness steps look evenly spaced in it, and it can use the more vivid colours of wide-gamut screens. The HEX formats give the closest sRGB colour for each shade.
Why does the 950 shade look less colourful?
Very dark and very light colours cannot hold much chroma, and Tailwind's own scales fade at the ends the same way. Chroma is also capped where a shade would fall outside Display P3.
Is the palette checked for contrast?
The preview shows typical pairings, such as text-900 on a 50 background. Check the exact pair you plan to use with the colour contrast checker before relying on it.