Tailwind CSS colors

Use these colors in Tailwind v4

Every shade is already a utility class and a CSS variable, so bg-blue-500, text-slate-700 and var(--color-red-600) work with no setup. To change or add a shade, set the variable inside @theme.

@theme {
  --color-blue-500: oklch(62.3% 0.214 259.815);
}

Why Tailwind v4 moved to OKLCH

Tailwind v4 defines its default palette in OKLCH instead of hex. OKLCH is a perceptual color space: the lightness number means what it says, so blue-500 and green-500 look equally light, and a ramp from 50 to 950 steps evenly instead of lurching.

OKLCH also reaches colors that sRGB hex cannot. On a wide-gamut (Display P3) screen the v4 palette is more vivid than the v3 hex values. Browsers that only support sRGB gamut-map each oklch() color to the nearest hex, which is what the hex column on this page shows, so the hex is a safe fallback and may look a little calmer than oklch() on a P3 display.

Tailwind slate colors

• slate-50 #F8FAFC oklch(98.4% 0.003 247.858)
• slate-100 #F1F5F9 oklch(96.8% 0.007 247.896)
• slate-200 #E2E8F0 oklch(92.9% 0.013 255.508)
• slate-300 #CAD5E2 oklch(86.9% 0.022 252.894)
• slate-400 #90A1B9 oklch(70.4% 0.04 256.788)
• slate-500 #62748E oklch(55.4% 0.046 257.417)
• slate-600 #45556C oklch(44.6% 0.043 257.281)
• slate-700 #314158 oklch(37.2% 0.044 257.287)
• slate-800 #1D293D oklch(27.9% 0.041 260.031)
• slate-900 #0F172B oklch(20.8% 0.042 265.755)
• slate-950 #020618 oklch(12.9% 0.042 264.695)

Tailwind gray colors

• gray-50 #F9FAFB oklch(98.5% 0.002 247.839)
• gray-100 #F3F4F6 oklch(96.7% 0.003 264.542)
• gray-200 #E5E7EB oklch(92.8% 0.006 264.531)
• gray-300 #D1D5DC oklch(87.2% 0.01 258.338)
• gray-400 #99A1AF oklch(70.7% 0.022 261.325)
• gray-500 #6A7282 oklch(55.1% 0.027 264.364)
• gray-600 #4A5565 oklch(44.6% 0.03 256.802)
• gray-700 #364153 oklch(37.3% 0.034 259.733)
• gray-800 #1E2939 oklch(27.8% 0.033 256.848)
• gray-900 #101828 oklch(21% 0.034 264.665)
• gray-950 #030712 oklch(13% 0.028 261.692)

Tailwind zinc colors

• zinc-50 #FAFAFA oklch(98.5% 0 none)
• zinc-100 #F4F4F5 oklch(96.7% 0.001 286.375)
• zinc-200 #E4E4E7 oklch(92% 0.004 286.32)
• zinc-300 #D4D4D8 oklch(87.1% 0.006 286.286)
• zinc-400 #9F9FA9 oklch(70.5% 0.015 286.067)
• zinc-500 #71717B oklch(55.2% 0.016 285.938)
• zinc-600 #52525C oklch(44.2% 0.017 285.786)
• zinc-700 #3F3F46 oklch(37% 0.013 285.805)
• zinc-800 #27272A oklch(27.4% 0.006 286.033)
• zinc-900 #18181B oklch(21% 0.006 285.885)
• zinc-950 #09090B oklch(14.1% 0.005 285.823)

Tailwind neutral colors

• neutral-50 #FAFAFA oklch(98.5% 0 none)
• neutral-100 #F5F5F5 oklch(97% 0 none)
• neutral-200 #E5E5E5 oklch(92.2% 0 none)
• neutral-300 #D4D4D4 oklch(87% 0 none)
• neutral-400 #A1A1A1 oklch(70.8% 0 none)
• neutral-500 #737373 oklch(55.6% 0 none)
• neutral-600 #525252 oklch(43.9% 0 none)
• neutral-700 #404040 oklch(37.1% 0 none)
• neutral-800 #262626 oklch(26.9% 0 none)
• neutral-900 #171717 oklch(20.5% 0 none)
• neutral-950 #0A0A0A oklch(14.5% 0 none)

Tailwind stone colors

• stone-50 #FAFAF9 oklch(98.5% 0.001 106.423)
• stone-100 #F5F5F4 oklch(97% 0.001 106.424)
• stone-200 #E7E5E4 oklch(92.3% 0.003 48.717)
• stone-300 #D6D3D1 oklch(86.9% 0.005 56.366)
• stone-400 #A6A09B oklch(70.9% 0.01 56.259)
• stone-500 #79716B oklch(55.3% 0.013 58.071)
• stone-600 #57534D oklch(44.4% 0.011 73.639)
• stone-700 #44403B oklch(37.4% 0.01 67.558)
• stone-800 #292524 oklch(26.8% 0.007 34.298)
• stone-900 #1C1917 oklch(21.6% 0.006 56.043)
• stone-950 #0C0A09 oklch(14.7% 0.004 49.25)

Tailwind red colors

• red-50 #FEF2F2 oklch(97.1% 0.013 17.38)
• red-100 #FFE2E2 oklch(93.6% 0.032 17.717)
• red-200 #FFC9C9 oklch(88.5% 0.062 18.334)
• red-300 #FFA2A2 oklch(80.8% 0.114 19.571)
• red-400 #FF6467 oklch(70.4% 0.191 22.216)
• red-500 #FB2C36 oklch(63.7% 0.237 25.331)
• red-600 #E7000B oklch(57.7% 0.245 27.325)
• red-700 #C10007 oklch(50.5% 0.213 27.518)
• red-800 #9F0712 oklch(44.4% 0.177 26.899)
• red-900 #82181A oklch(39.6% 0.141 25.723)
• red-950 #460809 oklch(25.8% 0.092 26.042)

Tailwind orange colors

• orange-50 #FFF7ED oklch(98% 0.016 73.684)
• orange-100 #FFEDD4 oklch(95.4% 0.038 75.164)
• orange-200 #FFD6A7 oklch(90.1% 0.076 70.697)
• orange-300 #FFB86A oklch(83.7% 0.128 66.29)
• orange-400 #FF8904 oklch(75% 0.183 55.934)
• orange-500 #FF6900 oklch(70.5% 0.213 47.604)
• orange-600 #F54900 oklch(64.6% 0.222 41.116)
• orange-700 #CA3500 oklch(55.3% 0.195 38.402)
• orange-800 #9F2D00 oklch(47% 0.157 37.304)
• orange-900 #7E2A0C oklch(40.8% 0.123 38.172)
• orange-950 #441306 oklch(26.6% 0.079 36.259)

Tailwind amber colors

• amber-50 #FFFBEB oklch(98.7% 0.022 95.277)
• amber-100 #FEF3C6 oklch(96.2% 0.059 95.617)
• amber-200 #FEE685 oklch(92.4% 0.12 95.746)
• amber-300 #FFD230 oklch(87.9% 0.169 91.605)
• amber-400 #FFBA00 oklch(82.8% 0.189 84.429)
• amber-500 #FD9A00 oklch(76.9% 0.188 70.08)
• amber-600 #E17100 oklch(66.6% 0.179 58.318)
• amber-700 #BB4D00 oklch(55.5% 0.163 48.998)
• amber-800 #973C00 oklch(47.3% 0.137 46.201)
• amber-900 #7B3306 oklch(41.4% 0.112 45.904)
• amber-950 #461901 oklch(27.9% 0.077 45.635)

Tailwind yellow colors

• yellow-50 #FEFCE8 oklch(98.7% 0.026 102.212)
• yellow-100 #FEF9C2 oklch(97.3% 0.071 103.193)
• yellow-200 #FFF085 oklch(94.5% 0.129 101.54)
• yellow-300 #FFDF20 oklch(90.5% 0.182 98.111)
• yellow-400 #FCC800 oklch(85.2% 0.199 91.936)
• yellow-500 #EFB100 oklch(79.5% 0.184 86.047)
• yellow-600 #D08700 oklch(68.1% 0.162 75.834)
• yellow-700 #A65F00 oklch(55.4% 0.135 66.442)
• yellow-800 #894B00 oklch(47.6% 0.114 61.907)
• yellow-900 #733E0A oklch(42.1% 0.095 57.708)
• yellow-950 #432004 oklch(28.6% 0.066 53.813)

Tailwind lime colors

• lime-50 #F7FEE7 oklch(98.6% 0.031 120.757)
• lime-100 #ECFCCA oklch(96.7% 0.067 122.328)
• lime-200 #D8F999 oklch(93.8% 0.127 124.321)
• lime-300 #BBF451 oklch(89.7% 0.196 126.665)
• lime-400 #9AE600 oklch(84.1% 0.238 128.85)
• lime-500 #7CCF00 oklch(76.8% 0.233 130.85)
• lime-600 #5EA500 oklch(64.8% 0.2 131.684)
• lime-700 #497D00 oklch(53.2% 0.157 131.589)
• lime-800 #3C6300 oklch(45.3% 0.124 130.933)
• lime-900 #35530E oklch(40.5% 0.101 131.063)
• lime-950 #192E03 oklch(27.4% 0.072 132.109)

Tailwind green colors

• green-50 #F0FDF4 oklch(98.2% 0.018 155.826)
• green-100 #DCFCE7 oklch(96.2% 0.044 156.743)
• green-200 #B9F8CF oklch(92.5% 0.084 155.995)
• green-300 #7BF1A8 oklch(87.1% 0.15 154.449)
• green-400 #05DF72 oklch(79.2% 0.209 151.711)
• green-500 #00C950 oklch(72.3% 0.219 149.579)
• green-600 #00A63E oklch(62.7% 0.194 149.214)
• green-700 #008236 oklch(52.7% 0.154 150.069)
• green-800 #016630 oklch(44.8% 0.119 151.328)
• green-900 #0D542B oklch(39.3% 0.095 152.535)
• green-950 #032E15 oklch(26.6% 0.065 152.934)

Tailwind emerald colors

• emerald-50 #ECFDF5 oklch(97.9% 0.021 166.113)
• emerald-100 #D0FAE5 oklch(95% 0.052 163.051)
• emerald-200 #A4F4CF oklch(90.5% 0.093 164.15)
• emerald-300 #5EE9B5 oklch(84.5% 0.143 164.978)
• emerald-400 #00D492 oklch(76.5% 0.177 163.223)
• emerald-500 #00BC7D oklch(69.6% 0.17 162.48)
• emerald-600 #009966 oklch(59.6% 0.145 163.225)
• emerald-700 #007A55 oklch(50.8% 0.118 165.612)
• emerald-800 #006045 oklch(43.2% 0.095 166.913)
• emerald-900 #004F3B oklch(37.8% 0.077 168.94)
• emerald-950 #002C22 oklch(26.2% 0.051 172.552)

Tailwind teal colors

• teal-50 #F0FDFA oklch(98.4% 0.014 180.72)
• teal-100 #CBFBF1 oklch(95.3% 0.051 180.801)
• teal-200 #96F7E4 oklch(91% 0.096 180.426)
• teal-300 #46ECD5 oklch(85.5% 0.138 181.071)
• teal-400 #00D5BE oklch(77.7% 0.152 181.912)
• teal-500 #00BBA7 oklch(70.4% 0.14 182.503)
• teal-600 #009689 oklch(60% 0.118 184.704)
• teal-700 #00786F oklch(51.1% 0.096 186.391)
• teal-800 #005F5A oklch(43.7% 0.078 188.216)
• teal-900 #0B4F4A oklch(38.6% 0.063 188.416)
• teal-950 #022F2E oklch(27.7% 0.046 192.524)

Tailwind cyan colors

• cyan-50 #ECFEFF oklch(98.4% 0.019 200.873)
• cyan-100 #CEFAFE oklch(95.6% 0.045 203.388)
• cyan-200 #A2F4FD oklch(91.7% 0.08 205.041)
• cyan-300 #53EAFD oklch(86.5% 0.127 207.078)
• cyan-400 #00D3F2 oklch(78.9% 0.154 211.53)
• cyan-500 #00B8DB oklch(71.5% 0.143 215.221)
• cyan-600 #0092B8 oklch(60.9% 0.126 221.723)
• cyan-700 #007595 oklch(52% 0.105 223.128)
• cyan-800 #005F78 oklch(45% 0.085 224.283)
• cyan-900 #104E64 oklch(39.8% 0.07 227.392)
• cyan-950 #053345 oklch(30.2% 0.056 229.695)

Tailwind sky colors

• sky-50 #F0F9FF oklch(97.7% 0.013 236.62)
• sky-100 #DFF2FE oklch(95.1% 0.026 236.824)
• sky-200 #B8E6FE oklch(90.1% 0.058 230.902)
• sky-300 #74D4FF oklch(82.8% 0.111 230.318)
• sky-400 #00BCFF oklch(74.6% 0.16 232.661)
• sky-500 #00A6F4 oklch(68.5% 0.169 237.323)
• sky-600 #0084D1 oklch(58.8% 0.158 241.966)
• sky-700 #0069A8 oklch(50% 0.134 242.749)
• sky-800 #00598A oklch(44.3% 0.11 240.79)
• sky-900 #024A70 oklch(39.1% 0.09 240.876)
• sky-950 #052F4A oklch(29.3% 0.066 243.157)

Tailwind blue colors

• blue-50 #EFF6FF oklch(97% 0.014 254.604)
• blue-100 #DBEAFE oklch(93.2% 0.032 255.585)
• blue-200 #BEDBFF oklch(88.2% 0.059 254.128)
• blue-300 #8EC5FF oklch(80.9% 0.105 251.813)
• blue-400 #51A2FF oklch(70.7% 0.165 254.624)
• blue-500 #2B7FFF oklch(62.3% 0.214 259.815)
• blue-600 #155DFC oklch(54.6% 0.245 262.881)
• blue-700 #1447E6 oklch(48.8% 0.243 264.376)
• blue-800 #193CB8 oklch(42.4% 0.199 265.638)
• blue-900 #1C398E oklch(37.9% 0.146 265.522)
• blue-950 #162456 oklch(28.2% 0.091 267.935)

Tailwind indigo colors

• indigo-50 #EEF2FF oklch(96.2% 0.018 272.314)
• indigo-100 #E0E7FF oklch(93% 0.034 272.788)
• indigo-200 #C6D2FF oklch(87% 0.065 274.039)
• indigo-300 #A3B3FF oklch(78.5% 0.115 274.713)
• indigo-400 #7C86FF oklch(67.3% 0.182 276.935)
• indigo-500 #615FFF oklch(58.5% 0.233 277.117)
• indigo-600 #4F39F6 oklch(51.1% 0.262 276.966)
• indigo-700 #432DD7 oklch(45.7% 0.24 277.023)
• indigo-800 #372AAC oklch(39.8% 0.195 277.366)
• indigo-900 #312C85 oklch(35.9% 0.144 278.697)
• indigo-950 #1E1A4D oklch(25.7% 0.09 281.288)

Tailwind violet colors

• violet-50 #F5F3FF oklch(96.9% 0.016 293.756)
• violet-100 #EDE9FE oklch(94.3% 0.029 294.588)
• violet-200 #DDD6FF oklch(89.4% 0.057 293.283)
• violet-300 #C4B4FF oklch(81.1% 0.111 293.571)
• violet-400 #A684FF oklch(70.2% 0.183 293.541)
• violet-500 #8E51FF oklch(60.6% 0.25 292.717)
• violet-600 #7F22FE oklch(54.1% 0.281 293.009)
• violet-700 #7008E7 oklch(49.1% 0.27 292.581)
• violet-800 #5D0EC0 oklch(43.2% 0.232 292.759)
• violet-900 #4D179A oklch(38% 0.189 293.745)
• violet-950 #2F0D68 oklch(28.3% 0.141 291.089)

Tailwind purple colors

• purple-50 #FAF5FF oklch(97.7% 0.014 308.299)
• purple-100 #F3E8FF oklch(94.6% 0.033 307.174)
• purple-200 #E9D4FF oklch(90.2% 0.063 306.703)
• purple-300 #DAB2FF oklch(82.7% 0.119 306.383)
• purple-400 #C27AFF oklch(71.4% 0.203 305.504)
• purple-500 #AD46FF oklch(62.7% 0.265 303.9)
• purple-600 #9810FA oklch(55.8% 0.288 302.321)
• purple-700 #8200DB oklch(49.6% 0.265 301.924)
• purple-800 #6E11B0 oklch(43.8% 0.218 303.724)
• purple-900 #59168B oklch(38.1% 0.176 304.987)
• purple-950 #3C0366 oklch(29.1% 0.149 302.717)

Tailwind fuchsia colors

• fuchsia-50 #FDF4FF oklch(97.7% 0.017 320.058)
• fuchsia-100 #FAE8FF oklch(95.2% 0.037 318.852)
• fuchsia-200 #F6CFFF oklch(90.3% 0.076 319.62)
• fuchsia-300 #F4A8FF oklch(83.3% 0.145 321.434)
• fuchsia-400 #ED6AFF oklch(74% 0.238 322.16)
• fuchsia-500 #E12AFB oklch(66.7% 0.295 322.15)
• fuchsia-600 #C800DE oklch(59.1% 0.293 322.896)
• fuchsia-700 #A800B7 oklch(51.8% 0.253 323.949)
• fuchsia-800 #8A0194 oklch(45.2% 0.211 324.591)
• fuchsia-900 #721378 oklch(40.1% 0.17 325.612)
• fuchsia-950 #4B004F oklch(29.3% 0.136 325.661)

Tailwind pink colors

• pink-50 #FDF2F8 oklch(97.1% 0.014 343.198)
• pink-100 #FCE7F3 oklch(94.8% 0.028 342.258)
• pink-200 #FCCEE8 oklch(89.9% 0.061 343.231)
• pink-300 #FDA5D5 oklch(82.3% 0.12 346.018)
• pink-400 #FB64B6 oklch(71.8% 0.202 349.761)
• pink-500 #F6339A oklch(65.6% 0.241 354.308)
• pink-600 #E60076 oklch(59.2% 0.249 0.584)
• pink-700 #C6005C oklch(52.5% 0.223 3.958)
• pink-800 #A3004C oklch(45.9% 0.187 3.815)
• pink-900 #861043 oklch(40.8% 0.153 2.432)
• pink-950 #510424 oklch(28.4% 0.109 3.907)

Tailwind rose colors

• rose-50 #FFF1F2 oklch(96.9% 0.015 12.422)
• rose-100 #FFE4E6 oklch(94.1% 0.03 12.58)
• rose-200 #FFCCD3 oklch(89.2% 0.058 10.001)
• rose-300 #FFA1AD oklch(81% 0.117 11.638)
• rose-400 #FF637E oklch(71.2% 0.194 13.428)
• rose-500 #FF2056 oklch(64.5% 0.246 16.439)
• rose-600 #EC003F oklch(58.6% 0.253 17.585)
• rose-700 #C70036 oklch(51.4% 0.222 16.935)
• rose-800 #A50036 oklch(45.5% 0.188 13.697)
• rose-900 #8B0836 oklch(41% 0.159 10.272)
• rose-950 #4D0218 oklch(27.1% 0.105 12.094)