ToolZone

Tailwind Color Generator

Generate a full Tailwind CSS shade scale, from 50 to 900, for any base color, matching the structure of Tailwind's default palette.

#3B82F6
50
#EBF3FE
100
#D8E6FD
200
#B1CDFB
300
#89B4FA
400
#629BF8
500
#3B82F6
600
#3575DD
700
#2F68C5
800
#295BAC
900
#234E94
950
#1E417B
@theme {
  --color-primary-50: #EBF3FE;
  --color-primary-100: #D8E6FD;
  --color-primary-200: #B1CDFB;
  --color-primary-300: #89B4FA;
  --color-primary-400: #629BF8;
  --color-primary-500: #3B82F6;
  --color-primary-600: #3575DD;
  --color-primary-700: #2F68C5;
  --color-primary-800: #295BAC;
  --color-primary-900: #234E94;
  --color-primary-950: #1E417B;
}

About the Tailwind Color Generator

A Tailwind color generator creates a full shade scale, from 50 to 900, for any base color, matching the structure Tailwind CSS uses for its default color palette.

How to use

1

Enter or pick your base color.

2

The tool generates a full range of lighter and darker shades.

3

Copy the generated shades into your Tailwind config.

Frequently asked questions

How does Tailwind's shade numbering work?
Lower numbers like 50 and 100 represent lighter shades, while higher numbers like 800 and 900 represent darker shades, with 500 typically closest to the base color.
Can I use these shades outside of Tailwind?
Yes, the generated HEX values work in any CSS setup, not just Tailwind, though the naming convention is specifically modeled after Tailwind's system.

Explore more tools in the Color category.