Tailwind Color Palette Generator: 50 to 950 Shades, Free

Generate a 50 to 950 scale from your color

Your color lands on the stop whose lightness is closest to it, or on the stop you choose. The other stops follow the lightness and saturation curve of the default Tailwind palette, worked out in OKLCH.

Base color

NamePut my color at

More formats: CSS variables, SCSS, JSON, SVG, PNG, ASE, PDF

Format

:root {
  --brand-50: #F3F8FF;
  --brand-100: #E5EFFF;
  --brand-200: #CCE1FF;
  --brand-300: #A9CCFF;
  --brand-400: #7CB1FF;
  --brand-500: #4D96FF;
  --brand-600: #1877F2;
  --brand-700: #0A60CA;
  --brand-800: #0D4FA4;
  --brand-900: #104387;
  --brand-950: #062654;
}

Find the closest Tailwind color to your HEX

indigo-500

#6366F1 · Delta E 0.0

blue-600

#2563EB · Delta E 6.9

violet-500

#8B5CF6 · Delta E 7.2

Default palette. Click a swatch to copy as:

Hue50100200300400500600700800900950

Click any swatch to copy it in the chosen format, or click a hue name to copy the whole row. Class names follow bg-{hue}-{shade}. These are the Tailwind v3 HEX values; Tailwind v4 defines the default palette in OKLCH, so v4 colors can look slightly different.

Follow @mytoolstudio

How to use

Generate your scale

Enter your color in Base color, give it a Name, and leave Put my color at on Closest match or choose a stop such as 500. Random and Pick from screen give quick starting points.

Copy the config

Press Copy Tailwind v4 @theme, the OKLCH version, or Copy Tailwind v3 config. The export panel adds CSS variables, SCSS, JSON and file downloads, and Copy share link saves the setup.

Browse or match the default palette

Pick a copy format, then click any swatch in the default grid, or click a hue name to copy the whole row. The finder at the top returns the three closest default colors for any HEX.

Why Tailwind Color Palette

Generates a 50 to 950 scale from any HEX color.
Tailwind v4 @theme (HEX or OKLCH) and v3 config export.
All 22 default colors, copy as HEX, class, RGB or OKLCH.
Finds the closest default class for any HEX.

Adding custom colors in Tailwind v4 vs v3

Tailwind v4 moved configuration into CSS. You declare theme values with the @theme directive in your stylesheet, and every --color-* variable becomes a set of color utilities. Tailwind v3 used a JavaScript config file, where custom colors live under theme.extend.colors.

Either way, keep the default palette available by extending it rather than replacing it, and follow the same 50 to 950 naming so your custom colors behave like the built-in ones. If you only need to match a design to the defaults, the finder on this page gives you the nearest class name so you can skip custom colors altogether.

Version	Where colors go	Example
Tailwind v4	@theme block in your CSS	@theme { --color-brand-500: #6366F1; }
Tailwind v3	theme.extend.colors in tailwind.config.js	colors: { brand: { 500: '#6366F1' } }
Both	Use in markup	bg-brand-500, text-brand-500, border-brand-500

Common questions

What do Tailwind shade numbers 50 to 950 mean?

They show how light or dark a shade is: 50 is the lightest, 500 is the middle, and 950 is the darkest. The numbers are labels, not percentages. 950 was added in Tailwind v3.3.

How do I find the Tailwind class closest to my hex color?

Paste the hex into the finder at the top. It compares your color with all 242 default swatches using the CIEDE2000 Delta E formula and shows the three closest. Under about 2 is a very close match.

Which Tailwind version do these colors match?

The HEX values are the Tailwind v3 default palette. Tailwind v4 defines its defaults in OKLCH, and some colors were adjusted, so a v4 shade can look slightly different from the HEX shown here.

How do I add custom colors in Tailwind v4?

In your main CSS file, add a variable inside @theme, such as --color-brand-500: #6366F1;. Tailwind then creates utilities like bg-brand-500 and text-brand-500 automatically.

How do I add custom colors in Tailwind v3?

Add them under theme.extend.colors in tailwind.config.js, for example brand: { 500: '#6366F1' }. Using extend keeps the default palette available alongside your colors.

How do I generate a custom 50 to 950 palette for Tailwind?

Enter your color in Generate a 50 to 950 scale from your color. The generator places it on the closest matching stop, or the stop you choose, and builds the other stops from the lightness and saturation curve of the default palette in OKLCH. Copy the result as a v4 @theme block or a v3 config.

Does Tailwind v4 use OKLCH colors?

Yes. The default palette in Tailwind v4 is written in OKLCH, which allows more vivid colors on wide gamut displays. You can still use HEX or any other CSS color for your own theme values.

Does clicking a Tailwind swatch copy the class name or the HEX?

Your choice. Pick HEX, Class, RGB or OKLCH above the default grid, then click a swatch. Class copies a name like bg-sky-500, which you can change to text- or border-. Clicking a hue name copies the whole row in the same format.

More Color tools

View all

Tailwind Color Palette