Every shade of the default Tailwind CSS palette, from 50 to 950. Click a colour to copy it.
Switch between v4 (OKLCH colours) and v3 (HEX colours), and choose what gets copied.
50 100 200 300 400 500 600 700 800 900 950
red red 50#fef2f2 red 100#ffe2e2 red 200#ffc9c9 P3 red 300#ffa2a2 P3 red 400#ff6467 P3 red 500#fb2c36 red 600#e7000b P3 red 700#c10007 P3 red 800#9f0712 red 900#82181a red 950#460809
orange orange 50#fff7ed P3 orange 100#ffedd4 P3 orange 200#ffd6a7 P3 orange 300#ffb86a P3 orange 400#ff8904 P3 orange 500#ff6900 P3 orange 600#f54900 P3 orange 700#ca3500 P3 orange 800#9f2d00 P3 orange 900#7e2a0c orange 950#441306
amber amber 50#fffbeb P3 amber 100#fef3c6 amber 200#fee685 amber 300#ffd230 P3 amber 400#ffb900 P3 amber 500#fe9a00 P3 amber 600#e17100 P3 amber 700#bb4d00 P3 amber 800#973c00 P3 amber 900#7b3306 amber 950#461901
yellow yellow 50#fefce8 yellow 100#fef9c2 yellow 200#fff085 yellow 300#ffdf20 P3 yellow 400#fdc700 P3 yellow 500#f0b100 P3 yellow 600#d08700 P3 yellow 700#a65f00 P3 yellow 800#894b00 P3 yellow 900#733e0a yellow 950#432004
lime lime 50#f7fee7 lime 100#ecfcca lime 200#d8f999 lime 300#bbf451 lime 400#9ae600 P3 lime 500#7ccf00 P3 lime 600#5ea500 P3 lime 700#497d00 P3 lime 800#3c6300 P3 lime 900#35530e lime 950#192e03
green green 50#f0fdf4 green 100#dcfce7 green 200#b9f8cf green 300#7bf1a8 green 400#05df72 green 500#00c950 P3 green 600#00a63e P3 green 700#008236 P3 green 800#016630 green 900#0d542b green 950#032e15
emerald emerald 50#ecfdf5 emerald 100#d0fae5 emerald 200#a4f4cf emerald 300#5ee9b5 emerald 400#00d492 P3 emerald 500#00bc7d P3 emerald 600#009966 P3 emerald 700#007a55 P3 emerald 800#006045 P3 emerald 900#004f3b P3 emerald 950#002c22 P3
teal teal 50#f0fdfa teal 100#cbfbf1 teal 200#96f7e4 teal 300#46ecd5 teal 400#00d5be P3 teal 500#00bba7 P3 teal 600#009689 P3 teal 700#00786f P3 teal 800#005f5a P3 teal 900#0b4f4a teal 950#022f2e
cyan cyan 50#ecfeff cyan 100#cefafe cyan 200#a2f4fd cyan 300#53eafd cyan 400#00d3f2 P3 cyan 500#00b8db P3 cyan 600#0092b8 P3 cyan 700#007595 P3 cyan 800#005f78 P3 cyan 900#104e64 cyan 950#053345
sky sky 50#f0f9ff P3 sky 100#dff2fe sky 200#b8e6fe sky 300#74d4ff P3 sky 400#00bcff P3 sky 500#00a6f4 P3 sky 600#0084d1 P3 sky 700#0069a8 P3 sky 800#00598a P3 sky 900#024a70 sky 950#052f4a
blue blue 50#eff6ff blue 100#dbeafe blue 200#bedbff P3 blue 300#8ec5ff P3 blue 400#51a2ff P3 blue 500#2b7fff P3 blue 600#155dfc blue 700#1447e6 blue 800#193cb8 blue 900#1c398e blue 950#162456
indigo indigo 50#eef2ff P3 indigo 100#e0e7ff P3 indigo 200#c6d2ff P3 indigo 300#a3b3ff P3 indigo 400#7c86ff P3 indigo 500#615fff P3 indigo 600#4f39f6 indigo 700#432dd7 indigo 800#372aac indigo 900#312c85 indigo 950#1e1a4d
violet violet 50#f5f3ff violet 100#ede9fe violet 200#ddd6ff P3 violet 300#c4b4ff P3 violet 400#a684ff P3 violet 500#8e51ff P3 violet 600#7f22fe violet 700#7008e7 violet 800#5d0ec0 violet 900#4d179a violet 950#2f0d68
purple purple 50#faf5ff purple 100#f3e8ff purple 200#e9d4ff P3 purple 300#dab2ff P3 purple 400#c27aff P3 purple 500#ad46ff P3 purple 600#9810fa purple 700#8200db P3 purple 800#6e11b0 purple 900#59168b purple 950#3c0366
fuchsia fuchsia 50#fdf4ff fuchsia 100#fae8ff P3 fuchsia 200#f6cfff P3 fuchsia 300#f4a8ff P3 fuchsia 400#ed6aff P3 fuchsia 500#e12afb fuchsia 600#c800de P3 fuchsia 700#a800b7 P3 fuchsia 800#8a0194 fuchsia 900#721378 fuchsia 950#4b004f
pink pink 50#fdf2f8 pink 100#fce7f3 pink 200#fccee8 pink 300#fda5d5 pink 400#fb64b6 pink 500#f6339a pink 600#e60076 P3 pink 700#c6005c P3 pink 800#a3004c P3 pink 900#861043 pink 950#510424
rose rose 50#fff1f2 rose 100#ffe4e6 P3 rose 200#ffccd3 P3 rose 300#ffa1ad P3 rose 400#ff637e P3 rose 500#ff2056 P3 rose 600#ec003f P3 rose 700#c70036 P3 rose 800#a50036 P3 rose 900#8b0836 rose 950#4d0218
slate slate 50#f8fafc slate 100#f1f5f9 slate 200#e2e8f0 slate 300#cad5e2 slate 400#90a1b9 slate 500#62748e slate 600#45556c slate 700#314158 slate 800#1d293d slate 900#0f172b slate 950#020618
gray gray 50#f9fafb gray 100#f3f4f6 gray 200#e5e7eb gray 300#d1d5dc gray 400#99a1af gray 500#6a7282 gray 600#4a5565 gray 700#364153 gray 800#1e2939 gray 900#101828 gray 950#030712
zinc zinc 50#fafafa zinc 100#f4f4f5 zinc 200#e4e4e7 zinc 300#d4d4d8 zinc 400#9f9fa9 zinc 500#71717b zinc 600#52525c zinc 700#3f3f46 zinc 800#27272a zinc 900#18181b zinc 950#09090b
neutral neutral 50#fafafa neutral 100#f5f5f5 neutral 200#e5e5e5 neutral 300#d4d4d4 neutral 400#a1a1a1 neutral 500#737373 neutral 600#525252 neutral 700#404040 neutral 800#262626 neutral 900#171717 neutral 950#0a0a0a
stone stone 50#fafaf9 stone 100#f5f5f4 stone 200#e7e5e4 stone 300#d6d3d1 stone 400#a6a09b stone 500#79716b stone 600#57534d stone 700#44403b stone 800#292524 stone 900#1c1917 stone 950#0c0a09
mauve mauve 50#fafafa mauve 100#f3f1f3 mauve 200#e7e4e7 mauve 300#d7d0d7 mauve 400#a89ea9 mauve 500#79697b mauve 600#594c5b mauve 700#463947 mauve 800#2a212c mauve 900#1d161e mauve 950#0c090c
olive olive 50#fbfbf9 olive 100#f4f4f0 olive 200#e8e8e3 olive 300#d8d8d0 olive 400#abab9c olive 500#7c7c67 olive 600#5b5b4b olive 700#474739 olive 800#2b2b22 olive 900#1d1d16 olive 950#0c0c09
mist mist 50#f9fbfb mist 100#f1f3f3 mist 200#e3e7e8 mist 300#d0d6d8 mist 400#9ca8ab mist 500#67787c mist 600#4b585b mist 700#394447 mist 800#22292b mist 900#161b1d mist 950#090b0c
taupe taupe 50#fbfaf9 taupe 100#f3f1f1 taupe 200#e8e4e3 taupe 300#d8d2d0 taupe 400#aba09c taupe 500#7c6d67 taupe 600#5b4f4b taupe 700#473c39 taupe 800#2b2422 taupe 900#1d1816 taupe 950#0c0a09
50 100 200 300 400 500 600 700 800 900 950
slate slate 50#f8fafc slate 100#f1f5f9 slate 200#e2e8f0 slate 300#cbd5e1 slate 400#94a3b8 slate 500#64748b slate 600#475569 slate 700#334155 slate 800#1e293b slate 900#0f172a slate 950#020617
gray gray 50#f9fafb gray 100#f3f4f6 gray 200#e5e7eb gray 300#d1d5db gray 400#9ca3af gray 500#6b7280 gray 600#4b5563 gray 700#374151 gray 800#1f2937 gray 900#111827 gray 950#030712
zinc zinc 50#fafafa zinc 100#f4f4f5 zinc 200#e4e4e7 zinc 300#d4d4d8 zinc 400#a1a1aa zinc 500#71717a zinc 600#52525b zinc 700#3f3f46 zinc 800#27272a zinc 900#18181b zinc 950#09090b
neutral neutral 50#fafafa neutral 100#f5f5f5 neutral 200#e5e5e5 neutral 300#d4d4d4 neutral 400#a3a3a3 neutral 500#737373 neutral 600#525252 neutral 700#404040 neutral 800#262626 neutral 900#171717 neutral 950#0a0a0a
stone stone 50#fafaf9 stone 100#f5f5f4 stone 200#e7e5e4 stone 300#d6d3d1 stone 400#a8a29e stone 500#78716c stone 600#57534e stone 700#44403c stone 800#292524 stone 900#1c1917 stone 950#0c0a09
red red 50#fef2f2 red 100#fee2e2 red 200#fecaca red 300#fca5a5 red 400#f87171 red 500#ef4444 red 600#dc2626 red 700#b91c1c red 800#991b1b red 900#7f1d1d red 950#450a0a
orange orange 50#fff7ed orange 100#ffedd5 orange 200#fed7aa orange 300#fdba74 orange 400#fb923c orange 500#f97316 orange 600#ea580c orange 700#c2410c orange 800#9a3412 orange 900#7c2d12 orange 950#431407
amber amber 50#fffbeb amber 100#fef3c7 amber 200#fde68a amber 300#fcd34d amber 400#fbbf24 amber 500#f59e0b amber 600#d97706 amber 700#b45309 amber 800#92400e amber 900#78350f amber 950#451a03
yellow yellow 50#fefce8 yellow 100#fef9c3 yellow 200#fef08a yellow 300#fde047 yellow 400#facc15 yellow 500#eab308 yellow 600#ca8a04 yellow 700#a16207 yellow 800#854d0e yellow 900#713f12 yellow 950#422006
lime lime 50#f7fee7 lime 100#ecfccb lime 200#d9f99d lime 300#bef264 lime 400#a3e635 lime 500#84cc16 lime 600#65a30d lime 700#4d7c0f lime 800#3f6212 lime 900#365314 lime 950#1a2e05
green green 50#f0fdf4 green 100#dcfce7 green 200#bbf7d0 green 300#86efac green 400#4ade80 green 500#22c55e green 600#16a34a green 700#15803d green 800#166534 green 900#14532d green 950#052e16
emerald emerald 50#ecfdf5 emerald 100#d1fae5 emerald 200#a7f3d0 emerald 300#6ee7b7 emerald 400#34d399 emerald 500#10b981 emerald 600#059669 emerald 700#047857 emerald 800#065f46 emerald 900#064e3b emerald 950#022c22
teal teal 50#f0fdfa teal 100#ccfbf1 teal 200#99f6e4 teal 300#5eead4 teal 400#2dd4bf teal 500#14b8a6 teal 600#0d9488 teal 700#0f766e teal 800#115e59 teal 900#134e4a teal 950#042f2e
cyan cyan 50#ecfeff cyan 100#cffafe cyan 200#a5f3fc cyan 300#67e8f9 cyan 400#22d3ee cyan 500#06b6d4 cyan 600#0891b2 cyan 700#0e7490 cyan 800#155e75 cyan 900#164e63 cyan 950#083344
sky sky 50#f0f9ff sky 100#e0f2fe sky 200#bae6fd sky 300#7dd3fc sky 400#38bdf8 sky 500#0ea5e9 sky 600#0284c7 sky 700#0369a1 sky 800#075985 sky 900#0c4a6e sky 950#082f49
blue blue 50#eff6ff blue 100#dbeafe blue 200#bfdbfe blue 300#93c5fd blue 400#60a5fa blue 500#3b82f6 blue 600#2563eb blue 700#1d4ed8 blue 800#1e40af blue 900#1e3a8a blue 950#172554
indigo indigo 50#eef2ff indigo 100#e0e7ff indigo 200#c7d2fe indigo 300#a5b4fc indigo 400#818cf8 indigo 500#6366f1 indigo 600#4f46e5 indigo 700#4338ca indigo 800#3730a3 indigo 900#312e81 indigo 950#1e1b4b
violet violet 50#f5f3ff violet 100#ede9fe violet 200#ddd6fe violet 300#c4b5fd violet 400#a78bfa violet 500#8b5cf6 violet 600#7c3aed violet 700#6d28d9 violet 800#5b21b6 violet 900#4c1d95 violet 950#2e1065
purple purple 50#faf5ff purple 100#f3e8ff purple 200#e9d5ff purple 300#d8b4fe purple 400#c084fc purple 500#a855f7 purple 600#9333ea purple 700#7e22ce purple 800#6b21a8 purple 900#581c87 purple 950#3b0764
fuchsia fuchsia 50#fdf4ff fuchsia 100#fae8ff fuchsia 200#f5d0fe fuchsia 300#f0abfc fuchsia 400#e879f9 fuchsia 500#d946ef fuchsia 600#c026d3 fuchsia 700#a21caf fuchsia 800#86198f fuchsia 900#701a75 fuchsia 950#4a044e
pink pink 50#fdf2f8 pink 100#fce7f3 pink 200#fbcfe8 pink 300#f9a8d4 pink 400#f472b6 pink 500#ec4899 pink 600#db2777 pink 700#be185d pink 800#9d174d pink 900#831843 pink 950#500724
rose rose 50#fff1f2 rose 100#ffe4e6 rose 200#fecdd3 rose 300#fda4af rose 400#fb7185 rose 500#f43f5e rose 600#e11d48 rose 700#be123c rose 800#9f1239 rose 900#881337 rose 950#4c0519
What changed in the Tailwind v4 colors Tailwind CSS v4 defines its colours in OKLCH instead of HEX. OKLCH describes a colour by
lightness, chroma (how colourful it is) and hue, so shades of the same palette step up in lightness more evenly.
OKLCH can also describe colours that a standard sRGB screen cannot show. 95 of the 286 v4
shades are wide-gamut (P3) colours — they look more vivid on newer phones and laptops. A HEX code cannot hold
those colours, so for them the HEX here is the colour clipped to the standard sRGB range — the value most references
list. It is a fallback, not an exact match. These shades are marked P3 .
v4 has 26 palettes; v3 has 22. The palettes only in v4 are: mauve, olive, mist, taupe.
v4 also exposes every colour as a CSS variable, such as var(--color-blue-500).
How to use a Tailwind color Put the palette name and step after a utility: bg-blue-500 for a background, text-blue-700
for text, border-blue-200 for a border. In v4 you can also use the variable in your own CSS:
color: var(--color-blue-700);
Need your own brand colour as a full 50–950 scale? Use the Tailwind shade generator .
Questions Where do these values come from? Straight from the published Tailwind CSS packages: v4 from tailwindcss@4.3.3 (theme.css)
and v3 from tailwindcss@3.4.19 (colors.js). The v4 OKLCH values and v3 HEX values are exactly as
published. The other formats are converted from them.
Why does a v4 colour look slightly different from the same name in v3? The v4 palette was rebuilt in OKLCH, so most shades moved a little. If you are upgrading and need the old look,
copy the v3 values into your theme.
Is the HEX value of a P3 colour wrong? It is a fallback. The OKLCH value is the real colour; a HEX code can only describe sRGB colours, so the HEX is the
OKLCH colour clipped to sRGB. On a wide-gamut screen, use the OKLCH value to get the more vivid version.