Home ToolsDesign & CreativeTailwind Colors

Tailwind Color Picker

Design & Creative

Verified

★ Popular

Browse and copy all Tailwind CSS colors with multiple format options including HEX, RGB, HSL, CSS classes, and OKLCH

Related in Design & Creative:ASCII Art Colors Free Images Clipboard Image

Tailwind Color Picker

Browse and copy Tailwind CSS colors in multiple formats

Color Format & Search

Choose your preferred color format and search for specific colors

Copy Format

Search Colors

slate

Click on any color to copy it in HEX format

50

#F8FAFC

slate-50

100

#F1F5F9

slate-100

200

#E2E8F0

slate-200

300

#CBD5E1

slate-300

400

#94A3B8

slate-400

500

#64748B

slate-500

600

#475569

slate-600

700

#334155

slate-700

800

#1E293B

slate-800

900

#0F172A

slate-900

950

#020617

slate-950

gray

Click on any color to copy it in HEX format

50

#F9FAFB

gray-50

100

#F3F4F6

gray-100

200

#E5E7EB

gray-200

300

#D1D5DB

gray-300

400

#9CA3AF

gray-400

500

#6B7280

gray-500

600

#4B5563

gray-600

700

#374151

gray-700

800

#1F2937

gray-800

900

#111827

gray-900

950

#030712

gray-950

zinc

Click on any color to copy it in HEX format

50

#FAFAFA

zinc-50

100

#F4F4F5

zinc-100

200

#E4E4E7

zinc-200

300

#D4D4D8

zinc-300

400

#A1A1AA

zinc-400

500

#71717A

zinc-500

600

#52525B

zinc-600

700

#3F3F46

zinc-700

800

#27272A

zinc-800

900

#18181B

zinc-900

950

#09090B

zinc-950

neutral

Click on any color to copy it in HEX format

50

#FAFAFA

neutral-50

100

#F5F5F5

neutral-100

200

#E5E5E5

neutral-200

300

#D4D4D4

neutral-300

400

#A3A3A3

neutral-400

500

#737373

neutral-500

600

#525252

neutral-600

700

#404040

neutral-700

800

#262626

neutral-800

900

#171717

neutral-900

950

#0A0A0A

neutral-950

stone

Click on any color to copy it in HEX format

50

#FAFAF9

stone-50

100

#F5F5F4

stone-100

200

#E7E5E4

stone-200

300

#D6D3D1

stone-300

400

#A8A29E

stone-400

500

#78716C

stone-500

600

#57534E

stone-600

700

#44403C

stone-700

800

#292524

stone-800

900

#1C1917

stone-900

950

#0C0A09

stone-950

red

Click on any color to copy it in HEX format

50

#FEF2F2

red-50

100

#FEE2E2

red-100

200

#FECACA

red-200

300

#FCA5A5

red-300

400

#F87171

red-400

500

#EF4444

red-500

600

#DC2626

red-600

700

#B91C1C

red-700

800

#991B1B

red-800

900

#7F1D1D

red-900

950

#450A0A

red-950

orange

Click on any color to copy it in HEX format

50

#FFF7ED

orange-50

100

#FFEDD5

orange-100

200

#FED7AA

orange-200

300

#FDBA74

orange-300

400

#FB923C

orange-400

500

#F97316

orange-500

600

#EA580C

orange-600

700

#C2410C

orange-700

800

#9A3412

orange-800

900

#7C2D12

orange-900

950

#431407

orange-950

amber

Click on any color to copy it in HEX format

50

#FFFBEB

amber-50

100

#FEF3C7

amber-100

200

#FDE68A

amber-200

300

#FCD34D

amber-300

400

#FBBF24

amber-400

500

#F59E0B

amber-500

600

#D97706

amber-600

700

#B45309

amber-700

800

#92400E

amber-800

900

#78350F

amber-900

950

#451A03

amber-950

yellow

Click on any color to copy it in HEX format

50

#FEFCE8

yellow-50

100

#FEF9C3

yellow-100

200

#FEF08A

yellow-200

300

#FDE047

yellow-300

400

#FACC15

yellow-400

500

#EAB308

yellow-500

600

#CA8A04

yellow-600

700

#A16207

yellow-700

800

#854D0E

yellow-800

900

#713F12

yellow-900

950

#422006

yellow-950

lime

Click on any color to copy it in HEX format

50

#F7FEE7

lime-50

100

#ECFCCB

lime-100

200

#D9F99D

lime-200

300

#BEF264

lime-300

400

#A3E635

lime-400

500

#84CC16

lime-500

600

#65A30D

lime-600

700

#4D7C0F

lime-700

800

#365314

lime-800

900

#1A2E05

lime-900

950

#0F1902

lime-950

green

Click on any color to copy it in HEX format

50

#F0FDF4

green-50

100

#DCFCE7

green-100

200

#BBF7D0

green-200

300

#86EFAC

green-300

400

#4ADE80

green-400

500

#22C55E

green-500

600

#16A34A

green-600

700

#15803D

green-700

800

#166534

green-800

900

#14532D

green-900

950

#052E16

green-950

emerald

Click on any color to copy it in HEX format

50

#ECFDF5

emerald-50

100

#D1FAE5

emerald-100

200

#A7F3D0

emerald-200

300

#6EE7B7

emerald-300

400

#34D399

emerald-400

500

#10B981

emerald-500

600

#059669

emerald-600

700

#047857

emerald-700

800

#065F46

emerald-800

900

#064E3B

emerald-900

950

#022C22

emerald-950

teal

Click on any color to copy it in HEX format

50

#F0FDFA

teal-50

100

#CCFBF1

teal-100

200

#99F6E4

teal-200

300

#5EEAD4

teal-300

400

#2DD4BF

teal-400

500

#14B8A6

teal-500

600

#0D9488

teal-600

700

#0F766E

teal-700

800

#115E59

teal-800

900

#134E4A

teal-900

950

#042F2E

teal-950

cyan

Click on any color to copy it in HEX format

50

#ECFEFF

cyan-50

100

#CFFAFE

cyan-100

200

#A5F3FC

cyan-200

300

#67E8F9

cyan-300

400

#22D3EE

cyan-400

500

#06B6D4

cyan-500

600

#0891B2

cyan-600

700

#0E7490

cyan-700

800

#155E75

cyan-800

900

#164E63

cyan-900

950

#083344

cyan-950

sky

Click on any color to copy it in HEX format

50

#F0F9FF

sky-50

100

#E0F2FE

sky-100

200

#BAE6FD

sky-200

300

#7DD3FC

sky-300

400

#38BDF8

sky-400

500

#0EA5E9

sky-500

600

#0284C7

sky-600

700

#0369A1

sky-700

800

#075985

sky-800

900

#0C4A6E

sky-900

950

#082F49

sky-950

blue

Click on any color to copy it in HEX format

50

#EFF6FF

blue-50

100

#DBEAFE

blue-100

200

#BFDBFE

blue-200

300

#93C5FD

blue-300

400

#60A5FA

blue-400

500

#3B82F6

blue-500

600

#2563EB

blue-600

700

#1D4ED8

blue-700

800

#1E40AF

blue-800

900

#1E3A8A

blue-900

950

#172554

blue-950

indigo

Click on any color to copy it in HEX format

50

#EEF2FF

indigo-50

100

#E0E7FF

indigo-100

200

#C7D2FE

indigo-200

300

#A5B4FC

indigo-300

400

#818CF8

indigo-400

500

#6366F1

indigo-500

600

#4F46E5

indigo-600

700

#4338CA

indigo-700

800

#3730A3

indigo-800

900

#312E81

indigo-900

950

#1E1B4B

indigo-950

violet

Click on any color to copy it in HEX format

50

#F5F3FF

violet-50

100

#EDE9FE

violet-100

200

#DDD6FE

violet-200

300

#C4B5FD

violet-300

400

#A78BFA

violet-400

500

#8B5CF6

violet-500

600

#7C3AED

violet-600

700

#6D28D9

violet-700

800

#5B21B6

violet-800

900

#4C1D95

violet-900

950

#2E1065

violet-950

purple

Click on any color to copy it in HEX format

50

#FAF5FF

purple-50

100

#F3E8FF

purple-100

200

#E9D5FF

purple-200

300

#D8B4FE

purple-300

400

#C084FC

purple-400

500

#A855F7

purple-500

600

#9333EA

purple-600

700

#7E22CE

purple-700

800

#6B21A8

purple-800

900

#581C87

purple-900

950

#3B0764

purple-950

fuchsia

Click on any color to copy it in HEX format

50

#FDF4FF

fuchsia-50

100

#FAE8FF

fuchsia-100

200

#F5D0FE

fuchsia-200

300

#F0ABFC

fuchsia-300

400

#E879F9

fuchsia-400

500

#D946EF

fuchsia-500

600

#C026D3

fuchsia-600

700

#A21CAF

fuchsia-700

800

#86198F

fuchsia-800

900

#701A75

fuchsia-900

950

#4A044E

fuchsia-950

pink

Click on any color to copy it in HEX format

50

#FDF2F8

pink-50

100

#FCE7F3

pink-100

200

#FBCFE8

pink-200

300

#F9A8D4

pink-300

400

#F472B6

pink-400

500

#EC4899

pink-500

600

#DB2777

pink-600

700

#BE185D

pink-700

800

#9D174D

pink-800

900

#831843

pink-900

950

#500724

pink-950

rose

Click on any color to copy it in HEX format

50

#FFF1F2

rose-50

100

#FFE4E6

rose-100

200

#FECDD3

rose-200

300

#FDA4AF

rose-300

400

#FB7185

rose-400

500

#F43F5E

rose-500

600

#E11D48

rose-600

700

#BE123C

rose-700

800

#9F1239

rose-800

900

#881337

rose-900

950

#4C0519

rose-950

About Tailwind Color Picker

Features

• Complete Tailwind CSS color palette
• Multiple output formats (HEX, RGB, HSL, Classes, OKLCH)
• One-click copy to clipboard
• Search and filter colors
• Visual feedback for copied colors
• Responsive grid layout
• Color hover effects

Use Cases

• Tailwind CSS development
• Design system implementation
• Color palette reference
• CSS variable creation
• Brand color matching
• Component styling