ColorSift
颜色
调色板
渐变
文章
工具
参考
术语表
🇨🇳
Home
Reference
Tailwind CSS颜色
Tailwind CSS颜色
包含所有22个色系和11个色阶的完整Tailwind CSS v4默认调色板。
Slate
Gray
Zinc
Neutral
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
slate
Shade
Class Name
HEX
50
slate-50
#f8fafc
100
slate-100
#f1f5f9
200
slate-200
#e2e8f0
300
slate-300
#cbd5e1
400
slate-400
#94a3b8
500
slate-500
#64748b
600
slate-600
#475569
700
slate-700
#334155
800
slate-800
#1e293b
900
slate-900
#0f172a
950
slate-950
#020617
gray
Shade
Class Name
HEX
50
gray-50
#f9fafb
100
gray-100
#f3f4f6
200
gray-200
#e5e7eb
300
gray-300
#d1d5db
400
gray-400
#9ca3af
500
gray-500
#6b7280
600
gray-600
#4b5563
700
gray-700
#374151
800
gray-800
#1f2937
900
gray-900
#111827
950
gray-950
#030712
zinc
Shade
Class Name
HEX
50
zinc-50
#fafafa
100
zinc-100
#f4f4f5
200
zinc-200
#e4e4e7
300
zinc-300
#d4d4d8
400
zinc-400
#a1a1aa
500
zinc-500
#71717a
600
zinc-600
#52525b
700
zinc-700
#3f3f46
800
zinc-800
#27272a
900
zinc-900
#18181b
950
zinc-950
#09090b
neutral
Shade
Class Name
HEX
50
neutral-50
#fafafa
100
neutral-100
#f5f5f5
200
neutral-200
#e5e5e5
300
neutral-300
#d4d4d4
400
neutral-400
#a3a3a3
500
neutral-500
#737373
600
neutral-600
#525252
700
neutral-700
#404040
800
neutral-800
#262626
900
neutral-900
#171717
950
neutral-950
#0a0a0a
stone
Shade
Class Name
HEX
50
stone-50
#fafaf9
100
stone-100
#f5f5f4
200
stone-200
#e7e5e4
300
stone-300
#d6d3d1
400
stone-400
#a8a29e
500
stone-500
#78716c
600
stone-600
#57534e
700
stone-700
#44403c
800
stone-800
#292524
900
stone-900
#1c1917
950
stone-950
#0c0a09
red
Shade
Class Name
HEX
50
red-50
#fef2f2
100
red-100
#fee2e2
200
red-200
#fecaca
300
red-300
#fca5a5
400
red-400
#f87171
500
red-500
#ef4444
600
red-600
#dc2626
700
red-700
#b91c1c
800
red-800
#991b1b
900
red-900
#7f1d1d
950
red-950
#450a0a
orange
Shade
Class Name
HEX
50
orange-50
#fff7ed
100
orange-100
#ffedd5
200
orange-200
#fed7aa
300
orange-300
#fdba74
400
orange-400
#fb923c
500
orange-500
#f97316
600
orange-600
#ea580c
700
orange-700
#c2410c
800
orange-800
#9a3412
900
orange-900
#7c2d12
950
orange-950
#431407
amber
Shade
Class Name
HEX
50
amber-50
#fffbeb
100
amber-100
#fef3c7
200
amber-200
#fde68a
300
amber-300
#fcd34d
400
amber-400
#fbbf24
500
amber-500
#f59e0b
600
amber-600
#d97706
700
amber-700
#b45309
800
amber-800
#92400e
900
amber-900
#78350f
950
amber-950
#451a03
yellow
Shade
Class Name
HEX
50
yellow-50
#fefce8
100
yellow-100
#fef9c3
200
yellow-200
#fef08a
300
yellow-300
#fde047
400
yellow-400
#facc15
500
yellow-500
#eab308
600
yellow-600
#ca8a04
700
yellow-700
#a16207
800
yellow-800
#854d0e
900
yellow-900
#713f12
950
yellow-950
#422006
lime
Shade
Class Name
HEX
50
lime-50
#f7fee7
100
lime-100
#ecfccb
200
lime-200
#d9f99d
300
lime-300
#bef264
400
lime-400
#a3e635
500
lime-500
#84cc16
600
lime-600
#65a30d
700
lime-700
#4d7c0f
800
lime-800
#3f6212
900
lime-900
#365314
950
lime-950
#1a2e05
green
Shade
Class Name
HEX
50
green-50
#f0fdf4
100
green-100
#dcfce7
200
green-200
#bbf7d0
300
green-300
#86efac
400
green-400
#4ade80
500
green-500
#22c55e
600
green-600
#16a34a
700
green-700
#15803d
800
green-800
#166534
900
green-900
#14532d
950
green-950
#052e16
emerald
Shade
Class Name
HEX
50
emerald-50
#ecfdf5
100
emerald-100
#d1fae5
200
emerald-200
#a7f3d0
300
emerald-300
#6ee7b7
400
emerald-400
#34d399
500
emerald-500
#10b981
600
emerald-600
#059669
700
emerald-700
#047857
800
emerald-800
#065f46
900
emerald-900
#064e3b
950
emerald-950
#022c22
teal
Shade
Class Name
HEX
50
teal-50
#f0fdfa
100
teal-100
#ccfbf1
200
teal-200
#99f6e4
300
teal-300
#5eead4
400
teal-400
#2dd4bf
500
teal-500
#14b8a6
600
teal-600
#0d9488
700
teal-700
#0f766e
800
teal-800
#115e59
900
teal-900
#134e4a
950
teal-950
#042f2e
cyan
Shade
Class Name
HEX
50
cyan-50
#ecfeff
100
cyan-100
#cffafe
200
cyan-200
#a5f3fc
300
cyan-300
#67e8f9
400
cyan-400
#22d3ee
500
cyan-500
#06b6d4
600
cyan-600
#0891b2
700
cyan-700
#0e7490
800
cyan-800
#155e75
900
cyan-900
#164e63
950
cyan-950
#083344
sky
Shade
Class Name
HEX
50
sky-50
#f0f9ff
100
sky-100
#e0f2fe
200
sky-200
#bae6fd
300
sky-300
#7dd3fc
400
sky-400
#38bdf8
500
sky-500
#0ea5e9
600
sky-600
#0284c7
700
sky-700
#0369a1
800
sky-800
#075985
900
sky-900
#0c4a6e
950
sky-950
#082f49
blue
Shade
Class Name
HEX
50
blue-50
#eff6ff
100
blue-100
#dbeafe
200
blue-200
#bfdbfe
300
blue-300
#93c5fd
400
blue-400
#60a5fa
500
blue-500
#3b82f6
600
blue-600
#2563eb
700
blue-700
#1d4ed8
800
blue-800
#1e40af
900
blue-900
#1e3a8a
950
blue-950
#172554
indigo
Shade
Class Name
HEX
50
indigo-50
#eef2ff
100
indigo-100
#e0e7ff
200
indigo-200
#c7d2fe
300
indigo-300
#a5b4fc
400
indigo-400
#818cf8
500
indigo-500
#6366f1
600
indigo-600
#4f46e5
700
indigo-700
#4338ca
800
indigo-800
#3730a3
900
indigo-900
#312e81
950
indigo-950
#1e1b4b
violet
Shade
Class Name
HEX
50
violet-50
#f5f3ff
100
violet-100
#ede9fe
200
violet-200
#ddd6fe
300
violet-300
#c4b5fd
400
violet-400
#a78bfa
500
violet-500
#8b5cf6
600
violet-600
#7c3aed
700
violet-700
#6d28d9
800
violet-800
#5b21b6
900
violet-900
#4c1d95
950
violet-950
#2e1065
purple
Shade
Class Name
HEX
50
purple-50
#faf5ff
100
purple-100
#f3e8ff
200
purple-200
#e9d5ff
300
purple-300
#d8b4fe
400
purple-400
#c084fc
500
purple-500
#a855f7
600
purple-600
#9333ea
700
purple-700
#7e22ce
800
purple-800
#6b21a8
900
purple-900
#581c87
950
purple-950
#3b0764
fuchsia
Shade
Class Name
HEX
50
fuchsia-50
#fdf4ff
100
fuchsia-100
#fae8ff
200
fuchsia-200
#f5d0fe
300
fuchsia-300
#f0abfc
400
fuchsia-400
#e879f9
500
fuchsia-500
#d946ef
600
fuchsia-600
#c026d3
700
fuchsia-700
#a21caf
800
fuchsia-800
#86198f
900
fuchsia-900
#701a75
950
fuchsia-950
#4a044e
pink
Shade
Class Name
HEX
50
pink-50
#fdf2f8
100
pink-100
#fce7f3
200
pink-200
#fbcfe8
300
pink-300
#f9a8d4
400
pink-400
#f472b6
500
pink-500
#ec4899
600
pink-600
#db2777
700
pink-700
#be185d
800
pink-800
#9d174d
900
pink-900
#831843
950
pink-950
#500724
rose
Shade
Class Name
HEX
50
rose-50
#fff1f2
100
rose-100
#ffe4e6
200
rose-200
#fecdd3
300
rose-300
#fda4af
400
rose-400
#fb7185
500
rose-500
#f43f5e
600
rose-600
#e11d48
700
rose-700
#be123c
800
rose-800
#9f1239
900
rose-900
#881337
950
rose-950
#4c0519