Tailwind CSS Colors Complete Color Palette Reference

The complete Tailwind CSS color palette with visual swatches and hex values for all 22 color families and 242 total shades. Use this reference to find the perfect colors for your Tailwind CSS projects from backgrounds and text to borders and gradients.

Quick Answer

Tailwind CSS color syntax: Use bg-blue-500 for background, text-gray-700 for text, border-red-300 for borders. Shades range from 50 (lightest) to 950 (darkest). Add opacity with slash syntax: bg-blue-500/50 for 50% opacity. Updated for Tailwind CSS v4.1.14.

Color Usage Syntax

Utility	Syntax	Example
Background	`bg-{color}-{shade}`	`bg-blue-500`
Text	`text-{color}-{shade}`	`text-gray-700`
Border	`border-{color}-{shade}`	`border-red-300`
Ring	`ring-{color}-{shade}`	`ring-cyan-400`
With Opacity	`bg-{color}-{shade}/{opacity}`	`bg-blue-500/50`
Gradient From	`from-{color}-{shade}`	`from-purple-500`
Gradient To	`to-{color}-{shade}`	`to-pink-500`

Slate

#f8fafc

#f1f5f9

#e2e8f0

#cad5e2

#90a1b9

#62748e

#45556c

#314158

#1d293d

#0f172b

#020618

Gray

#f9fafb

#f3f4f6

#e5e7eb

#d1d5dc

#99a1af

#6a7282

#4a5565

#364153

#1e2939

#101828

#030712

Zinc

#fafafa

#f4f4f5

#e4e4e7

#d4d4d8

#9f9fa9

#71717b

#52525c

#3f3f46

#27272a

#18181b

#09090b

Neutral

#fafafa

#f5f5f5

#e5e5e5

#d4d4d4

#a1a1a1

#737373

#525252

#404040

#262626

#171717

#0a0a0a

Stone

#fafaf9

#f5f5f4

#e7e5e4

#d6d3d1

#a6a09b

#79716b

#57534d

#44403b

#292524

#1c1917

#0c0a09

Red

#fef2f2

#ffe2e2

#ffc9c9

#ffa2a2

#ff6467

#fb2c36

#e7000b

#c10007

#9f0712

#82181a

#460809

Orange

#fff7ed

#ffedd4

#ffd6a7

#ffb86a

#ff8904

#ff6900

#f54900

#ca3500

#9f2d00

#7e2a0c

#441306

Amber

#fffbeb

#fef3c6

#fee685

#ffd230

#ffb900

#fe9a00

#e17100

#bb4d00

#973c00

#7b3306

#461901

Yellow

#fefce8

#fef9c2

#fff085

#ffdf20

#fdc700

#f0b100

#d08700

#a65f00

#894b00

#733e0a

#432004

Lime

#f7fee7

#ecfcca

#d8f999

#bbf451

#9ae600

#7ccf00

#5ea500

#497d00

#3c6300

#35530e

#192e03

Green

#f0fdf4

#dcfce7

#b9f8cf

#7bf1a8

#05df72

#00c950

#00a63e

#008236

#016630

#0d542b

#032e15

Emerald

#ecfdf5

#d0fae5

#a4f4cf

#5ee9b5

#00d492

#00bc7d

#009966

#007a55

#006045

#004f3b

#002c22

Teal

#f0fdfa

#cbfbf1

#96f7e4

#46ecd5

#00d5be

#00bba7

#009689

#00786f

#005f5a

#0b4f4a

#022f2e

Cyan

#ecfeff

#cefafe

#a2f4fd

#53eafd

#00d3f2

#00b8db

#0092b8

#007595

#005f78

#104e64

#053345

Sky

#f0f9ff

#dff2fe

#b8e6fe

#74d4ff

#00bcff

#00a6f4

#0084d1

#0069a8

#00598a

#024a70

#052f4a

Blue

#eff6ff

#dbeafe

#bedbff

#8ec5ff

#51a2ff

#2b7fff

#155dfc

#1447e6

#193cb8

#1c398e

#162456

Indigo

#eef2ff

#e0e7ff

#c6d2ff

#a3b3ff

#7c86ff

#615fff

#4f39f6

#432dd7

#372aac

#312c85

#1e1a4d

Violet

#f5f3ff

#ede9fe

#ddd6ff

#c4b4ff

#a684ff

#8e51ff

#7f22fe

#7008e7

#5d0ec0

#4d179a

#2f0d68

Purple

#faf5ff

#f3e8ff

#e9d4ff

#dab2ff

#c27aff

#ad46ff

#9810fa

#8200db

#6e11b0

#59168b

#3c0366

Fuchsia

#fdf4ff

#fae8ff

#f6cfff

#f4a8ff

#ed6aff

#e12afb

#c800de

#a800b7

#8a0194

#721378

#4b004f

Pink

#fdf2f8

#fce7f3

#fccee8

#fda5d5

#fb64b6

#f6339a

#e60076

#c6005c

#a3004c

#861043

#510424

Rose

#fff1f2

#ffe4e6

#ffccd3

#ffa1ad

#ff637e

#ff2056

#ec003f

#c70036

#a50036

#8b0836

#4d0218

Frequently Asked Questions

How many colors does Tailwind CSS include?▾

Tailwind CSS v4 includes 22 color families: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose. Each family has 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) totaling 242 color values.

How do I use custom colors in Tailwind CSS v4?▾

In Tailwind CSS v4, add custom colors using the @theme directive in your CSS: @theme { --color-brand: #06b6d4; --color-brand-light: #22d3ee; }. These become available as bg-brand, text-brand-light, border-brand, etc. No separate config file is needed.

What is the difference between gray color families in Tailwind CSS?▾

Tailwind CSS offers five gray-toned families with different undertones: slate (blue-gray undertone), gray (neutral-cool), zinc (true neutral), neutral (warm neutral), and stone (warm brown undertone). Choose based on your design aesthetic slate for modern tech, stone for warm/organic designs.

How do I use Tailwind CSS color opacity?▾

Use the slash syntax for opacity: bg-blue-500/50 applies blue background at 50% opacity. This works with text colors (text-white/80), borders (border-gray-200/30), and any color utility. Values range from 0 to 100 in steps of 5.

What are the default Tailwind CSS color values?▾

Each Tailwind CSS color shade maps to a specific hex value. For example, blue-50 is #eff6ff (lightest), blue-500 is #3b82f6 (default/medium), and blue-950 is #172554 (darkest). The 500 shade is typically the primary/default shade used for buttons and accents.

See the Tailwind CSS Cheat Sheet for all utility classes, or explore Tailwind CSS Components to see colors in action.