Tailwind Colors

Browse the full Tailwind CSS color scale, from 50 to 950, in Hex, RGB, HSL and OKLCH, compatible with v3 and v4.

View full scale
Slate
Gray
Zinc
Neutral
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose

Slate

50
98
100
97
200
93
300
87
400
71
500
55
600
45
700
37
800
28
900
21
950
13

Gray

50
99
100
97
200
93
300
87
400
71
500
55
600
45
700
37
800
28
900
21
950
13

Zinc

50
99
100
97
200
92
300
87
400
71
500
55
600
44
700
37
800
27
900
21
950
14

Neutral

50
99
100
97
200
92
300
87
400
72
500
56
600
44
700
37
800
27
900
21
950
14

Stone

50
99
100
97
200
92
300
87
400
72
500
55
600
44
700
37
800
27
900
22
950
15

Red

50
97
100
94
200
89
300
81
400
71
500
64
600
58
700
51
800
44
900
40
950
26

Orange

50
98
100
95
200
90
300
84
400
76
500
71
600
65
700
55
800
47
900
41
950
27

Amber

50
99
100
96
200
92
300
88
400
84
500
77
600
67
700
56
800
47
900
41
950
28

Yellow

50
99
100
97
200
95
300
91
400
86
500
80
600
68
700
55
800
48
900
42
950
29

Lime

50
99
100
97
200
94
300
90
400
85
500
77
600
65
700
53
800
45
900
41
950
27

Green

50
98
100
96
200
93
300
87
400
80
500
72
600
63
700
53
800
45
900
39
950
27

Emerald

50
98
100
95
200
91
300
85
400
77
500
70
600
60
700
51
800
43
900
38
950
26

Teal

50
98
100
95
200
91
300
86
400
79
500
70
600
60
700
51
800
44
900
39
950
28

Cyan

50
98
100
96
200
92
300
87
400
80
500
72
600
61
700
52
800
45
900
40
950
30

Sky

50
98
100
95
200
90
300
83
400
75
500
69
600
59
700
50
800
44
900
39
950
29

Blue

50
97
100
93
200
88
300
81
400
71
500
62
600
55
700
49
800
42
900
38
950
28

Indigo

50
96
100
93
200
87
300
79
400
68
500
59
600
51
700
46
800
40
900
36
950
26

Violet

50
97
100
94
200
89
300
81
400
71
500
61
600
54
700
49
800
43
900
38
950
28

Purple

50
98
100
95
200
90
300
83
400
72
500
63
600
56
700
50
800
44
900
38
950
29

Fuchsia

50
98
100
95
200
90
300
83
400
75
500
67
600
59
700
52
800
45
900
40
950
29

Pink

50
97
100
95
200
90
300
82
400
73
500
66
600
59
700
53
800
46
900
41
950
28

Rose

50
97
100
94
200
89
300
81
400
72
500
65
600
59
700
51
800
46
900
41
950
27

What the Tailwind CSS color palette is

Tailwind CSS includes a predefined color palette, organized into named families (Slate, Gray, Red, Orange, Blue...) and eleven shades per family, numbered from 50 (lightest) to 950 (darkest). That numbering has become a de facto standard that many other projects and libraries have adopted, beyond Tailwind.

Tailwind version 4 changed the internal color format from RGB to OKLCH, a perceptual color space that represents hues more evenly for the human eye. The result is more consistent lightness steps across each family’s shades, while traditional Hex and RGB values remain available when you need them.

How to use the table

Switch between v3 and v4 to match the version in your project, and between Hex, RGB, HSL and OKLCH depending on what you need to copy. Click any shade to copy its code instantly.

Frequently asked questions

v4 uses the OKLCH color space internally, which gives more even lightness steps between shades. v3 uses traditional Hex and RGB values. Both keep the same family and shade numbering.

It’s Tailwind’s standard scale: 50 is the lightest shade (almost white) and 950 the darkest (almost black), with intermediate steps meant to cover backgrounds, text, borders and states consistently across an interface.

If you use Tailwind’s default colors, they are already available with classes like bg-blue-500 or text-red-700 with no extra setup. You only need the codes from this table if you want to reuse the color outside Tailwind.

OKLCH is a color space where lightness is calculated perceptually, so two colors with the same lightness value look equally light to the human eye. That produces more even color scales than those based on traditional RGB.

Yes. The table lets you switch between Hex, RGB, HSL and OKLCH, and copy any of them with one click.