How do the 50-950 steps work?

Each family has 11 steps: 50 is the lightest (backgrounds and subtle tints) and 950 is the darkest (text on light backgrounds, dark-mode surfaces). The 500 step is roughly the "base" color of the family.

Can I use these colors outside Tailwind?

Absolutely. The palette is one of the most carefully balanced open-source color systems available. Copy the hex values into any design tool, or the OKLCH values into any modern stylesheet - no Tailwind required.

Are these hex values official?

The hex codes here are generated from the official OKLCH values in the tailwindcss package using the reference OKLab conversion, so they match what browsers render on standard sRGB displays.

Tailwind CSS Color Palette

The complete default palette from Tailwind CSS v4.1: 22 color families, each with 11 shade steps from 50 to 950. Values are shown as hex (sRGB) and the official OKLCH definition. Generated directly from the tailwindcss package, so they match the framework exactly.

slate

#F8FAFC

100

#F1F5F9

200

#E2E8F0

300

#CAD5E2

400

#90A1B9

500

#62748E

600

#45556C

700

#314158

800

#1D293D

900

#0F172B

950

#020618

gray

#F9FAFB

100

#F3F4F6

200

#E5E7EB

300

#D1D5DC

400

#99A1AF

500

#6A7282

600

#4A5565

700

#364153

800

#1E2939

900

#101828

950

#030712

zinc

#FAFAFA

100

#F4F4F5

200

#E4E4E7

300

#D4D4D8

400

#9F9FA9

500

#71717B

600

#52525C

700

#3F3F46

800

#27272A

900

#18181B

950

#09090B

neutral

#FAFAFA

100

#F5F5F5

200

#E5E5E5

300

#D4D4D4

400

#A1A1A1

500

#737373

600

#525252

700

#404040

800

#262626

900

#171717

950

#0A0A0A

stone

#FAFAF9

100

#F5F5F4

200

#E7E5E4

300

#D6D3D1

400

#A6A09B

500

#79716B

600

#57534D

700

#44403B

800

#292524

900

#1C1917

950

#0C0A09

red

#FEF2F2

100

#FFE2E2

200

#FFC9C9

300

#FFA2A2

400

#FF6467

500

#FB2C36

600

#E7000B

700

#C10007

800

#9F0712

900

#82181A

950

#460809

orange

#FFF7ED

100

#FFEDD4

200

#FFD6A7

300

#FFB86A

400

#FF8904

500

#FF6900

600

#F54900

700

#CA3500

800

#9F2D00

900

#7E2A0C

950

#441306

amber

#FFFBEB

100

#FEF3C6

200

#FEE685

300

#FFD230

400

#FFB900

500

#FE9A00

600

#E17100

700

#BB4D00

800

#973C00

900

#7B3306

950

#461901

yellow

#FEFCE8

100

#FEF9C2

200

#FFF085

300

#FFDF20

400

#FDC700

500

#F0B100

600

#D08700

700

#A65F00

800

#894B00

900

#733E0A

950

#432004

lime

#F7FEE7

100

#ECFCCA

200

#D8F999

300

#BBF451

400

#9AE600

500

#7CCF00

600

#5EA500

700

#497D00

800

#3C6300

900

#35530E

950

#192E03

green

#F0FDF4

100

#DCFCE7

200

#B9F8CF

300

#7BF1A8

400

#05DF72

500

#00C950

600

#00A63E

700

#008236

800

#016630

900

#0D542B

950

#032E15

emerald

#ECFDF5

100

#D0FAE5

200

#A4F4CF

300

#5EE9B5

400

#00D492

500

#00BC7D

600

#009966

700

#007A55

800

#006045

900

#004F3B

950

#002C22

teal

#F0FDFA

100

#CBFBF1

200

#96F7E4

300

#46ECD5

400

#00D5BE

500

#00BBA7

600

#009689

700

#00786F

800

#005F5A

900

#0B4F4A

950

#022F2E

cyan

#ECFEFF

100

#CEFAFE

200

#A2F4FD

300

#53EAFD

400

#00D3F2

500

#00B8DB

600

#0092B8

700

#007595

800

#005F78

900

#104E64

950

#053345

sky

#F0F9FF

100

#DFF2FE

200

#B8E6FE

300

#74D4FF

400

#00BCFF

500

#00A6F4

600

#0084D1

700

#0069A8

800

#00598A

900

#024A70

950

#052F4A

blue

#EFF6FF

100

#DBEAFE

200

#BEDBFF

300

#8EC5FF

400

#51A2FF

500

#2B7FFF

600

#155DFC

700

#1447E6

800

#193CB8

900

#1C398E

950

#162456

indigo

#EEF2FF

100

#E0E7FF

200

#C6D2FF

300

#A3B3FF

400

#7C86FF

500

#615FFF

600

#4F39F6

700

#432DD7

800

#372AAC

900

#312C85

950

#1E1A4D

violet

#F5F3FF

100

#EDE9FE

200

#DDD6FF

300

#C4B4FF

400

#A684FF

500

#8E51FF

600

#7F22FE

700

#7008E7

800

#5D0EC0

900

#4D179A

950

#2F0D68

purple

#FAF5FF

100

#F3E8FF

200

#E9D4FF

300

#DAB2FF

400

#C27AFF

500

#AD46FF

600

#9810FA

700

#8200DB

800

#6E11B0

900

#59168B

950

#3C0366

fuchsia

#FDF4FF

100

#FAE8FF

200

#F6CFFF

300

#F4A8FF

400

#ED6AFF

500

#E12AFB

600

#C800DE

700

#A800B7

800

#8A0194

900

#721378

950

#4B004F

pink

#FDF2F8

100

#FCE7F3

200

#FCCEE8

300

#FDA5D5

400

#FB64B6

500

#F6339A

600

#E60076

700

#C6005C

800

#A3004C

900

#861043

950

#510424

rose

#FFF1F2

100

#FFE4E6

200

#FFCCD3

300

#FFA1AD

400

#FF637E

500

#FF2056

600

#EC003F

700

#C70036

800

#A50036

900

#8B0836

950

#4D0218

How to Use the Tailwind Color Chart

Browse all 22 families - from slate to rose - with their 11 shade steps and hex codes. Click any swatch to open its detail page, where you can copy the value as hex, RGB, HSL, OKLCH, or CMYK and see harmonies and contrast data.

Why the Tailwind Palette Is Special

The palette is hand-tuned so that the same step number has consistent perceived lightness across families - blue-500 and red-500 feel equally weighty. That consistency is what makes it easy to swap accent colors in a design without rebalancing everything, and it is why v4 rebuilt the palette in the perceptually uniform OKLCH space.

Common Use Cases

Picking accessible color pairs for interfaces, borrowing a professionally balanced palette for non-Tailwind projects, matching brand colors to the nearest Tailwind shade, and referencing hex values when a design tool cannot read OKLCH.

Frequently Asked Questions about Tailwind CSS Color Palette

Tailwind v4 defines its entire default palette in OKLCH, the perceptually uniform CSS color format. Earlier versions used hex. This chart shows both: the official OKLCH value and its hex rendering in the sRGB gamut.