Tailwind v4 Color Reference
Tailwind Class Lookup
Type any class name like blue-500 or slate-700 to instantly get its hex, RGB, and OKLCH values.
242 colors total
red
11#ffe2e2
red-100#ffc9c9
red-200#ffa2a2
red-300#ff6467
red-400#fb2c36
red-500#e7000b
red-600#c10007
red-700#9f0712
red-800#82181a
red-900#460809
red-950orange
11#fff7ed
orange-50#ffedd4
orange-100#ffd6a7
orange-200#ffb86a
orange-300#ff8904
orange-400#ff6900
orange-500#f54900
orange-600#ca3500
orange-700#9f2d00
orange-800#7e2a0c
orange-900#441306
orange-950amber
11#fffbeb
amber-50#fef3c6
amber-100#fee685
amber-200#ffd230
amber-300#ffb900
amber-400#fe9a00
amber-500#e17100
amber-600#bb4d00
amber-700#973c00
amber-800#7b3306
amber-900#461901
amber-950yellow
11#fefce8
yellow-50#fef9c2
yellow-100#fff085
yellow-200#ffdf20
yellow-300#fdc700
yellow-400#f0b100
yellow-500#d08700
yellow-600#a65f00
yellow-700#894b00
yellow-800#733e0a
yellow-900#432004
yellow-950lime
11#f7fee7
lime-50#ecfcca
lime-100#d8f999
lime-200#bbf451
lime-300#9ae600
lime-400#7ccf00
lime-500#5ea500
lime-600#497d00
lime-700#3c6300
lime-800#35530e
lime-900#192e03
lime-950green
11#f0fdf4
green-50#dcfce7
green-100#b9f8cf
green-200#7bf1a8
green-300#05df72
green-400#00c950
green-500#00a63e
green-600#008236
green-700#016630
green-800#0d542b
green-900#032e15
green-950emerald
11#ecfdf5
emerald-50#d0fae5
emerald-100#a4f4cf
emerald-200#5ee9b5
emerald-300#00d492
emerald-400#00bc7d
emerald-500#009966
emerald-600#007a55
emerald-700#006045
emerald-800#004f3b
emerald-900#002c22
emerald-950teal
11#f0fdfa
teal-50#cbfbf1
teal-100#96f7e4
teal-200#46ecd5
teal-300#00d5be
teal-400#00bba7
teal-500#009689
teal-600#00786f
teal-700#005f5a
teal-800#0b4f4a
teal-900#022f2e
teal-950cyan
11#ecfeff
cyan-50#cefafe
cyan-100#a2f4fd
cyan-200#53eafd
cyan-300#00d3f2
cyan-400#00b8db
cyan-500#0092b8
cyan-600#007595
cyan-700#005f78
cyan-800#104e64
cyan-900#053345
cyan-950sky
11#f0f9ff
sky-50#dff2fe
sky-100#b8e6fe
sky-200#74d4ff
sky-300#00bcff
sky-400#00a6f4
sky-500#0084d1
sky-600#0069a8
sky-700#00598a
sky-800#024a70
sky-900#052f4a
sky-950blue
11#eff6ff
blue-50#dbeafe
blue-100#bedbff
blue-200#8ec5ff
blue-300#51a2ff
blue-400#2b7fff
blue-500#155dfc
blue-600#1447e6
blue-700#193cb8
blue-800#1c398e
blue-900#162456
blue-950indigo
11#eef2ff
indigo-50#e0e7ff
indigo-100#c6d2ff
indigo-200#a3b3ff
indigo-300#7c86ff
indigo-400#615fff
indigo-500#4f39f6
indigo-600#432dd7
indigo-700#372aac
indigo-800#312c85
indigo-900#1e1a4d
indigo-950violet
11#f5f3ff
violet-50#ede9fe
violet-100#ddd6ff
violet-200#c4b4ff
violet-300#a684ff
violet-400#8e51ff
violet-500#7f22fe
violet-600#7008e7
violet-700#5d0ec0
violet-800#4d179a
violet-900#2f0d68
violet-950purple
11#faf5ff
purple-50#f3e8ff
purple-100#e9d4ff
purple-200#dab2ff
purple-300#c27aff
purple-400#ad46ff
purple-500#9810fa
purple-600#8200db
purple-700#6e11b0
purple-800#59168b
purple-900#3c0366
purple-950fuchsia
11#fdf4ff
fuchsia-50#fae8ff
fuchsia-100#f6cfff
fuchsia-200#f4a8ff
fuchsia-300#ed6aff
fuchsia-400#e12afb
fuchsia-500#c800de
fuchsia-600#a800b7
fuchsia-700#8a0194
fuchsia-800#721378
fuchsia-900#4b004f
fuchsia-950pink
11#fdf2f8
pink-50#fce7f3
pink-100#fccee8
pink-200#fda5d5
pink-300#fb64b6
pink-400#f6339a
pink-500#ee0000
pink-600#007acb
pink-700#00699c
pink-800#035b00
pink-900#003251
pink-950rose
11#fff1f2
rose-50#ffe4e6
rose-100#ffccd3
rose-200#ffa1ad
rose-300#ff637e
rose-400#ff2056
rose-500#ec003f
rose-600#c70036
rose-700#a50036
rose-800#8b0836
rose-900#4d0218
rose-950slate
11#f8fafc
slate-50#f1f5f9
slate-100#e2e8f0
slate-200#cad5e2
slate-300#90a1b9
slate-400#62748e
slate-500#45556c
slate-600#314158
slate-700#1d293d
slate-800#0f172b
slate-900#020618
slate-950gray
11#f9fafb
gray-50#f3f4f6
gray-100#e5e7eb
gray-200#d1d5dc
gray-300#99a1af
gray-400#6a7282
gray-500#4a5565
gray-600#364153
gray-700#1e2939
gray-800#101828
gray-900#030712
gray-950zinc
11#fafafa
zinc-50#f4f4f5
zinc-100#e4e4e7
zinc-200#d4d4d8
zinc-300#9f9fa9
zinc-400#71717b
zinc-500#52525c
zinc-600#3f3f46
zinc-700#27272a
zinc-800#18181b
zinc-900#09090b
zinc-950neutral
11#fafafa
neutral-50#f5f5f5
neutral-100#e5e5e5
neutral-200#d4d4d4
neutral-300#a1a1a1
neutral-400#737373
neutral-500#525252
neutral-600#404040
neutral-700#262626
neutral-800#171717
neutral-900#0a0a0a
neutral-950stone
11#fafaf9
stone-50#f5f5f4
stone-100#e7e5e4
stone-200#d6d3d1
stone-300#a6a09b
stone-400#79716b
stone-500#57534d
stone-600#44403b
stone-700#292524
stone-800#1c1917
stone-900#0c0a09
stone-950About Tailwind CSS v4 Colors
Tailwind CSS v4 ships with 22 color families — each with 11 shades from 50 (lightest) to 950 (darkest), giving you 220 built-in color stops. Internally they are defined in OKLCH, a perceptually uniform color space that produces consistent vibrancy across the scale. This tool shows you the exact hex, RGB, and OKLCH values for each stop so you can use them in any CSS context, not just Tailwind utilities.