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
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

Open Source & Community

OpenSource Toolkit is built by developers, for developers. Join our community and help us create the best collection of developer utilities.

View Source Code

Explore the codebase, report issues, and contribute to the project on GitHub.

Contribute

Add new tools, fix bugs, improve documentation, or suggest features.

MIT License

Free to use, modify, and distribute. Open source software for everyone.

Star on GitHub
Fork & Contribute
Made with ❤️ by Community

More Tools Coming Soon

We're constantly adding new developer utilities. Stay tuned for more powerful tools!

Built with modern design principles