Skip to content
ToolQivo

Tailwind Palette Generator

Turn one colour into a full 50–950 Tailwind scale.

Color Tools Reviews Free · no sign-up

Your brand colour

Config 
The Tailwind config appears here

Quick Tool Overview

The Tailwind Palette Generator turns one brand colour into a complete 50–950 scale in OKLCH, matched to the lightness curve of Tailwind’s own palettes so a custom brand-600 carries the same weight as the stock blue-600.

What it does
Generates a full Tailwind colour scale
You give it
One brand colour and a name
You get back
Eleven shades as a v4 @theme or v3 config
Best for
Adding a brand colour to a Tailwind project
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Tailwind Palette Generator

Tailwind expects a colour to arrive as a scale of eleven shades, from 50 to 950. Adding a brand colour to a project means producing all eleven, and the ones people write by hand rarely match the built-in palettes in weight.

This generates the whole scale from one colour. Your colour is anchored at the shade it is closest to — measured, not assumed — and the rest are built around it by matching the lightness curve of Tailwind's own palettes in OKLCH, which is the space Tailwind v4 moved to for exactly this reason: it is what makes a custom red-600 carry the same visual weight as the stock blue-600.

Output comes in both shapes. A v4 @theme block with --color-name-500 custom properties, which is how the current version defines colours, and a v3 JavaScript config object for projects that have not migrated. Every shade is checked for contrast against white and black, so you can see immediately which ones can take text — usually 600 and up for white, 400 and below for black.

Key features of the Tailwind Palette Generator

Anchored where it belongs

Your colour is placed at the shade its lightness actually matches, measured rather than assumed to be 500.

Generated in OKLCH

The space Tailwind v4 uses, which is what makes the scale sit level with the built-in palettes.

Both config shapes

A v4 @theme block of custom properties, and a v3 JavaScript object for projects yet to migrate.

Contrast per shade

Which shades take white text and which take black, marked on the scale itself.

Utilities immediately

Paste the @theme block and bg-brand-500, text-brand-700 and the rest exist, with no config file.

How to use the Tailwind Palette Generator

  1. 1

    Enter your brand colour

    One colour. The generator works out which shade it should be.

  2. 2

    Name the scale

    Whatever you want the utilities to be called — bg-brand-500 and the rest.

  3. 3

    Check the contrast row

    Which shades carry white text and which carry black.

  4. 4

    Copy the config

    A v4 @theme block or a v3 config object, ready to paste.

Frequently asked questions

Whichever its lightness is closest to. A vivid mid-tone usually lands on 500 or 600; a pale colour may land on 200. The tool tells you, and you can force a different anchor if you want.

Reviews of the Tailwind Palette Generator

What people who use the Tailwind Palette Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Tailwind Palette Generator. It takes half a minute and no account.

Write the first review

More color tools