How to Create a Custom Tailwind Color Palette from One Color

Tailwind CSS comes with great default colors, but your brand has its own. To use it properly you need more than one shade. You need a light one for backgrounds, a mid one for buttons and a dark one for text. That is what the 50 to 950 scale is for. This guide explains how to build one from a single color.

What is a Tailwind color scale?

In Tailwind, each color has 11 steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950. 50 is almost white. 950 is almost black. The number in the middle, usually 500 or 600, is the main brand color. With a full scale you can write classes like bg-brand-50, text-brand-700 and border-brand-200.

Why you can't just add white and black

The quick way to make shades is to mix your color with white for lighter steps and black for darker ones. It works, but the results often look washed out or muddy. Real design systems adjust lightness and color intensity together. Light shades need a little less color, and dark shades need to keep their hue without turning gray.

Our Tailwind shades generator builds the scale in a color space called OKLCH. It keeps your hue, steps the lightness evenly from very light to very dark, and eases the color intensity at both ends. The result looks like a hand-made scale.

Make your scale in three steps

1. Open the Tailwind shades generator and enter your brand HEX code.
2. Check the 50 to 950 swatches. Your exact color stays at its natural step, usually 500 or 600.
3. Copy the code. Choose Tailwind v4 or v3 from the format tabs.

Use it in Tailwind v4

Tailwind v4 reads colors from CSS. Paste the export into your stylesheet inside @theme:

@theme {
  --color-brand-50: #f5f4ff;
  --color-brand-500: #9261ff;
  --color-brand-950: #290a59;
}

Now bg-brand-500 and text-brand-950 just work.

Use it in Tailwind v3

In Tailwind v3, add the colors to tailwind.config.js:

colors: {
  brand: {
    50: '#f5f4ff',
    500: '#9261ff',
    950: '#290a59',
  },
}

Which shade should I use for what?

• 50 and 100: page and card backgrounds, hover states, soft badges.
• 200 and 300: borders and dividers.
• 500 and 600: buttons and links. Check white text on them first.
• 700 to 900: headings, body text on light backgrounds and dark mode surfaces.
• 950: the darkest text and deep dark-mode backgrounds.

Check accessibility

Each swatch in the generator shows the contrast ratio of its best text color. A ratio of 4.5 or more passes WCAG AA for normal text. Always test the final pairs with the contrast checker.

Name your color well

Name the color for its job, not its look. brand, accent and surface still make sense after a redesign. purple or blue-ish do not. If you have more than one brand color, use primary and secondary, and keep a separate gray scale for text and borders.

Dark mode with the same scale

A good 50 to 950 scale makes dark mode easy, because you can flip the steps instead of picking new colors. A light page uses 50 for the background and 900 for text. A dark page can use 950 for the background and 100 for text. Buttons can stay on 500 or 600 in both modes, but check the contrast again on the dark background.

<div class="bg-brand-50 text-brand-900 dark:bg-brand-950 dark:text-brand-100">
  ...
</div>

When you need to adjust the result by hand

A generated scale is a very good start, but it is not a promise. Look at it before you ship it:

• Light brand colors need care. A yellow or light green looks wrong with white text at step 500. Use dark text on it, or place it at step 300 or 400 and use a darker step for buttons.
• Check the middle steps next to each other. If 400 and 500 look almost the same, your brand color is already close to an end of the scale. Move it to another step.
• Keep your exact brand color. If your brand guide says the color must be one exact HEX code, make sure it appears in the scale unchanged.

Tailwind spacing is not color, but the same idea applies

Tailwind uses a scale for spacing too. One unit is 0.25rem, so p-4 is 1rem, which is 16px at the default size. Using a scale for color, spacing and type keeps a design consistent, and it is what makes a Tailwind project easy to hand over to another person.

Mistakes to avoid

• Using all 11 steps in every screen. Most pages use five or six.
• Using step 500 for body text. It is rarely dark enough. Use 700 or darker.
• Defining a scale and then writing HEX codes directly in components. Use the named classes, so a later change needs one edit.

Frequently asked questions

Can I make a Tailwind palette from any color?

Yes. Enter any HEX code and the tool builds the scale around it.

What if my color is very light or very dark?

Use the "your color is shade" selector to place it at the step you want, for example 200 for a pastel.

Do I need to change my Tailwind config for v4?

No. In v4 you add the CSS variables inside @theme in your stylesheet.

Start from your brand color: generate your Tailwind scale. Need a color from a photo first? Use the image color picker.