OKLCH Studio

OKLCH Studio

Tailwind v3 to v4 colors: default palette mapped to OKLCH

Tailwind v4 redefined its default palette in OKLCH: colours are @theme CSS variables such as --color-blue-500: oklch(...), so the hex you get from them differs from Tailwind v3 for many shades. This page lists every token that exists in both palettes, with the v3 hex, the v4 OKLCH value, and how far apart they are.

ΔE-OK is the distance between two colours in OKLab, ×100; around 2 is roughly a just-noticeable difference. We label a token unchanged below 0.5, subtle below 2, and changed above that. The v3 palette is a snapshot of Tailwind 3.4; v4 values are read from the installed tailwindcss theme.

242 tokens compared: 115 unchanged, 73 subtle, 54 changed. Largest shift: fuchsia-600 (ΔE 3.61). 95 v4 values are outside sRGB.

Tailwind v4 colors →Color converters →Contrast fix pages →Tailwind AA data report →shadcn/ui themes in OKLCH →Using OKLCH in CSS →

amber

Tailwind amber: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
amber-50 #fffbeb oklch(0.987 0.022 95.3) · #FFFBEB0.06Unchanged
amber-100 #fef3c7 oklch(0.962 0.059 95.6) · #FEF3C60.10Unchanged
amber-200 #fde68a oklch(0.924 0.120 95.7) · #FEE6850.49Unchanged
amber-300 #fcd34d oklch(0.879 0.169 91.6) · #FFD2301.56Subtle shift
amber-400 #fbbf24 oklch(0.828 0.189 84.4) · #FFB9002.61Changed
amber-500 #f59e0b oklch(0.769 0.188 70.1) · #FE9A002.33Changed
amber-600 #d97706 oklch(0.666 0.179 58.3) · #E171002.16Changed
amber-700 #b45309 oklch(0.555 0.163 49.0) · #BB4D001.75Subtle shift
amber-800 #92400e oklch(0.473 0.137 46.2) · #973C001.23Subtle shift
amber-900 #78350f oklch(0.414 0.112 45.9) · #7B33060.66Subtle shift
amber-950 #451a03 oklch(0.279 0.077 45.6) · #4619010.28Unchanged

blue

Tailwind blue: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
blue-50 #eff6ff oklch(0.970 0.014 254.6) · #EFF6FF0.05Unchanged
blue-100 #dbeafe oklch(0.932 0.032 255.6) · #DBEAFE0.04Unchanged
blue-200 #bfdbfe oklch(0.882 0.059 254.1) · #BEDBFF0.20Unchanged
blue-300 #93c5fd oklch(0.809 0.105 251.8) · #8EC5FF0.94Subtle shift
blue-400 #60a5fa oklch(0.707 0.165 254.6) · #51A2FF2.26Changed
blue-500 #3b82f6 oklch(0.623 0.214 259.8) · #2B7FFF2.60Changed
blue-600 #2563eb oklch(0.546 0.245 262.9) · #155DFC2.98Changed
blue-700 #1d4ed8 oklch(0.488 0.243 264.4) · #1447E62.58Changed
blue-800 #1e40af oklch(0.424 0.199 265.6) · #193CB81.81Subtle shift
blue-900 #1e3a8a oklch(0.379 0.146 265.5) · #1C398E0.82Subtle shift
blue-950 #172554 oklch(0.282 0.091 267.9) · #1624560.36Unchanged

cyan

Tailwind cyan: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
cyan-50 #ecfeff oklch(0.984 0.019 200.9) · #ECFEFF0.02Unchanged
cyan-100 #cffafe oklch(0.956 0.045 203.4) · #CEFAFE0.07Unchanged
cyan-200 #a5f3fc oklch(0.917 0.080 205.0) · #A2F4FD0.28Unchanged
cyan-300 #67e8f9 oklch(0.865 0.127 207.1) · #53EAFD1.17Subtle shift
cyan-400 #22d3ee oklch(0.789 0.154 211.5) · #00D3F22.17Changed
cyan-500 #06b6d4 oklch(0.715 0.143 215.2) · #00B8DB1.73Subtle shift
cyan-600 #0891b2 oklch(0.609 0.126 221.7) · #0092B81.51Subtle shift
cyan-700 #0e7490 oklch(0.520 0.105 223.1) · #0075951.14Subtle shift
cyan-800 #155e75 oklch(0.450 0.085 224.3) · #005F780.79Subtle shift
cyan-900 #164e63 oklch(0.398 0.070 227.4) · #104E640.36Unchanged
cyan-950 #083344 oklch(0.302 0.056 229.7) · #0533450.19Unchanged

emerald

Tailwind emerald: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
emerald-50 #ecfdf5 oklch(0.979 0.021 166.1) · #ECFDF50.05Unchanged
emerald-100 #d1fae5 oklch(0.950 0.052 163.1) · #D0FAE50.13Unchanged
emerald-200 #a7f3d0 oklch(0.905 0.093 164.2) · #A4F4CF0.35Unchanged
emerald-300 #6ee7b7 oklch(0.845 0.143 165.0) · #5EE9B51.31Subtle shift
emerald-400 #34d399 oklch(0.765 0.177 163.2) · #00D4922.48Changed
emerald-500 #10b981 oklch(0.696 0.170 162.5) · #00BC7D2.09Changed
emerald-600 #059669 oklch(0.596 0.145 163.2) · #0099661.76Subtle shift
emerald-700 #047857 oklch(0.508 0.118 165.6) · #007A551.31Subtle shift
emerald-800 #065f46 oklch(0.432 0.095 166.9) · #0060450.85Subtle shift
emerald-900 #064e3b oklch(0.378 0.077 168.9) · #004F3B0.40Unchanged
emerald-950 #022c22 oklch(0.262 0.051 172.6) · #002C220.23Unchanged

fuchsia

Tailwind fuchsia: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
fuchsia-50 #fdf4ff oklch(0.977 0.017 320.1) · #FDF4FF0.04Unchanged
fuchsia-100 #fae8ff oklch(0.952 0.037 318.9) · #FAE8FF0.10Unchanged
fuchsia-200 #f5d0fe oklch(0.903 0.076 319.6) · #F6CFFF0.28Unchanged
fuchsia-300 #f0abfc oklch(0.833 0.145 321.4) · #F4A8FF1.28Subtle shift
fuchsia-400 #e879f9 oklch(0.740 0.238 322.2) · #ED6AFF3.20Changed
fuchsia-500 #d946ef oklch(0.667 0.295 322.1) · #E12AFB3.59Changed
fuchsia-600 #c026d3 oklch(0.591 0.293 322.9) · #C800DE3.61Changed
fuchsia-700 #a21caf oklch(0.518 0.253 323.9) · #A800B72.72Changed
fuchsia-800 #86198f oklch(0.452 0.211 324.6) · #8A01941.88Subtle shift
fuchsia-900 #701a75 oklch(0.401 0.170 325.6) · #7213780.99Subtle shift
fuchsia-950 #4a044e oklch(0.293 0.136 325.7) · #4B004F0.51Subtle shift

gray

Tailwind gray: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
gray-50 #f9fafb oklch(0.985 0.002 247.8) · #F9FAFB0.05Unchanged
gray-100 #f3f4f6 oklch(0.967 0.003 264.5) · #F3F4F60.01Unchanged
gray-200 #e5e7eb oklch(0.928 0.006 264.5) · #E5E7EB0.05Unchanged
gray-300 #d1d5db oklch(0.872 0.010 258.3) · #D1D5DC0.07Unchanged
gray-400 #9ca3af oklch(0.707 0.022 261.3) · #99A1AF0.72Subtle shift
gray-500 #6b7280 oklch(0.551 0.027 264.4) · #6A72820.36Unchanged
gray-600 #4b5563 oklch(0.446 0.030 256.8) · #4A55650.37Unchanged
gray-700 #374151 oklch(0.373 0.034 259.7) · #3641530.34Unchanged
gray-800 #1f2937 oklch(0.278 0.033 256.8) · #1E29390.34Unchanged
gray-900 #111827 oklch(0.210 0.034 264.7) · #1018280.22Unchanged
gray-950 #030712 oklch(0.130 0.028 261.7) · #0307120.07Unchanged

green

Tailwind green: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
green-50 #f0fdf4 oklch(0.982 0.018 155.8) · #F0FDF40.01Unchanged
green-100 #dcfce7 oklch(0.962 0.044 156.7) · #DCFCE70.07Unchanged
green-200 #bbf7d0 oklch(0.925 0.084 156.0) · #B9F8CF0.34Unchanged
green-300 #86efac oklch(0.871 0.150 154.4) · #7BF1A81.37Subtle shift
green-400 #4ade80 oklch(0.792 0.209 151.7) · #05DF722.82Changed
green-500 #22c55e oklch(0.723 0.219 149.6) · #00C9502.70Changed
green-600 #16a34a oklch(0.627 0.194 149.2) · #00A63E2.41Changed
green-700 #15803d oklch(0.527 0.154 150.1) · #0082361.69Subtle shift
green-800 #166534 oklch(0.448 0.119 151.3) · #0166301.07Subtle shift
green-900 #14532d oklch(0.393 0.095 152.5) · #0D542B0.54Subtle shift
green-950 #052e16 oklch(0.266 0.065 152.9) · #032E150.22Unchanged

indigo

Tailwind indigo: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
indigo-50 #eef2ff oklch(0.962 0.018 272.3) · #EEF2FF0.01Unchanged
indigo-100 #e0e7ff oklch(0.930 0.034 272.8) · #E0E7FF0.06Unchanged
indigo-200 #c7d2fe oklch(0.870 0.065 274.0) · #C6D2FF0.28Unchanged
indigo-300 #a5b4fc oklch(0.785 0.115 274.7) · #A3B3FF1.09Subtle shift
indigo-400 #818cf8 oklch(0.673 0.182 276.9) · #7C86FF2.47Changed
indigo-500 #6366f1 oklch(0.585 0.233 277.1) · #615FFF2.89Changed
indigo-600 #4f46e5 oklch(0.511 0.262 277.0) · #4F39F63.19Changed
indigo-700 #4338ca oklch(0.457 0.240 277.0) · #432DD72.54Changed
indigo-800 #3730a3 oklch(0.398 0.195 277.4) · #372AAC1.77Subtle shift
indigo-900 #312e81 oklch(0.359 0.144 278.7) · #312C850.86Subtle shift
indigo-950 #1e1b4b oklch(0.257 0.090 281.3) · #1E1A4D0.39Unchanged

lime

Tailwind lime: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
lime-50 #f7fee7 oklch(0.986 0.031 120.8) · #F7FEE70.03Unchanged
lime-100 #ecfccb oklch(0.967 0.067 122.3) · #ECFCCA0.11Unchanged
lime-200 #d9f99d oklch(0.938 0.127 124.3) · #D8F9990.53Subtle shift
lime-300 #bef264 oklch(0.897 0.196 126.7) · #BBF4511.74Subtle shift
lime-400 #a3e635 oklch(0.841 0.238 128.8) · #9AE6003.18Changed
lime-500 #84cc16 oklch(0.768 0.233 130.8) · #7CCF002.86Changed
lime-600 #65a30d oklch(0.648 0.200 131.7) · #5EA5002.46Changed
lime-700 #4d7c0f oklch(0.532 0.157 131.6) · #497D001.65Subtle shift
lime-800 #3f6212 oklch(0.453 0.124 130.9) · #3C63001.11Subtle shift
lime-900 #365314 oklch(0.405 0.101 131.1) · #35530E0.54Subtle shift
lime-950 #1a2e05 oklch(0.274 0.072 132.1) · #192E030.32Unchanged

neutral

Tailwind neutral: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
neutral-50 #fafafa oklch(0.985 0.000 0.0) · #FAFAFA0.01Unchanged
neutral-100 #f5f5f5 oklch(0.970 0.000 0.0) · #F5F5F50.02Unchanged
neutral-200 #e5e5e5 oklch(0.922 0.000 0.0) · #E5E5E50.01Unchanged
neutral-300 #d4d4d4 oklch(0.870 0.000 0.0) · #D4D4D40.01Unchanged
neutral-400 #a3a3a3 oklch(0.708 0.000 0.0) · #A1A1A10.75Subtle shift
neutral-500 #737373 oklch(0.556 0.000 0.0) · #7373730.05Unchanged
neutral-600 #525252 oklch(0.439 0.000 0.0) · #5252520.04Unchanged
neutral-700 #404040 oklch(0.371 0.000 0.0) · #4040400.05Unchanged
neutral-800 #262626 oklch(0.269 0.000 0.0) · #2626260.04Unchanged
neutral-900 #171717 oklch(0.205 0.000 0.0) · #1717170.04Unchanged
neutral-950 #0a0a0a oklch(0.145 0.000 0.0) · #0A0A0A0.02Unchanged

orange

Tailwind orange: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
orange-50 #fff7ed oklch(0.980 0.016 73.7) · #FFF7ED0.04Unchanged
orange-100 #ffedd5 oklch(0.954 0.038 75.2) · #FFEDD40.09Unchanged
orange-200 #fed7aa oklch(0.901 0.076 70.7) · #FFD6A70.31Unchanged
orange-300 #fdba74 oklch(0.837 0.128 66.3) · #FFB86A1.15Subtle shift
orange-400 #fb923c oklch(0.750 0.183 55.9) · #FF89042.52Changed
orange-500 #f97316 oklch(0.705 0.213 47.6) · #FF69002.63Changed
orange-600 #ea580c oklch(0.646 0.222 41.1) · #F549002.77Changed
orange-700 #c2410c oklch(0.553 0.195 38.4) · #CA35002.11Changed
orange-800 #9a3412 oklch(0.470 0.157 37.3) · #9F2D001.40Subtle shift
orange-900 #7c2d12 oklch(0.408 0.123 38.2) · #7E2A0C0.65Subtle shift
orange-950 #431407 oklch(0.266 0.079 36.3) · #4413060.28Unchanged

pink

Tailwind pink: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
pink-50 #fdf2f8 oklch(0.971 0.014 343.2) · #FDF2F80.04Unchanged
pink-100 #fce7f3 oklch(0.948 0.028 342.3) · #FCE7F30.04Unchanged
pink-200 #fbcfe8 oklch(0.899 0.061 343.2) · #FCCEE80.22Unchanged
pink-300 #f9a8d4 oklch(0.823 0.120 346.0) · #FDA5D51.05Subtle shift
pink-400 #f472b6 oklch(0.718 0.202 349.8) · #FB64B62.77Changed
pink-500 #ec4899 oklch(0.656 0.241 354.3) · #F6339A2.92Changed
pink-600 #db2777 oklch(0.592 0.249 0.6) · #E600763.10Changed
pink-700 #be185d oklch(0.525 0.223 4.0) · #C6005C2.41Changed
pink-800 #9d174d oklch(0.459 0.187 3.8) · #A3004C1.73Subtle shift
pink-900 #831843 oklch(0.408 0.153 2.4) · #8610430.88Subtle shift
pink-950 #500724 oklch(0.284 0.109 3.9) · #5104240.42Unchanged

purple

Tailwind purple: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
purple-50 #faf5ff oklch(0.977 0.014 308.3) · #FAF5FF0.03Unchanged
purple-100 #f3e8ff oklch(0.946 0.033 307.2) · #F3E8FF0.05Unchanged
purple-200 #e9d5ff oklch(0.902 0.063 306.7) · #E9D4FF0.26Unchanged
purple-300 #d8b4fe oklch(0.827 0.119 306.4) · #DAB2FF1.08Subtle shift
purple-400 #c084fc oklch(0.714 0.203 305.5) · #C27AFF2.74Changed
purple-500 #a855f7 oklch(0.627 0.265 303.9) · #AD46FF3.25Changed
purple-600 #9333ea oklch(0.558 0.288 302.3) · #9810FA3.55Changed
purple-700 #7e22ce oklch(0.496 0.265 301.9) · #8200DB2.81Changed
purple-800 #6b21a8 oklch(0.438 0.218 303.7) · #6E11B01.97Subtle shift
purple-900 #581c87 oklch(0.381 0.176 305.0) · #59168B0.99Subtle shift
purple-950 #3b0764 oklch(0.291 0.149 302.7) · #3C03660.58Subtle shift

red

Tailwind red: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
red-50 #fef2f2 oklch(0.971 0.013 17.4) · #FEF2F20.05Unchanged
red-100 #fee2e2 oklch(0.936 0.032 17.7) · #FFE2E20.12Unchanged
red-200 #fecaca oklch(0.885 0.062 18.3) · #FFC9C90.28Unchanged
red-300 #fca5a5 oklch(0.808 0.114 19.6) · #FFA2A21.05Subtle shift
red-400 #f87171 oklch(0.704 0.191 22.2) · #FF64672.57Changed
red-500 #ef4444 oklch(0.637 0.237 25.3) · #FB2C362.92Changed
red-600 #dc2626 oklch(0.577 0.245 27.3) · #E7000B2.98Changed
red-700 #b91c1c oklch(0.505 0.213 27.5) · #C100072.25Changed
red-800 #991b1b oklch(0.444 0.177 26.9) · #9F07121.57Subtle shift
red-900 #7f1d1d oklch(0.396 0.141 25.7) · #82181A0.79Subtle shift
red-950 #450a0a oklch(0.258 0.092 26.0) · #4608090.35Unchanged

rose

Tailwind rose: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
rose-50 #fff1f2 oklch(0.969 0.015 12.4) · #FFF1F20.04Unchanged
rose-100 #ffe4e6 oklch(0.941 0.030 12.6) · #FFE4E60.04Unchanged
rose-200 #fecdd3 oklch(0.892 0.058 10.0) · #FFCCD30.21Unchanged
rose-300 #fda4af oklch(0.810 0.117 11.6) · #FFA1AD1.09Subtle shift
rose-400 #fb7185 oklch(0.712 0.194 13.4) · #FF637E2.60Changed
rose-500 #f43f5e oklch(0.645 0.246 16.4) · #FF20563.06Changed
rose-600 #e11d48 oklch(0.586 0.253 17.6) · #EC003F3.10Changed
rose-700 #be123c oklch(0.514 0.222 16.9) · #C700362.42Changed
rose-800 #9f1239 oklch(0.455 0.188 13.7) · #A500361.67Subtle shift
rose-900 #881337 oklch(0.410 0.159 10.3) · #8B08360.88Subtle shift
rose-950 #4c0519 oklch(0.271 0.105 12.1) · #4D02180.41Unchanged

sky

Tailwind sky: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
sky-50 #f0f9ff oklch(0.977 0.013 236.6) · #F0F9FF0.05Unchanged
sky-100 #e0f2fe oklch(0.951 0.026 236.8) · #DFF2FE0.11Unchanged
sky-200 #bae6fd oklch(0.901 0.058 230.9) · #B8E6FE0.25Unchanged
sky-300 #7dd3fc oklch(0.828 0.111 230.3) · #74D4FF0.97Subtle shift
sky-400 #38bdf8 oklch(0.746 0.160 232.7) · #00BCFF2.23Changed
sky-500 #0ea5e9 oklch(0.685 0.169 237.3) · #00A6F42.11Changed
sky-600 #0284c7 oklch(0.588 0.158 242.0) · #0084D11.91Subtle shift
sky-700 #0369a1 oklch(0.500 0.134 242.7) · #0069A81.47Subtle shift
sky-800 #075985 oklch(0.443 0.110 240.8) · #00598A1.00Subtle shift
sky-900 #0c4a6e oklch(0.391 0.090 240.9) · #024A700.55Subtle shift
sky-950 #082f49 oklch(0.293 0.066 243.2) · #052F4A0.28Unchanged

slate

Tailwind slate: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
slate-50 #f8fafc oklch(0.984 0.003 247.9) · #F8FAFC0.04Unchanged
slate-100 #f1f5f9 oklch(0.968 0.007 247.9) · #F1F5F90.03Unchanged
slate-200 #e2e8f0 oklch(0.929 0.013 255.5) · #E2E8F00.04Unchanged
slate-300 #cbd5e1 oklch(0.869 0.022 252.9) · #CAD5E20.22Unchanged
slate-400 #94a3b8 oklch(0.704 0.040 256.8) · #90A1B90.83Subtle shift
slate-500 #64748b oklch(0.554 0.046 257.4) · #62748E0.53Subtle shift
slate-600 #475569 oklch(0.446 0.043 257.3) · #45556C0.56Subtle shift
slate-700 #334155 oklch(0.372 0.044 257.3) · #3141580.49Unchanged
slate-800 #1e293b oklch(0.279 0.041 260.0) · #1D293D0.42Unchanged
slate-900 #0f172a oklch(0.208 0.042 265.8) · #0F172B0.22Unchanged
slate-950 #020617 oklch(0.129 0.042 264.7) · #0206180.14Unchanged

stone

Tailwind stone: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
stone-50 #fafaf9 oklch(0.985 0.001 106.4) · #FAFAF90.04Unchanged
stone-100 #f5f5f4 oklch(0.970 0.001 106.4) · #F5F5F40.03Unchanged
stone-200 #e7e5e4 oklch(0.923 0.003 48.7) · #E7E5E40.05Unchanged
stone-300 #d6d3d1 oklch(0.869 0.005 56.4) · #D6D3D10.08Unchanged
stone-400 #a8a29e oklch(0.709 0.010 56.3) · #A6A09B0.71Subtle shift
stone-500 #78716c oklch(0.553 0.013 58.1) · #79716B0.14Unchanged
stone-600 #57534e oklch(0.444 0.011 73.6) · #57534D0.15Unchanged
stone-700 #44403c oklch(0.374 0.010 67.6) · #44403B0.13Unchanged
stone-800 #292524 oklch(0.268 0.007 34.3) · #2925240.09Unchanged
stone-900 #1c1917 oklch(0.216 0.006 56.0) · #1C19170.02Unchanged
stone-950 #0c0a09 oklch(0.147 0.004 49.3) · #0C0A090.02Unchanged

teal

Tailwind teal: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
teal-50 #f0fdfa oklch(0.984 0.014 180.7) · #F0FDFA0.05Unchanged
teal-100 #ccfbf1 oklch(0.953 0.051 180.8) · #CBFBF10.13Unchanged
teal-200 #99f6e4 oklch(0.910 0.096 180.4) · #96F7E40.33Unchanged
teal-300 #5eead4 oklch(0.855 0.138 181.1) · #46ECD51.29Subtle shift
teal-400 #2dd4bf oklch(0.777 0.152 181.9) · #00D5BE2.09Changed
teal-500 #14b8a6 oklch(0.704 0.140 182.5) · #00BBA71.70Subtle shift
teal-600 #0d9488 oklch(0.600 0.118 184.7) · #0096891.42Subtle shift
teal-700 #0f766e oklch(0.511 0.096 186.4) · #00786F0.99Subtle shift
teal-800 #115e59 oklch(0.437 0.078 188.2) · #005F5A0.75Subtle shift
teal-900 #134e4a oklch(0.386 0.063 188.4) · #0B4F4A0.40Unchanged
teal-950 #042f2e oklch(0.277 0.046 192.5) · #022F2E0.14Unchanged

violet

Tailwind violet: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
violet-50 #f5f3ff oklch(0.969 0.016 293.8) · #F5F3FF0.02Unchanged
violet-100 #ede9fe oklch(0.943 0.029 294.6) · #EDE9FE0.07Unchanged
violet-200 #ddd6fe oklch(0.894 0.057 293.3) · #DDD6FF0.21Unchanged
violet-300 #c4b5fd oklch(0.811 0.111 293.6) · #C4B4FF0.97Subtle shift
violet-400 #a78bfa oklch(0.702 0.183 293.5) · #A684FF2.48Changed
violet-500 #8b5cf6 oklch(0.606 0.250 292.7) · #8E51FF3.11Changed
violet-600 #7c3aed oklch(0.541 0.281 293.0) · #7F22FE3.44Changed
violet-700 #6d28d9 oklch(0.491 0.270 292.6) · #7008E72.88Changed
violet-800 #5b21b6 oklch(0.432 0.232 292.8) · #5D0EC02.14Changed
violet-900 #4c1d95 oklch(0.380 0.189 293.7) · #4D179A1.07Subtle shift
violet-950 #2e1065 oklch(0.283 0.141 291.1) · #2F0D680.59Subtle shift

yellow

Tailwind yellow: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
yellow-50 #fefce8 oklch(0.987 0.026 102.2) · #FEFCE80.04Unchanged
yellow-100 #fef9c3 oklch(0.973 0.071 103.2) · #FEF9C20.17Unchanged
yellow-200 #fef08a oklch(0.945 0.129 101.5) · #FFF0850.47Unchanged
yellow-300 #fde047 oklch(0.905 0.182 98.1) · #FFDF201.63Subtle shift
yellow-400 #facc15 oklch(0.852 0.199 91.9) · #FDC7002.73Changed
yellow-500 #eab308 oklch(0.795 0.184 86.0) · #F0B1002.23Changed
yellow-600 #ca8a04 oklch(0.681 0.162 75.8) · #D087001.97Subtle shift
yellow-700 #a16207 oklch(0.554 0.135 66.4) · #A65F001.43Subtle shift
yellow-800 #854d0e oklch(0.476 0.114 61.9) · #894B001.06Subtle shift
yellow-900 #713f12 oklch(0.421 0.095 57.7) · #733E0A0.53Subtle shift
yellow-950 #422006 oklch(0.286 0.066 53.8) · #4320040.21Unchanged

zinc

Tailwind zinc: v3 hex versus v4 OKLCH
Tokenv3v4ΔEStatus
zinc-50 #fafafa oklch(0.985 0.000 0.0) · #FAFAFA0.01Unchanged
zinc-100 #f4f4f5 oklch(0.967 0.001 286.4) · #F4F4F50.05Unchanged
zinc-200 #e4e4e7 oklch(0.920 0.004 286.3) · #E4E4E70.03Unchanged
zinc-300 #d4d4d8 oklch(0.871 0.006 286.3) · #D4D4D80.06Unchanged
zinc-400 #a1a1aa oklch(0.705 0.015 286.1) · #9F9FA90.71Subtle shift
zinc-500 #71717a oklch(0.552 0.016 285.9) · #71717B0.22Unchanged
zinc-600 #52525b oklch(0.442 0.017 285.8) · #52525C0.24Unchanged
zinc-700 #3f3f46 oklch(0.370 0.013 285.8) · #3F3F460.12Unchanged
zinc-800 #27272a oklch(0.274 0.006 286.0) · #27272A0.05Unchanged
zinc-900 #18181b oklch(0.210 0.006 285.9) · #18181B0.04Unchanged
zinc-950 #09090b oklch(0.141 0.005 285.8) · #09090B0.07Unchanged

FAQ

Why did Tailwind v4 change its colors?
Tailwind v4 defines the default palette as OKLCH values in @theme CSS variables (for example --color-blue-500: oklch(...)) instead of fixed hex codes. Converting to hex gives slightly different results from v3 for many shades, mostly higher chroma on saturated colours. Greys and many light tints are close to unchanged.
Can I keep my v3 hex colors in v4?
Yes. Override the variable in your CSS, for example @theme { --color-blue-500: #3b82f6; }. Every token page on this site includes that snippet with the exact v3 hex.
What does ΔE mean here?
ΔE-OK is the straight-line distance between two colours in the OKLab space, multiplied by 100. Around 2 is roughly a just-noticeable difference side by side. Here tokens under 0.5 are labelled unchanged, under 2 subtle, and anything higher changed.
Are v4 colors outside sRGB?
Some are. 95 of 242 mapped v4 OKLCH values fall outside the sRGB gamut; on sRGB displays the browser maps them in, and the hex shown here is a clipped sRGB approximation. On wide-gamut displays they can render more vivid than the hex.

Related

OKLCH Studio is a free OKLCH contrast checker with auto-fix and colour converters. Looking for pairs, names or brand palettes? See the separate Colorise Pro workspace.

← Tailwind v4 colors