Tailwind CSS color design system

Explore the Tailwind CSS color design system with ease. View and copy each color's code in multiple formats: HEX, RGB, HSL, OKLCH, CMYK, CIELAB, and HSV. Simply select a color and copy its code to your clipboard.

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

Free and premium multipage themes & UI Kits For freelancers, developers, businesses, and personal use. Beautifully crafted with Astro.js, and Tailwind CSS

Lexington Themes

Free and premium multipage themes & UI Kits For freelancers, developers, businesses, and personal use. Beautifully crafted with Astro.js, and Tailwind CSS

Visit Lexington Themes →

Premium components, elements and layouts For freelancers, developers, businesses, and personal use. Beautifully crafted with Tailwind CSS and Alpine JS

Oxbow UI

Premium components, elements and layouts For freelancers, developers, businesses, and personal use. Beautifully crafted with Tailwind CSS and Alpine JS

Visit Oxbow UI →