slate-50
OKLCH(98.4% 0.003 247.858)
--color-slate-50
bg-slate-50
Référence des couleurs Tailwind CSS
Recherchez, filtrez et copiez les 242 jetons de couleur Tailwind - 22 familles de couleurs × 11 nuances (50-950). Chaque jeton affiche le nom de la classe utilitaire, la valeur HEX et le nom de la variable CSS, avec copie en un clic pour chaque format. Compatible avec Tailwind v3 et v4. Entièrement privé, 100 % gratuit et sans inscription.
Tailwind CSS Color Reference
Search and filter official Tailwind palette tokens with HEX values, token names, utility class names, and CSS variable names for fast copy-paste.
Showing 242 of 242 tokens
Tailwind v3 + v4 palette tokens
slate-100
OKLCH(96.8% 0.007 247.896)
--color-slate-100
bg-slate-100
slate-200
OKLCH(92.9% 0.013 255.508)
--color-slate-200
bg-slate-200
slate-300
OKLCH(86.9% 0.022 252.894)
--color-slate-300
bg-slate-300
slate-400
OKLCH(70.4% 0.04 256.788)
--color-slate-400
bg-slate-400
slate-500
OKLCH(55.4% 0.046 257.417)
--color-slate-500
bg-slate-500
slate-600
OKLCH(44.6% 0.043 257.281)
--color-slate-600
bg-slate-600
slate-700
OKLCH(37.2% 0.044 257.287)
--color-slate-700
bg-slate-700
slate-800
OKLCH(27.9% 0.041 260.031)
--color-slate-800
bg-slate-800
slate-900
OKLCH(20.8% 0.042 265.755)
--color-slate-900
bg-slate-900
slate-950
OKLCH(12.9% 0.042 264.695)
--color-slate-950
bg-slate-950
gray-50
OKLCH(98.5% 0.002 247.839)
--color-gray-50
bg-gray-50
gray-100
OKLCH(96.7% 0.003 264.542)
--color-gray-100
bg-gray-100
gray-200
OKLCH(92.8% 0.006 264.531)
--color-gray-200
bg-gray-200
gray-300
OKLCH(87.2% 0.01 258.338)
--color-gray-300
bg-gray-300
gray-400
OKLCH(70.7% 0.022 261.325)
--color-gray-400
bg-gray-400
gray-500
OKLCH(55.1% 0.027 264.364)
--color-gray-500
bg-gray-500
gray-600
OKLCH(44.6% 0.03 256.802)
--color-gray-600
bg-gray-600
gray-700
OKLCH(37.3% 0.034 259.733)
--color-gray-700
bg-gray-700
gray-800
OKLCH(27.8% 0.033 256.848)
--color-gray-800
bg-gray-800
gray-900
OKLCH(21% 0.034 264.665)
--color-gray-900
bg-gray-900
gray-950
OKLCH(13% 0.028 261.692)
--color-gray-950
bg-gray-950
zinc-50
OKLCH(98.5% 0 0)
--color-zinc-50
bg-zinc-50
zinc-100
OKLCH(96.7% 0.001 286.375)
--color-zinc-100
bg-zinc-100
zinc-200
OKLCH(92% 0.004 286.32)
--color-zinc-200
bg-zinc-200
zinc-300
OKLCH(87.1% 0.006 286.286)
--color-zinc-300
bg-zinc-300
zinc-400
OKLCH(70.5% 0.015 286.067)
--color-zinc-400
bg-zinc-400
zinc-500
OKLCH(55.2% 0.016 285.938)
--color-zinc-500
bg-zinc-500
zinc-600
OKLCH(44.2% 0.017 285.786)
--color-zinc-600
bg-zinc-600
zinc-700
OKLCH(37% 0.013 285.805)
--color-zinc-700
bg-zinc-700
zinc-800
OKLCH(27.4% 0.006 286.033)
--color-zinc-800
bg-zinc-800
zinc-900
OKLCH(21% 0.006 285.885)
--color-zinc-900
bg-zinc-900
zinc-950
OKLCH(14.1% 0.005 285.823)
--color-zinc-950
bg-zinc-950
neutral-50
OKLCH(98.5% 0 0)
--color-neutral-50
bg-neutral-50
neutral-100
OKLCH(97% 0 0)
--color-neutral-100
bg-neutral-100
neutral-200
OKLCH(92.2% 0 0)
--color-neutral-200
bg-neutral-200
neutral-300
OKLCH(87% 0 0)
--color-neutral-300
bg-neutral-300
neutral-400
OKLCH(70.8% 0 0)
--color-neutral-400
bg-neutral-400
neutral-500
OKLCH(55.6% 0 0)
--color-neutral-500
bg-neutral-500
neutral-600
OKLCH(43.9% 0 0)
--color-neutral-600
bg-neutral-600
neutral-700
OKLCH(37.1% 0 0)
--color-neutral-700
bg-neutral-700
neutral-800
OKLCH(26.9% 0 0)
--color-neutral-800
bg-neutral-800
neutral-900
OKLCH(20.5% 0 0)
--color-neutral-900
bg-neutral-900
neutral-950
OKLCH(14.5% 0 0)
--color-neutral-950
bg-neutral-950
stone-50
OKLCH(98.5% 0.001 106.423)
--color-stone-50
bg-stone-50
stone-100
OKLCH(97% 0.001 106.424)
--color-stone-100
bg-stone-100
stone-200
OKLCH(92.3% 0.003 48.717)
--color-stone-200
bg-stone-200
stone-300
OKLCH(86.9% 0.005 56.366)
--color-stone-300
bg-stone-300
stone-400
OKLCH(70.9% 0.01 56.259)
--color-stone-400
bg-stone-400
stone-500
OKLCH(55.3% 0.013 58.071)
--color-stone-500
bg-stone-500
stone-600
OKLCH(44.4% 0.011 73.639)
--color-stone-600
bg-stone-600
stone-700
OKLCH(37.4% 0.01 67.558)
--color-stone-700
bg-stone-700
stone-800
OKLCH(26.8% 0.007 34.298)
--color-stone-800
bg-stone-800
stone-900
OKLCH(21.6% 0.006 56.043)
--color-stone-900
bg-stone-900
stone-950
OKLCH(14.7% 0.004 49.25)
--color-stone-950
bg-stone-950
red-50
OKLCH(97.1% 0.013 17.38)
--color-red-50
bg-red-50
red-100
OKLCH(93.6% 0.032 17.717)
--color-red-100
bg-red-100
red-200
OKLCH(88.5% 0.062 18.334)
--color-red-200
bg-red-200
red-300
OKLCH(80.8% 0.114 19.571)
--color-red-300
bg-red-300
red-400
OKLCH(70.4% 0.191 22.216)
--color-red-400
bg-red-400
red-500
OKLCH(63.7% 0.237 25.331)
--color-red-500
bg-red-500
red-600
OKLCH(57.7% 0.245 27.325)
--color-red-600
bg-red-600
red-700
OKLCH(50.5% 0.213 27.518)
--color-red-700
bg-red-700
red-800
OKLCH(44.4% 0.177 26.899)
--color-red-800
bg-red-800
red-900
OKLCH(39.6% 0.141 25.723)
--color-red-900
bg-red-900
red-950
OKLCH(25.8% 0.092 26.042)
--color-red-950
bg-red-950
orange-50
OKLCH(98% 0.016 73.684)
--color-orange-50
bg-orange-50
orange-100
OKLCH(95.4% 0.038 75.164)
--color-orange-100
bg-orange-100
orange-200
OKLCH(90.1% 0.076 70.697)
--color-orange-200
bg-orange-200
orange-300
OKLCH(83.7% 0.128 66.29)
--color-orange-300
bg-orange-300
orange-400
OKLCH(75% 0.183 55.934)
--color-orange-400
bg-orange-400
orange-500
OKLCH(70.5% 0.213 47.604)
--color-orange-500
bg-orange-500
orange-600
OKLCH(64.6% 0.222 41.116)
--color-orange-600
bg-orange-600
orange-700
OKLCH(55.3% 0.195 38.402)
--color-orange-700
bg-orange-700
orange-800
OKLCH(47% 0.157 37.304)
--color-orange-800
bg-orange-800
orange-900
OKLCH(40.8% 0.123 38.172)
--color-orange-900
bg-orange-900
orange-950
OKLCH(26.6% 0.079 36.259)
--color-orange-950
bg-orange-950
amber-50
OKLCH(98.7% 0.022 95.277)
--color-amber-50
bg-amber-50
amber-100
OKLCH(96.2% 0.059 95.617)
--color-amber-100
bg-amber-100
amber-200
OKLCH(92.4% 0.12 95.746)
--color-amber-200
bg-amber-200
amber-300
OKLCH(87.9% 0.169 91.605)
--color-amber-300
bg-amber-300
amber-400
OKLCH(82.8% 0.189 84.429)
--color-amber-400
bg-amber-400
amber-500
OKLCH(76.9% 0.188 70.08)
--color-amber-500
bg-amber-500
amber-600
OKLCH(66.6% 0.179 58.318)
--color-amber-600
bg-amber-600
amber-700
OKLCH(55.5% 0.163 48.998)
--color-amber-700
bg-amber-700
amber-800
OKLCH(47.3% 0.137 46.201)
--color-amber-800
bg-amber-800
amber-900
OKLCH(41.4% 0.112 45.904)
--color-amber-900
bg-amber-900
amber-950
OKLCH(27.9% 0.077 45.635)
--color-amber-950
bg-amber-950
yellow-50
OKLCH(98.7% 0.026 102.212)
--color-yellow-50
bg-yellow-50
yellow-100
OKLCH(97.3% 0.071 103.193)
--color-yellow-100
bg-yellow-100
yellow-200
OKLCH(94.5% 0.129 101.54)
--color-yellow-200
bg-yellow-200
yellow-300
OKLCH(90.5% 0.182 98.111)
--color-yellow-300
bg-yellow-300
yellow-400
OKLCH(85.2% 0.199 91.936)
--color-yellow-400
bg-yellow-400
yellow-500
OKLCH(79.5% 0.184 86.047)
--color-yellow-500
bg-yellow-500
yellow-600
OKLCH(68.1% 0.162 75.834)
--color-yellow-600
bg-yellow-600
yellow-700
OKLCH(55.4% 0.135 66.442)
--color-yellow-700
bg-yellow-700
yellow-800
OKLCH(47.6% 0.114 61.907)
--color-yellow-800
bg-yellow-800
yellow-900
OKLCH(42.1% 0.095 57.708)
--color-yellow-900
bg-yellow-900
yellow-950
OKLCH(28.6% 0.066 53.813)
--color-yellow-950
bg-yellow-950
lime-50
OKLCH(98.6% 0.031 120.757)
--color-lime-50
bg-lime-50
lime-100
OKLCH(96.7% 0.067 122.328)
--color-lime-100
bg-lime-100
lime-200
OKLCH(93.8% 0.127 124.321)
--color-lime-200
bg-lime-200
lime-300
OKLCH(89.7% 0.196 126.665)
--color-lime-300
bg-lime-300
lime-400
OKLCH(84.1% 0.238 128.85)
--color-lime-400
bg-lime-400
lime-500
OKLCH(76.8% 0.233 130.85)
--color-lime-500
bg-lime-500
lime-600
OKLCH(64.8% 0.2 131.684)
--color-lime-600
bg-lime-600
lime-700
OKLCH(53.2% 0.157 131.589)
--color-lime-700
bg-lime-700
lime-800
OKLCH(45.3% 0.124 130.933)
--color-lime-800
bg-lime-800
lime-900
OKLCH(40.5% 0.101 131.063)
--color-lime-900
bg-lime-900
lime-950
OKLCH(27.4% 0.072 132.109)
--color-lime-950
bg-lime-950
green-50
OKLCH(98.2% 0.018 155.826)
--color-green-50
bg-green-50
green-100
OKLCH(96.2% 0.044 156.743)
--color-green-100
bg-green-100
green-200
OKLCH(92.5% 0.084 155.995)
--color-green-200
bg-green-200
green-300
OKLCH(87.1% 0.15 154.449)
--color-green-300
bg-green-300
green-400
OKLCH(79.2% 0.209 151.711)
--color-green-400
bg-green-400
green-500
OKLCH(72.3% 0.219 149.579)
--color-green-500
bg-green-500
green-600
OKLCH(62.7% 0.194 149.214)
--color-green-600
bg-green-600
green-700
OKLCH(52.7% 0.154 150.069)
--color-green-700
bg-green-700
green-800
OKLCH(44.8% 0.119 151.328)
--color-green-800
bg-green-800
green-900
OKLCH(39.3% 0.095 152.535)
--color-green-900
bg-green-900
green-950
OKLCH(26.6% 0.065 152.934)
--color-green-950
bg-green-950
emerald-50
OKLCH(97.9% 0.021 166.113)
--color-emerald-50
bg-emerald-50
emerald-100
OKLCH(95% 0.052 163.051)
--color-emerald-100
bg-emerald-100
emerald-200
OKLCH(90.5% 0.093 164.15)
--color-emerald-200
bg-emerald-200
emerald-300
OKLCH(84.5% 0.143 164.978)
--color-emerald-300
bg-emerald-300
emerald-400
OKLCH(76.5% 0.177 163.223)
--color-emerald-400
bg-emerald-400
emerald-500
OKLCH(69.6% 0.17 162.48)
--color-emerald-500
bg-emerald-500
emerald-600
OKLCH(59.6% 0.145 163.225)
--color-emerald-600
bg-emerald-600
emerald-700
OKLCH(50.8% 0.118 165.612)
--color-emerald-700
bg-emerald-700
emerald-800
OKLCH(43.2% 0.095 166.913)
--color-emerald-800
bg-emerald-800
emerald-900
OKLCH(37.8% 0.077 168.94)
--color-emerald-900
bg-emerald-900
emerald-950
OKLCH(26.2% 0.051 172.552)
--color-emerald-950
bg-emerald-950
teal-50
OKLCH(98.4% 0.014 180.72)
--color-teal-50
bg-teal-50
teal-100
OKLCH(95.3% 0.051 180.801)
--color-teal-100
bg-teal-100
teal-200
OKLCH(91% 0.096 180.426)
--color-teal-200
bg-teal-200
teal-300
OKLCH(85.5% 0.138 181.071)
--color-teal-300
bg-teal-300
teal-400
OKLCH(77.7% 0.152 181.912)
--color-teal-400
bg-teal-400
teal-500
OKLCH(70.4% 0.14 182.503)
--color-teal-500
bg-teal-500
teal-600
OKLCH(60% 0.118 184.704)
--color-teal-600
bg-teal-600
teal-700
OKLCH(51.1% 0.096 186.391)
--color-teal-700
bg-teal-700
teal-800
OKLCH(43.7% 0.078 188.216)
--color-teal-800
bg-teal-800
teal-900
OKLCH(38.6% 0.063 188.416)
--color-teal-900
bg-teal-900
teal-950
OKLCH(27.7% 0.046 192.524)
--color-teal-950
bg-teal-950
cyan-50
OKLCH(98.4% 0.019 200.873)
--color-cyan-50
bg-cyan-50
cyan-100
OKLCH(95.6% 0.045 203.388)
--color-cyan-100
bg-cyan-100
cyan-200
OKLCH(91.7% 0.08 205.041)
--color-cyan-200
bg-cyan-200
cyan-300
OKLCH(86.5% 0.127 207.078)
--color-cyan-300
bg-cyan-300
cyan-400
OKLCH(78.9% 0.154 211.53)
--color-cyan-400
bg-cyan-400
cyan-500
OKLCH(71.5% 0.143 215.221)
--color-cyan-500
bg-cyan-500
cyan-600
OKLCH(60.9% 0.126 221.723)
--color-cyan-600
bg-cyan-600
cyan-700
OKLCH(52% 0.105 223.128)
--color-cyan-700
bg-cyan-700
cyan-800
OKLCH(45% 0.085 224.283)
--color-cyan-800
bg-cyan-800
cyan-900
OKLCH(39.8% 0.07 227.392)
--color-cyan-900
bg-cyan-900
cyan-950
OKLCH(30.2% 0.056 229.695)
--color-cyan-950
bg-cyan-950
sky-50
OKLCH(97.7% 0.013 236.62)
--color-sky-50
bg-sky-50
sky-100
OKLCH(95.1% 0.026 236.824)
--color-sky-100
bg-sky-100
sky-200
OKLCH(90.1% 0.058 230.902)
--color-sky-200
bg-sky-200
sky-300
OKLCH(82.8% 0.111 230.318)
--color-sky-300
bg-sky-300
sky-400
OKLCH(74.6% 0.16 232.661)
--color-sky-400
bg-sky-400
sky-500
OKLCH(68.5% 0.169 237.323)
--color-sky-500
bg-sky-500
sky-600
OKLCH(58.8% 0.158 241.966)
--color-sky-600
bg-sky-600
sky-700
OKLCH(50% 0.134 242.749)
--color-sky-700
bg-sky-700
sky-800
OKLCH(44.3% 0.11 240.79)
--color-sky-800
bg-sky-800
sky-900
OKLCH(39.1% 0.09 240.876)
--color-sky-900
bg-sky-900
sky-950
OKLCH(29.3% 0.066 243.157)
--color-sky-950
bg-sky-950
blue-50
OKLCH(97% 0.014 254.604)
--color-blue-50
bg-blue-50
blue-100
OKLCH(93.2% 0.032 255.585)
--color-blue-100
bg-blue-100
blue-200
OKLCH(88.2% 0.059 254.128)
--color-blue-200
bg-blue-200
blue-300
OKLCH(80.9% 0.105 251.813)
--color-blue-300
bg-blue-300
blue-400
OKLCH(70.7% 0.165 254.624)
--color-blue-400
bg-blue-400
blue-500
OKLCH(62.3% 0.214 259.815)
--color-blue-500
bg-blue-500
blue-600
OKLCH(54.6% 0.245 262.881)
--color-blue-600
bg-blue-600
blue-700
OKLCH(48.8% 0.243 264.376)
--color-blue-700
bg-blue-700
blue-800
OKLCH(42.4% 0.199 265.638)
--color-blue-800
bg-blue-800
blue-900
OKLCH(37.9% 0.146 265.522)
--color-blue-900
bg-blue-900
blue-950
OKLCH(28.2% 0.091 267.935)
--color-blue-950
bg-blue-950
indigo-50
OKLCH(96.2% 0.018 272.314)
--color-indigo-50
bg-indigo-50
indigo-100
OKLCH(93% 0.034 272.788)
--color-indigo-100
bg-indigo-100
indigo-200
OKLCH(87% 0.065 274.039)
--color-indigo-200
bg-indigo-200
indigo-300
OKLCH(78.5% 0.115 274.713)
--color-indigo-300
bg-indigo-300
indigo-400
OKLCH(67.3% 0.182 276.935)
--color-indigo-400
bg-indigo-400
indigo-500
OKLCH(58.5% 0.233 277.117)
--color-indigo-500
bg-indigo-500
indigo-600
OKLCH(51.1% 0.262 276.966)
--color-indigo-600
bg-indigo-600
indigo-700
OKLCH(45.7% 0.24 277.023)
--color-indigo-700
bg-indigo-700
indigo-800
OKLCH(39.8% 0.195 277.366)
--color-indigo-800
bg-indigo-800
indigo-900
OKLCH(35.9% 0.144 278.697)
--color-indigo-900
bg-indigo-900
indigo-950
OKLCH(25.7% 0.09 281.288)
--color-indigo-950
bg-indigo-950
violet-50
OKLCH(96.9% 0.016 293.756)
--color-violet-50
bg-violet-50
violet-100
OKLCH(94.3% 0.029 294.588)
--color-violet-100
bg-violet-100
violet-200
OKLCH(89.4% 0.057 293.283)
--color-violet-200
bg-violet-200
violet-300
OKLCH(81.1% 0.111 293.571)
--color-violet-300
bg-violet-300
violet-400
OKLCH(70.2% 0.183 293.541)
--color-violet-400
bg-violet-400
violet-500
OKLCH(60.6% 0.25 292.717)
--color-violet-500
bg-violet-500
violet-600
OKLCH(54.1% 0.281 293.009)
--color-violet-600
bg-violet-600
violet-700
OKLCH(49.1% 0.27 292.581)
--color-violet-700
bg-violet-700
violet-800
OKLCH(43.2% 0.232 292.759)
--color-violet-800
bg-violet-800
violet-900
OKLCH(38% 0.189 293.745)
--color-violet-900
bg-violet-900
violet-950
OKLCH(28.3% 0.141 291.089)
--color-violet-950
bg-violet-950
purple-50
OKLCH(97.7% 0.014 308.299)
--color-purple-50
bg-purple-50
purple-100
OKLCH(94.6% 0.033 307.174)
--color-purple-100
bg-purple-100
purple-200
OKLCH(90.2% 0.063 306.703)
--color-purple-200
bg-purple-200
purple-300
OKLCH(82.7% 0.119 306.383)
--color-purple-300
bg-purple-300
purple-400
OKLCH(71.4% 0.203 305.504)
--color-purple-400
bg-purple-400
purple-500
OKLCH(62.7% 0.265 303.9)
--color-purple-500
bg-purple-500
purple-600
OKLCH(55.8% 0.288 302.321)
--color-purple-600
bg-purple-600
purple-700
OKLCH(49.6% 0.265 301.924)
--color-purple-700
bg-purple-700
purple-800
OKLCH(43.8% 0.218 303.724)
--color-purple-800
bg-purple-800
purple-900
OKLCH(38.1% 0.176 304.987)
--color-purple-900
bg-purple-900
purple-950
OKLCH(29.1% 0.149 302.717)
--color-purple-950
bg-purple-950
fuchsia-50
OKLCH(97.7% 0.017 320.058)
--color-fuchsia-50
bg-fuchsia-50
fuchsia-100
OKLCH(95.2% 0.037 318.852)
--color-fuchsia-100
bg-fuchsia-100
fuchsia-200
OKLCH(90.3% 0.076 319.62)
--color-fuchsia-200
bg-fuchsia-200
fuchsia-300
OKLCH(83.3% 0.145 321.434)
--color-fuchsia-300
bg-fuchsia-300
fuchsia-400
OKLCH(74% 0.238 322.16)
--color-fuchsia-400
bg-fuchsia-400
fuchsia-500
OKLCH(66.7% 0.295 322.15)
--color-fuchsia-500
bg-fuchsia-500
fuchsia-600
OKLCH(59.1% 0.293 322.896)
--color-fuchsia-600
bg-fuchsia-600
fuchsia-700
OKLCH(51.8% 0.253 323.949)
--color-fuchsia-700
bg-fuchsia-700
fuchsia-800
OKLCH(45.2% 0.211 324.591)
--color-fuchsia-800
bg-fuchsia-800
fuchsia-900
OKLCH(40.1% 0.17 325.612)
--color-fuchsia-900
bg-fuchsia-900
fuchsia-950
OKLCH(29.3% 0.136 325.661)
--color-fuchsia-950
bg-fuchsia-950
pink-50
OKLCH(97.1% 0.014 343.198)
--color-pink-50
bg-pink-50
pink-100
OKLCH(94.8% 0.028 342.258)
--color-pink-100
bg-pink-100
pink-200
OKLCH(89.9% 0.061 343.231)
--color-pink-200
bg-pink-200
pink-300
OKLCH(82.3% 0.12 346.018)
--color-pink-300
bg-pink-300
pink-400
OKLCH(71.8% 0.202 349.761)
--color-pink-400
bg-pink-400
pink-500
OKLCH(65.6% 0.241 354.308)
--color-pink-500
bg-pink-500
pink-600
OKLCH(59.2% 0.249 0.584)
--color-pink-600
bg-pink-600
pink-700
OKLCH(52.5% 0.223 3.958)
--color-pink-700
bg-pink-700
pink-800
OKLCH(45.9% 0.187 3.815)
--color-pink-800
bg-pink-800
pink-900
OKLCH(40.8% 0.153 2.432)
--color-pink-900
bg-pink-900
pink-950
OKLCH(28.4% 0.109 3.907)
--color-pink-950
bg-pink-950
rose-50
OKLCH(96.9% 0.015 12.422)
--color-rose-50
bg-rose-50
rose-100
OKLCH(94.1% 0.03 12.58)
--color-rose-100
bg-rose-100
rose-200
OKLCH(89.2% 0.058 10.001)
--color-rose-200
bg-rose-200
rose-300
OKLCH(81% 0.117 11.638)
--color-rose-300
bg-rose-300
rose-400
OKLCH(71.2% 0.194 13.428)
--color-rose-400
bg-rose-400
rose-500
OKLCH(64.5% 0.246 16.439)
--color-rose-500
bg-rose-500
rose-600
OKLCH(58.6% 0.253 17.585)
--color-rose-600
bg-rose-600
rose-700
OKLCH(51.4% 0.222 16.935)
--color-rose-700
bg-rose-700
rose-800
OKLCH(45.5% 0.188 13.697)
--color-rose-800
bg-rose-800
rose-900
OKLCH(41% 0.159 10.272)
--color-rose-900
bg-rose-900
rose-950
OKLCH(27.1% 0.105 12.094)
--color-rose-950
bg-rose-950
Pourquoi utiliser notre référence des couleurs Tailwind CSS ?
- Recherche instantanée de jetons : trouvez n'importe quel jeton de couleur Tailwind instantanément en saisissant un nom de classe (blue-500), un code HEX (#3B82F6) ou un nom de variable CSS (--color-blue-500). Les résultats se mettent à jour pendant la saisie, sans délai.
- Copie en un clic pour chaque format : copiez le nom du jeton, la valeur HEX ou le nom de la variable CSS de n'importe quelle carte de couleur en un seul clic. Aucun formatage manuel - collez directement dans votre configuration Tailwind, votre fichier CSS ou votre outil de design.
- Filtres par famille et nuance : filtrez par famille de couleurs (blue, red, green, etc.) et par nuance (50-950) pour ne garder que les jetons dont vous avez besoin. Combinez recherche et filtres pour des recherches précises pendant le développement d'interface.
- 100 % privé, sans envoi : la référence des couleurs Tailwind CSS fonctionne entièrement dans votre navigateur. Aucune requête de recherche ni donnée de couleur n'est envoyée à un serveur. Rapide, privé et disponible hors ligne une fois chargé.
Cas d'usage courants de la référence des couleurs Tailwind CSS
- Développement front-end : consultez le nom exact du jeton Tailwind et sa valeur HEX pendant que vous codez. Arrêtez de jongler entre les onglets du navigateur et la documentation - la référence des couleurs Tailwind CSS garde chaque jeton à une recherche de distance.
- Thématisation de design system : trouvez les noms de variables CSS des jetons de design Tailwind v4 lors de la création ou de l'extension d'un design system. Copiez la syntaxe exacte des variables pour votre fichier de configuration de thème.
- Sélection de couleurs d'interface : parcourez visuellement toute la palette Tailwind pour choisir la bonne nuance pour les fonds, textes, bordures et accents. Filtrez par famille pour comparer côte à côte toutes les nuances d'une même couleur.
- Présentations et propositions clients : référencez les jetons de couleur Tailwind exacts lors de présentations de design à des clients ou de rédaction de spécifications techniques. Copiez les valeurs HEX pour les utiliser dans vos documents de design et guides de style.
- Intégration à Figma et aux outils de design : copiez les valeurs HEX depuis la référence des couleurs Tailwind CSS et collez-les directement dans Figma, Sketch ou Adobe XD pour garder vos fichiers de design synchronisés avec votre implémentation Tailwind.
- Documentation et guides de style : référencez les jetons de couleur Tailwind lors de la rédaction de documentation de composants, de fichiers README ou de guides de style internes. La référence des couleurs Tailwind CSS fournit des noms et des valeurs exacts pour chaque nuance.
Qu'est-ce que la référence des couleurs Tailwind CSS ?
La référence des couleurs Tailwind CSS est un navigateur consultable et filtrable de tous les jetons officiels de la palette Tailwind - 22 familles de couleurs × 11 nuances (de 50 à 950) = 242 jetons au total. Chaque entrée de jeton affiche le nom de la classe utilitaire (par exemple blue-500), la valeur HEX (par exemple #3B82F6) et le nom de la variable CSS (par exemple --color-blue-500) - tous copiables en un clic.
Comment utiliser la référence des couleurs Tailwind CSS
- Recherchez : saisissez un nom de jeton (blue-500), un code HEX (#3B82F6) ou un nom de variable CSS dans le champ de recherche. La référence des couleurs Tailwind CSS filtre les 242 jetons en temps réel pendant la saisie.
- Filtrez : utilisez les listes déroulantes famille et nuance pour ne garder qu'une famille de couleurs précise (par exemple toutes les nuances de blue) ou une nuance précise dans toutes les familles (par exemple tous les jetons -500).
- Copiez : cliquez sur le bouton Jeton, HEX ou Var d'une carte de couleur pour copier cette valeur dans votre presse-papiers. Collez directement dans votre configuration Tailwind, votre fichier CSS ou votre outil de design.
Jetons de couleur Tailwind v3 vs v4
- Classes utilitaires Tailwind v3 : utilisez directement le nom du jeton comme suffixe de classe utilitaire - par exemple bg-blue-500, text-blue-500, border-blue-500.
- Variables CSS Tailwind v4 : dans Tailwind v4, les couleurs sont exposées comme propriétés personnalisées CSS. Utilisez le nom de la variable CSS (par exemple var(--color-blue-500)) dans votre CSS ou vos jetons de design.
- Échelle de nuances : Tailwind utilise une échelle de 11 nuances allant de 50 (la plus claire) à 950 (la plus foncée). La nuance 500 est généralement la couleur « de base » de chaque famille. Les nuances inférieures à 500 sont plus claires, celles supérieures à 500 plus foncées.
- Familles de couleurs : les 22 familles de couleurs Tailwind sont slate, gray, zinc, neutral, stone (neutres), red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink et rose.
Source des données et exactitude
La référence des couleurs Tailwind CSS génère les valeurs des jetons directement depuis le paquet officiel tailwindcss/colors présent dans les dépendances de votre projet. Cela signifie que les valeurs HEX affichées sont celles réellement utilisées par Tailwind CSS - et non des approximations sélectionnées manuellement. La référence couvre les 22 familles principales de la palette et les 11 nuances (50-950), soit 242 jetons au total.
Foire aux questions
La référence des couleurs Tailwind CSS est un navigateur consultable et filtrable de tous les 242 jetons officiels de la palette Tailwind - 22 familles de couleurs × 11 nuances (50-950). Chaque jeton affiche le nom de la classe utilitaire, la valeur HEX et le nom de la variable CSS, tous copiables en un clic.
Tailwind CSS compte 22 familles de couleurs principales × 11 nuances (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) = 242 jetons au total.
Dans Tailwind v3, les couleurs s'utilisent comme suffixes de classes utilitaires (par exemple bg-blue-500). Dans Tailwind v4, les couleurs sont aussi exposées comme propriétés personnalisées CSS (par exemple var(--color-blue-500)). La référence affiche à la fois le nom du jeton et le nom de la variable CSS de chaque couleur.
Oui. Saisissez n'importe quelle valeur HEX dans le champ de recherche et la référence affichera tous les jetons correspondants. Vous pouvez aussi rechercher par nom de jeton (blue-500) ou par nom de variable CSS.
Tailwind utilise une échelle de 11 nuances allant de 50 (la plus claire) à 950 (la plus foncée). La nuance 500 est généralement la couleur de base. Les nuances inférieures à 500 sont plus claires, celles supérieures à 500 plus foncées.
Oui. Les valeurs des jetons sont générées directement depuis le paquet officiel tailwindcss/colors - les valeurs exactes utilisées par Tailwind CSS, et non des approximations choisies manuellement.
Oui. Utilisez les listes déroulantes famille et nuance pour filtrer par une famille ou une nuance précise. Vous pouvez aussi combiner la recherche et les filtres pour des recherches plus précises.
Oui, 100 % gratuite, sans coûts cachés ni limitations. Sans inscription, sans offre premium, sans limite d'utilisation et sans publicité.