slate-50
OKLCH(98.4% 0.003 247.858)
--color-slate-50
bg-slate-50
Referência de cores do Tailwind CSS
Pesquise, filtre e copie os 242 tokens de cor do Tailwind - 22 famílias de cores × 11 tons (50-950). Cada token mostra o nome da classe utilitária, o valor HEX e o nome da variável CSS, com cópia em um clique para cada formato. Compatível com Tailwind v3 e v4. Totalmente privado, 100% grátis e sem cadastro.
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
Por que usar nossa referência de cores do Tailwind CSS?
- Busca instantânea de tokens: encontre qualquer token de cor do Tailwind na hora digitando um nome de classe (blue-500), um código HEX (#3B82F6) ou um nome de variável CSS (--color-blue-500). Os resultados são atualizados enquanto você digita, sem atraso.
- Cópia com um clique para cada formato: copie o nome do token, o valor HEX ou o nome da variável CSS de qualquer cartão de cor com um único clique. Sem formatação manual - cole direto na sua configuração do Tailwind, no arquivo CSS ou na ferramenta de design.
- Filtros por família e tom: filtre por família de cores (blue, red, green, etc.) e por tom (50-950) para chegar exatamente aos tokens que você precisa. Combine busca e filtros para consultas precisas durante o desenvolvimento de UI.
- 100% privado - sem uploads: a referência de cores do Tailwind CSS funciona inteiramente no seu navegador. Nenhuma consulta de busca ou dado de cor é enviado a servidores. Rápido, privado e disponível offline depois de carregado.
Casos de uso comuns da referência de cores do Tailwind CSS
- Desenvolvimento front-end: consulte o nome exato do token do Tailwind e o valor HEX enquanto programa. Pare de alternar entre abas do navegador e documentação - a referência de cores do Tailwind CSS mantém todos os tokens a uma busca de distância.
- Tematização de design system: encontre os nomes das variáveis CSS dos design tokens do Tailwind v4 ao criar ou estender um design system. Copie a sintaxe exata das variáveis para o arquivo de configuração do seu tema.
- Seleção de cores de UI: navegue visualmente por toda a paleta do Tailwind para escolher o tom certo para fundos, textos, bordas e destaques. Filtre por família para comparar lado a lado todos os tons de uma mesma cor.
- Apresentações e propostas para clientes: consulte os tokens de cor exatos do Tailwind ao apresentar designs de UI a clientes ou ao escrever especificações técnicas. Copie os valores HEX para usar em documentos de design e guias de estilo.
- Integração com Figma e ferramentas de design: copie os valores HEX da referência de cores do Tailwind CSS e cole diretamente no Figma, Sketch ou Adobe XD para manter seus arquivos de design sincronizados com a implementação em Tailwind.
- Documentação e guias de estilo: consulte os tokens de cor do Tailwind ao escrever documentação de componentes, arquivos README ou guias de estilo internos. A referência de cores do Tailwind CSS fornece nomes e valores precisos para cada tom.
O que é a referência de cores do Tailwind CSS?
A referência de cores do Tailwind CSS é um navegador pesquisável e filtrável de todos os tokens oficiais da paleta do Tailwind - 22 famílias de cores × 11 tons (de 50 a 950) = 242 tokens no total. Cada entrada de token mostra o nome da classe utilitária (por exemplo, blue-500), o valor HEX (por exemplo, #3B82F6) e o nome da variável CSS (por exemplo, --color-blue-500) - todos copiáveis com um clique.
Como usar a referência de cores do Tailwind CSS
- Pesquise: digite um nome de token (blue-500), um código HEX (#3B82F6) ou um nome de variável CSS na caixa de busca. A referência de cores do Tailwind CSS filtra os 242 tokens em tempo real enquanto você digita.
- Filtre: use os menus de família e tom para restringir a uma família de cores específica (por exemplo, todos os tons de blue) ou a um tom específico em todas as famílias (por exemplo, todos os tokens -500).
- Copie: clique no botão Token, HEX ou Var de qualquer cartão de cor para copiar esse valor para a área de transferência. Cole direto na sua configuração do Tailwind, no arquivo CSS ou na ferramenta de design.
Tokens de cor do Tailwind v3 vs v4
- Classes utilitárias do Tailwind v3: use o nome do token diretamente como sufixo de classe utilitária - por exemplo, bg-blue-500, text-blue-500, border-blue-500.
- Variáveis CSS do Tailwind v4: no Tailwind v4, as cores são expostas como propriedades personalizadas de CSS. Use o nome da variável CSS (por exemplo, var(--color-blue-500)) no seu CSS ou nos design tokens.
- Escala de tons: o Tailwind usa uma escala de 11 tons, de 50 (mais claro) a 950 (mais escuro). O tom 500 costuma ser a cor "base" de cada família. Tons abaixo de 500 são mais claros e acima de 500 mais escuros.
- Famílias de cores: as 22 famílias de cores do Tailwind são slate, gray, zinc, neutral, stone (neutras), red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink e rose.
Fonte de dados e precisão
A referência de cores do Tailwind CSS gera os valores dos tokens diretamente do pacote oficial tailwindcss/colors presente nas dependências do seu projeto. Isso significa que os valores HEX exibidos são os valores exatos usados pelo Tailwind CSS - e não aproximações escolhidas manualmente. A referência cobre as 22 famílias principais da paleta e os 11 tons (50-950), totalizando 242 tokens.
Perguntas frequentes
A referência de cores do Tailwind CSS é um navegador pesquisável e filtrável de todos os 242 tokens oficiais da paleta do Tailwind - 22 famílias de cores × 11 tons (50-950). Cada token mostra o nome da classe utilitária, o valor HEX e o nome da variável CSS, todos copiáveis com um clique.
O Tailwind CSS tem 22 famílias de cores principais × 11 tons (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) = 242 tokens no total.
No Tailwind v3, as cores são usadas como sufixos de classes utilitárias (por exemplo, bg-blue-500). No Tailwind v4, as cores também são expostas como propriedades personalizadas de CSS (por exemplo, var(--color-blue-500)). A referência mostra tanto o nome do token quanto o nome da variável CSS de cada cor.
Sim. Digite qualquer valor HEX na caixa de busca e a referência mostrará todos os tokens correspondentes. Você também pode pesquisar por nome de token (blue-500) ou por nome de variável CSS.
O Tailwind usa uma escala de 11 tons, de 50 (mais claro) a 950 (mais escuro). O tom 500 costuma ser a cor base. Tons abaixo de 500 são mais claros e acima de 500 mais escuros.
Sim. Os valores dos tokens são gerados diretamente do pacote oficial tailwindcss/colors - os valores exatos usados pelo Tailwind CSS, e não aproximações escolhidas manualmente.
Sim. Use os menus de família e tom para filtrar por uma família de cores ou um tom específico. Você também pode combinar a busca com o filtro para consultas mais precisas.
Sim, 100% grátis, sem custos ocultos nem limitações. Sem cadastro, sem plano premium, sem limites de uso e sem anúncios.