Skip to content
ColorScreens

Tailwind color generator

Give it one color and it builds the eleven steps around it, numbered 50 to 950, ready to paste into a Tailwind theme or a plain stylesheet. The difference from most generators is where your color ends up: at the step its lightness actually matches, not dropped at 500 because that is the middle of the list.

Build a scale

Type a hex, pick one, or start from a swatch. The color and the name live in the address bar, so a link hands someone the exact scale.

Or start here

Your color is the brand-400. It is placed by lightness rather than dropped at 500, so the steps above and below it are real tints and real shades instead of a ramp bent around the middle.

@theme {
  --color-brand-50: #E9FCE5;
  --color-brand-100: #D7F4CF;
  --color-brand-200: #BEE7B4;
  --color-brand-300: #9DD18F;
  --color-brand-400: #7AB66A;
  --color-brand-500: #5F9E4E;
  --color-brand-600: #4E8B3C;
  --color-brand-700: #3C752C;
  --color-brand-800: #306121;
  --color-brand-900: #27531B;
  --color-brand-950: #113306;
}

Why 500 is the wrong answer for most colors

500 is a lightness, not a rank. These are three greens of the same family, and they belong at three different steps. Pin all three to the middle and you get three scales that are each wrong in their own way: no headroom above the pale one, and a dark end under the forest green made of darkened forest green rather than a genuine deep shade.

  • #DFF5D8lands at 100
    • 50: #ECFAE8
    • 100: #DFF5D8, the color entered
    • 200: #C5E4BB
    • 300: #A6CE99
    • 400: #81AE73
    • 500: #6C9A5C
    • 600: #5A884B
    • 700: #48713A
    • 800: #3A5F2E
    • 900: #315026
    • 950: #193110
  • #7AB66Alands at 400
    • 50: #E9FCE5
    • 100: #D7F4CF
    • 200: #BEE7B4
    • 300: #9DD18F
    • 400: #7AB66A, the color entered
    • 500: #5F9E4E
    • 600: #4E8B3C
    • 700: #3C752C
    • 800: #306121
    • 900: #27531B
    • 950: #113306
  • #1F4D2Blands at 900
    • 50: #E9FBEC
    • 100: #D6F3DA
    • 200: #BDE5C4
    • 300: #9AD0A4
    • 400: #73B180
    • 500: #5C9C6A
    • 600: #4A8A59
    • 700: #387447
    • 800: #2C6139
    • 900: #1F4D2B, the color entered
    • 950: #0E3218

The outlined step in each ramp is the color that was typed in. All eleven steps of all three ramps are generated by the same code the tool above runs.

Which steps take white text

The question everybody has about a new scale, and the one a picture cannot answer. Every number below is a WCAG contrast ratio against the step beside it, so 4.5 and above clears the threshold for body text and 3.0 clears it for large text only.

Contrast of white and black text on each step of a mid green scale
Step50100200300400500600700800900950
White text1.11.21.41.82.43.24.15.67.39.014.0
Black text19.517.715.312.08.76.55.13.82.92.31.5

For this green, black text passes up to 600 and white text takes over at 700, with nothing left over: the handover is clean, and every rung of this scale carries body text in one ink or the other. Whether a scale has that gap depends on its hue, and so does where the handover falls: a yellow stays light far further down than a blue does. Do not carry these numbers to another color. Run yours through the contrast checker, or put the whole scale in the contrast grid.

Common questions

What is a Tailwind color scale?
Eleven shades of one color numbered 50 to 950, lightest to darkest. Tailwind popularised the numbering and most design systems now use it, because it gives every color the same set of rungs: a 100 is always a pale wash and a 800 is always a deep one, whatever the hue. That consistency is what lets you swap a whole palette by changing one set of values.
Why is my color not at 500?
Because 500 is a lightness, not a rank. It means a mid shade, and if the color you entered is already pale it belongs higher up the scale. Placing every input at 500 is the common shortcut and it produces a bad scale: a pale mint pinned to 500 has nothing usable above it and a dark end made of darkened mint rather than a genuine dark green. This generator finds the step your color already matches and builds the rest around it.
How are the other steps calculated?
Each step has a target lightness measured in OKLab, a color space built so that equal numeric steps look like equal steps to the eye. The generator holds your hue, sets the lightness to the target, and scales the chroma up or down: less at the very light and very dark ends, where high saturation either falls outside what a screen can show or stops reading as the same color. Chroma is relative to your color, so a muted input gives a muted scale rather than being pushed toward a saturation it never had.
Does it work with Tailwind v4?
Yes. v4 reads its palette from CSS custom properties in an @theme block, so the v4 export gives you exactly that and nothing else to wire up. The v3 export is the tailwind.config.js shape, under theme.extend.colors. There are also plain CSS variables, SCSS and JSON for everything that is not Tailwind.
Which steps can I put white text on?
That is worth checking rather than guessing, so the tool labels every swatch. For the mid green shown further down this page, black text clears the 4.5 to 1 body threshold up to 600 and white text takes over from 700. The crossover moves with the hue, and some scales leave a step or two in the middle where neither ink passes and you need a larger or heavier size. Yellows stay light far further down the scale than blues do.
Can I generate a whole palette rather than one scale?
This page does one color at a time, which is the usual case: you have a brand color and you need its ramp. For a full multi-color palette, the palette generator builds five colors that work together, and each of those can be brought here for its own scale. The contrast grid is the thing to run afterwards, because a scale being evenly spaced says nothing about which of its steps are safe together.
All tools
Share