Tailwind Colour Generator

Generate a full Tailwind CSS colour palette from your brand colour for free — 11 shades from 50 to 950 built in the OKLCH colour space with Tailwind-style lightness and chroma curves, your exact colour kept in the scale, and WCAG contrast shown on every swatch. Export Tailwind v4 @theme (OKLCH or hex), a v3 config object, CSS variables or JSON.

100% private — everything runs in your browser. Conversion happens on your device; nothing is uploaded.

Base colour

Pick

Colour name

Keep my exact colour in the scale

Export

Code

Shades are built in the OKLCH colour space using lightness and chroma curves modelled on Tailwind’s own palettes, so 50 is a soft tint and 950 a deep shade with the same hue. Each swatch shows its contrast ratio with white or black text. Click a swatch to copy its hex.

How to generate a Tailwind colour palette

Enter your brand colour (or pick one).
Name the colour, e.g. brand or primary.
Check the shades and contrast ratios.
Choose an export format and copy the code into your project.

What you can use it for

Turn a brand colour into a complete design-system scale
Create custom Tailwind colours that match the built-in palettes
Generate accessible light and dark shades for UI states
Share colour tokens between design and development

More free tools

Building for the web?

Format, minify, convert and generate code with our free, private developer tools.

JSON Formatter CSS Minifier HTML Minifier JS Minifier SVG Optimizer CSS Grid Box Shadow Gradient Generator

See all free tools →

Frequently asked questions

How do I add a custom colour to Tailwind v4?

Copy the @theme block into your main CSS file. Classes like bg-brand-500 and text-brand-900 then work automatically.

And for Tailwind v3?

Choose “Tailwind v3 config” and paste the object into theme.extend.colors in tailwind.config.js.

Where does my colour end up?

It's placed at the step whose lightness matches it best — usually 500 or 600 — and kept exactly, with the other shades built around it.

Why OKLCH?

OKLCH is perceptually even, so every step looks like the same colour getting lighter or darker, without the muddy or neon shifts you get mixing with white and black. Tailwind v4 uses OKLCH for its own palette.