Tailwind CSS color palette generator

Turn one hex code into a full Tailwind color scale — 11 OKLCH-tuned shades from 50 to 950, with contrast ratios, ready to paste into Tailwind v4's @theme block or a v3 config. Free, no sign-up, runs in your browser.

Free · no sign-up · runs in your browser

Base color

Any hex — #b9471b, b9471b or #abc.

Name

Used in every generated token name.

50 · AAA
100 · AAA
200 · AAA
300 · AAA
400 · AAA
500 · AA
600 · AAyour color
700 · AA
800 · AAA
900 · AAA
950 · AAA

11 steps · click a swatch to copy its hex

Copy the scale

Tailwind CSS v4

@theme {
  --color-brand-50: oklch(0.972 0.009 44.9);
  --color-brand-100: oklch(0.934 0.020 40.5);
  --color-brand-200: oklch(0.878 0.039 39.9);
  --color-brand-300: oklch(0.795 0.071 38.6);
  --color-brand-400: oklch(0.684 0.114 39.5);
  --color-brand-500: oklch(0.612 0.145 39.4);
  --color-brand-600: oklch(0.547 0.157 39.4);
  --color-brand-700: oklch(0.482 0.147 39.4);
  --color-brand-800: oklch(0.426 0.121 39.3);
  --color-brand-900: oklch(0.384 0.092 39.4);
  --color-brand-950: oklch(0.268 0.060 38.9);
}

Tailwind CSS v3

theme: {
  extend: {
    colors: {
      brand: {
        50: '#fbf4f1',
        100: '#f6e5df',
        200: '#efcfc4',
        300: '#e5ad9b',
        400: '#d58063',
        500: '#ca603b',
        600: '#b9471b',
        700: '#9f370a',
        800: '#833112',
        900: '#6b2f1a',
        950: '#3e1a0e',
      },
    },
  },
},

CSS variables

:root {
  --brand-50: #fbf4f1;
  --brand-100: #f6e5df;
  --brand-200: #efcfc4;
  --brand-300: #e5ad9b;
  --brand-400: #d58063;
  --brand-500: #ca603b;
  --brand-600: #b9471b;
  --brand-700: #9f370a;
  --brand-800: #833112;
  --brand-900: #6b2f1a;
  --brand-950: #3e1a0e;
}

JSON

{
  "brand": {
    "50": "#fbf4f1",
    "100": "#f6e5df",
    "200": "#efcfc4",
    "300": "#e5ad9b",
    "400": "#d58063",
    "500": "#ca603b",
    "600": "#b9471b",
    "700": "#9f370a",
    "800": "#833112",
    "900": "#6b2f1a",
    "950": "#3e1a0e"
  }
}

Paste a brand hex and this generates the eleven shades Tailwind expects — 50, 100, 200 … 900, 950 — placed on the same lightness curve Tailwind's own palettes use, so your color sits beside slate and blue without looking heavier or washed out. Every step is computed in OKLCH rather than by mixing with white and black, which is what keeps the mid-tones from going muddy and the light end from going grey. Nothing is uploaded: the whole ramp is built in the page, and the URL carries your color so you can share the result.

How it works

01Your hex is converted to OKLCH, the perceptual color space Tailwind v4 ships its own palette in, and split into lightness, chroma and hue.
02The lightness decides which step you actually gave: a mid-tone brand color usually lands on 500 or 600, a pastel higher up the scale, a near-black at 950. That step returns your exact hex — the generator never quietly changes the color you typed.
03The remaining ten steps follow Tailwind's own lightness curve, re-anchored so the whole ramp passes through your color rather than putting a kink at one step.
04Chroma is scaled per step and pulled back at both ends — the reason a real palette's 50 reads as a tint and not as a grey, and its 950 as a deep color and not as mud. Hue never moves.
05Any step sRGB cannot display has its chroma reduced until it fits, keeping lightness and hue intact. That is the CSS Color 4 gamut mapping rule, and it is why a neon seed does not turn purple at 700.
06Each swatch is checked against WCAG 2 contrast: the badge shows whether white or black text passes AA or AAA on that step.

Use cases

Building a Tailwind v4 theme from a brand color, where colors are CSS variables in an @theme block rather than a JavaScript config.
Extending a Tailwind v3 config with a custom color that needs all eleven shades, not just the one hex from the brand guidelines.
Picking accessible foreground/background pairs — the contrast badge tells you which steps can carry body text.
Generating design tokens for a component library, a shadcn/ui theme, or a CSS custom-property setup with no Tailwind at all.
Producing dark-mode counterparts: the same ramp read from the other end, with the contrast already checked.
Sharing a proposed palette with a teammate — the URL carries the color and the name.

Frequently asked questions

How do I generate a Tailwind color palette from one hex code?

Paste the hex into the field above. The generator places it on the step its lightness belongs to — usually 500 or 600 — and builds the other ten shades around it on Tailwind's own lightness curve. Copy the result as a Tailwind v4 @theme block, a v3 theme.extend.colors object, plain CSS custom properties, or JSON.

How do I add a custom color to Tailwind CSS v4?

Tailwind v4 has no JavaScript config file. Colors are CSS variables declared in an @theme block in your stylesheet: @theme { --color-brand-500: oklch(0.55 0.16 35); }. Declaring the eleven --color-<name>-<step> variables generates every utility for you — bg-brand-500, text-brand-50, border-brand-200 and the rest. The v4 tab above emits exactly that block.

What is the difference between the Tailwind v4 and v3 output?

v4 output is a CSS @theme block of custom properties written in oklch(), matching how Tailwind v4 ships its own palette. v3 output is the theme.extend.colors fragment for tailwind.config.js, written as hex strings. Both describe the same eleven colors; pick the one your project's Tailwind version reads.

Why does this use OKLCH instead of HSL?

In HSL, two colors with the same lightness value can look very different in brightness — yellow at 50% reads far lighter than blue at 50%. OKLCH is perceptually uniform, so a lightness curve that looks evenly spaced is evenly spaced. It also lets chroma be adjusted without shifting hue, which is what stops the dark end of a generated ramp from drifting toward purple or brown. Tailwind v4 ships its own palette in OKLCH for the same reason.

What do the 50 to 950 numbers in a Tailwind color scale mean?

They are lightness steps, not opacity. 50 is the lightest tint — backgrounds, subtle fills — and 950 the darkest shade, used for text on light surfaces or as a near-black surface in dark mode. 500 is the nominal base color, though in Tailwind's own palettes the most saturated step is usually 600. Every Tailwind color family has the same eleven steps, which is what makes them interchangeable.

Are the generated colors accessible?

Each swatch carries a WCAG 2 contrast badge showing the best of white or black text on it and whether that pair reaches AA (4.5:1), AAA (7:1), or only large-text AA (3:1). As a rule of thumb, steps 50 to 300 take dark text and 700 to 950 take light text, with 400 to 600 depending on the hue. Check the badge rather than assuming — a yellow 500 and a blue 500 behave very differently.

Related resources

More tools

CSS clamp() calculator for fluid typography

Open →

Generate a responsive CSS clamp() font size from a minimum and maximum size and the viewport range they should grow across — with the slope and intercept shown, a live preview, and the rendered size at every common screen width. Free, no sign-up.

SVG to JSX converter for React components

Open →

Paste an SVG and get a React component back — attributes camelCased, class turned into className, style strings converted to objects, xmlns removed, with optional currentColor, a size prop and TypeScript output. Runs entirely in your browser; nothing is uploaded.

Meta tag generator with Google SERP preview

Open →

Fill in a title, description, canonical and Open Graph image and get the complete <head> snippet — with a live Google result preview that measures your title and description in pixels, not characters, so you can see exactly where they will be cut.

Favicon generator — .ico, PNG set and manifest

Open →

Turn a PNG or SVG, or just a couple of letters, into the full favicon set: 16, 32, 48, 180, 192 and 512 PNGs, a real multi-size favicon.ico, a web app manifest and the <head> tags. Everything runs in your browser — nothing is uploaded.

JSON-LD schema generator and validator

Open →

Build valid JSON-LD structured data for Article, FAQPage, Product, Organization and BreadcrumbList from a form, or paste existing markup to have it pretty-printed and checked for the mistakes that stop a rich result appearing. Free, runs in your browser.

robots.txt generator with validation

Open →

Build a robots.txt from user-agent groups, allow and disallow rules, crawl-delay and sitemap URLs — with presets for allowing everything, blocking AI crawlers, or locking down a staging site, and warnings for the mistakes that quietly block your whole site.

UTM link builder and campaign URL generator

Open →

Build correctly encoded UTM tracking links from a URL and your source, medium and campaign — with the existing query string and fragment preserved, values properly percent-encoded, and warnings for the capitalisation and spacing that split one campaign across several rows in an analytics report.

Tailwind CSS color palette generator

Copy the scale

Tailwind CSS v4

Tailwind CSS v3

CSS variables

JSON

How it works

Use cases

Frequently asked questions

Related resources

Related reading

More tools

CSS clamp() calculator for fluid typography

SVG to JSX converter for React components

Meta tag generator with Google SERP preview

Favicon generator — .ico, PNG set and manifest

JSON-LD schema generator and validator

robots.txt generator with validation

UTM link builder and campaign URL generator

Colour contrast checker with WCAG suggestions

Image converter — WebP, AVIF, JPEG and PNG

JSON formatter and validator — free, in your browser

JSON to TypeScript — generate interfaces from a payload

OG image generator — free 1200×630 social cards