Tailwind Color Picker

Browse all Tailwind CSS default colors. Click any shade to copy the class name or hex value.

Last updated: September 2026

Processed on your device — never uploaded

Find Nearest Tailwind Color

slate

#f8fafc

#f1f5f9

#e2e8f0

#cbd5e1

#94a3b8

#64748b

#475569

#334155

#1e293b

#0f172a

#020617

gray

#f9fafb

#f3f4f6

#e5e7eb

#d1d5db

#9ca3af

#6b7280

#4b5563

#374151

#1f2937

#111827

#030712

zinc

#fafafa

#f4f4f5

#e4e4e7

#d4d4d8

#a1a1aa

#71717a

#52525b

#3f3f46

#27272a

#18181b

#09090b

neutral

#fafafa

#f5f5f5

#e5e5e5

#d4d4d4

#a3a3a3

#737373

#525252

#404040

#262626

#171717

#0a0a0a

stone

#fafaf9

#f5f5f4

#e7e5e4

#d6d3d1

#a8a29e

#78716c

#57534e

#44403c

#292524

#1c1917

#0c0a09

red

#fef2f2

#fee2e2

#fecaca

#fca5a5

#f87171

#ef4444

#dc2626

#b91c1c

#991b1b

#7f1d1d

#450a0a

orange

#fff7ed

#ffedd5

#fed7aa

#fdba74

#fb923c

#f97316

#ea580c

#c2410c

#9a3412

#7c2d12

#431407

amber

#fffbeb

#fef3c7

#fde68a

#fcd34d

#fbbf24

#f59e0b

#d97706

#b45309

#92400e

#78350f

#451a03

yellow

#fefce8

#fef9c3

#fef08a

#fde047

#facc15

#eab308

#ca8a04

#a16207

#854d0e

#713f12

#422006

lime

#f7fee7

#ecfccb

#d9f99d

#bef264

#a3e635

#84cc16

#65a30d

#4d7c0f

#3f6212

#365314

#1a2e05

green

#f0fdf4

#dcfce7

#bbf7d0

#86efac

#4ade80

#22c55e

#16a34a

#15803d

#166534

#14532d

#052e16

emerald

#ecfdf5

#d1fae5

#a7f3d0

#6ee7b7

#34d399

#10b981

#059669

#047857

#065f46

#064e3b

#022c22

teal

#f0fdfa

#ccfbf1

#99f6e4

#5eead4

#2dd4bf

#14b8a6

#0d9488

#0f766e

#115e59

#134e4a

#042f2e

cyan

#ecfeff

#cffafe

#a5f3fc

#67e8f9

#22d3ee

#06b6d4

#0891b2

#0e7490

#155e75

#164e63

#083344

sky

#f0f9ff

#e0f2fe

#bae6fd

#7dd3fc

#38bdf8

#0ea5e9

#0284c7

#0369a1

#075985

#0c4a6e

#082f49

blue

#eff6ff

#dbeafe

#bfdbfe

#93c5fd

#60a5fa

#3b82f6

#2563eb

#1d4ed8

#1e40af

#1e3a8a

#172554

indigo

#eef2ff

#e0e7ff

#c7d2fe

#a5b4fc

#818cf8

#6366f1

#4f46e5

#4338ca

#3730a3

#312e81

#1e1b4b

violet

#f5f3ff

#ede9fe

#ddd6fe

#c4b5fd

#a78bfa

#8b5cf6

#7c3aed

#6d28d9

#5b21b6

#4c1d95

#2e1065

purple

#faf5ff

#f3e8ff

#e9d5ff

#d8b4fe

#c084fc

#a855f7

#9333ea

#7e22ce

#6b21a8

#581c87

#3b0764

fuchsia

#fdf4ff

#fae8ff

#f5d0fe

#f0abfc

#e879f9

#d946ef

#c026d3

#a21caf

#86198f

#701a75

#4a044e

pink

#fdf2f8

#fce7f3

#fbcfe8

#f9a8d4

#f472b6

#ec4899

#db2777

#be185d

#9d174d

#831843

#500724

rose

#fff1f2

#ffe4e6

#fecdd3

#fda4af

#fb7185

#f43f5e

#e11d48

#be123c

#9f1239

#881337

#4c0519

How to use

Click a color swatch to copy its hex value
Click the shade number to copy the Tailwind class name (e.g. bg-blue-500)
Use the search bar to filter colors by name

Need a visual CSS editor?Try Webflow

What is This Tool?

Tailwind Color Picker is a free browser-based tool that lets you browse and search all Tailwind CSS color classes with visual previews, HEX values, and one-click copy. It processes everything locally in your browser using JavaScript, so your data never leaves your device. No sign-up, no installation, and no server uploads required — just open the tool and start using it immediately.

How to Use This Tool

Use the visual controls (sliders, color pickers, toggles) to design your effect.
See the live preview update in real time as you adjust settings.
Review the generated CSS code in the code panel below.
Click Copy CSS to paste the code directly into your stylesheet.

When to Use This Tool

This tool is particularly useful when finding the right Tailwind color class for your design, converting between Tailwind colors and HEX/RGB values. Since it runs entirely in your browser, it works offline after the page loads and keeps your data completely private. Whether you are a developer, designer, student, or professional, this Tailwind CSS tool saves time and eliminates the need for desktop software installation.

Tips and Best Practices

Copy the generated CSS directly into your project stylesheet — it is production-ready.
Test the effect in multiple browsers since some CSS properties have varying support.
Combine multiple generators (e.g., gradient + box-shadow) for layered visual effects.
Use CSS custom properties (variables) to make generated values easy to update later.
All code generation happens in your browser — no external dependencies required.

Frequently Asked Questions

How many colors does Tailwind CSS include by default?

Tailwind CSS includes 22 color families (like slate, red, blue, emerald) each with 11 shades ranging from 50 (lightest) to 950 (darkest), totaling 242 default color values.

How do I use Tailwind colors in my project?

Apply Tailwind color classes directly in your HTML using the pattern bg-{color}-{shade} for backgrounds, text-{color}-{shade} for text, and border-{color}-{shade} for borders.

Can I customize the default Tailwind color palette?

Yes, you can extend or override the default colors in your Tailwind configuration file (tailwind.config.js or v4 CSS theme) by adding custom color values.

Color Picker Color Palette Generator Code to Image

Get Tool Tips & Updates

Weekly tips, new tools, and productivity hacks. No spam.

What is This Tool?

When to Use This Tool

Tips and Best Practices

Copy the generated CSS directly into your project stylesheet — it is production-ready.

Test the effect in multiple browsers since some CSS properties have varying support.

Combine multiple generators (e.g., gradient + box-shadow) for layered visual effects.

Use CSS custom properties (variables) to make generated values easy to update later.

All code generation happens in your browser — no external dependencies required.

Frequently Asked Questions

How many colors does Tailwind CSS include by default?

Tailwind CSS includes 22 color families (like slate, red, blue, emerald) each with 11 shades ranging from 50 (lightest) to 950 (darkest), totaling 242 default color values.

How do I use Tailwind colors in my project?

Apply Tailwind color classes directly in your HTML using the pattern bg-{color}-{shade} for backgrounds, text-{color}-{shade} for text, and border-{color}-{shade} for borders.

Can I customize the default Tailwind color palette?

Yes, you can extend or override the default colors in your Tailwind configuration file (tailwind.config.js or v4 CSS theme) by adding custom color values.

Tailwind Color Picker

Find Nearest Tailwind Color

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

How to use

What is This Tool?

How to Use This Tool

When to Use This Tool

Tips and Best Practices

Frequently Asked Questions

Related Tools

You Might Also Like

Get Tool Tips & Updates

Tailwind Color Picker

Find Nearest Tailwind Color

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

How to use

What is This Tool?

How to Use This Tool

When to Use This Tool

Tips and Best Practices

Frequently Asked Questions

Related Tools

You Might Also Like

Get Tool Tips & Updates