slate-50
OKLCH(98.4% 0.003 247.858)
--color-slate-50
bg-slate-50
Справочник цветов Tailwind CSS
Ищите, фильтруйте и копируйте все 242 токена цвета Tailwind — 22 цветовых семейства × 11 оттенков (50–950). Каждый токен показывает название utility-класса, значение HEX и имя CSS-переменной с копированием в один клик для каждого формата. Поддерживаются Tailwind v3 и v4. Полностью приватно, на 100 % бесплатно и без регистрации.
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
Зачем использовать наш справочник цветов Tailwind CSS?
- Мгновенный поиск токенов: находите любой токен цвета Tailwind сразу, вводя название класса (blue-500), код HEX (#3B82F6) или имя CSS-переменной (--color-blue-500). Результаты обновляются во время ввода без задержки.
- Копирование в один клик для каждого формата: копируйте имя токена, значение HEX или имя CSS-переменной с любой карточки цвета одним нажатием. Без ручного форматирования — вставляйте сразу в конфигурацию Tailwind, CSS-файл или графический редактор.
- Фильтры по семейству и оттенку: фильтруйте по цветовому семейству (blue, red, green и т. д.) и оттенку (50–950), чтобы получить именно нужные токены. Сочетайте поиск и фильтры для точных выборок во время разработки интерфейса.
- 100 % приватно — без загрузок: справочник цветов Tailwind CSS работает полностью в браузере. Никакие поисковые запросы или данные о цветах не отправляются на серверы. Быстро, приватно и доступно офлайн после загрузки.
Типичные сценарии использования справочника цветов Tailwind CSS
- Фронтенд-разработка: смотрите точное имя токена Tailwind и значение HEX прямо во время написания кода. Хватит переключаться между вкладками браузера и документацией — справочник цветов Tailwind CSS держит каждый токен на расстоянии одного поиска.
- Темизация дизайн-систем: находите имена CSS-переменных для design-токенов Tailwind v4 при создании или расширении дизайн-системы. Копируйте точный синтаксис переменных для файла конфигурации темы.
- Выбор цветов интерфейса: просматривайте всю палитру Tailwind визуально, чтобы подобрать подходящий оттенок для фонов, текста, рамок и акцентов. Фильтруйте по семейству, чтобы сравнить все оттенки одного цвета рядом.
- Презентации и предложения клиентам: ссылайтесь на точные токены цвета Tailwind при показе UI-дизайнов клиентам или написании технических спецификаций. Копируйте значения HEX для документов по дизайну и стайлгайдов.
- Интеграция с Figma и графическими редакторами: копируйте значения HEX из справочника цветов Tailwind CSS и вставляйте их прямо в Figma, Sketch или Adobe XD, чтобы поддерживать синхронизацию макетов с реализацией на Tailwind.
- Документация и стайлгайды: ссылайтесь на токены цвета Tailwind при написании документации компонентов, README или внутренних стайлгайдов. Справочник цветов Tailwind CSS даёт точные имена токенов и значения для каждого оттенка.
Что такое справочник цветов Tailwind CSS?
Справочник цветов Tailwind CSS — это браузер по всем официальным токенам палитры Tailwind с поиском и фильтрами: 22 цветовых семейства × 11 оттенков (от 50 до 950) = всего 242 токена. Каждая запись токена показывает название utility-класса (например, blue-500), значение HEX (например, #3B82F6) и имя CSS-переменной (например, --color-blue-500) — всё копируется в один клик.
Как пользоваться справочником цветов Tailwind CSS
- Поиск: введите имя токена (blue-500), код HEX (#3B82F6) или имя CSS-переменной в поле поиска. Справочник цветов Tailwind CSS фильтрует все 242 токена в реальном времени во время ввода.
- Фильтрация: используйте выпадающие списки семейства и оттенка, чтобы ограничиться конкретным цветовым семейством (например, все оттенки blue) или конкретным оттенком во всех семействах (например, все токены -500).
- Копирование: нажмите кнопку Token, HEX или Var на любой карточке цвета, чтобы скопировать значение в буфер обмена. Вставляйте сразу в конфигурацию Tailwind, CSS-файл или графический редактор.
Токены цвета Tailwind v3 и v4
- Utility-классы Tailwind v3: используйте имя токена напрямую как суффикс utility-класса — например, bg-blue-500, text-blue-500, border-blue-500.
- CSS-переменные Tailwind v4: в Tailwind v4 цвета доступны как пользовательские свойства CSS. Используйте имя CSS-переменной (например, var(--color-blue-500)) в своём CSS или design-токенах.
- Шкала оттенков: Tailwind использует шкалу из 11 оттенков от 50 (самый светлый) до 950 (самый тёмный). Оттенок 500 обычно является «базовым» цветом каждого семейства. Оттенки ниже 500 светлее, выше 500 — темнее.
- Цветовые семейства: 22 семейства цветов Tailwind — slate, gray, zinc, neutral, stone (нейтральные), red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink и rose.
Источник данных и точность
Справочник цветов Tailwind CSS генерирует значения токенов напрямую из официального пакета tailwindcss/colors в зависимостях вашего проекта. Это значит, что показанные значения HEX — точные значения, используемые Tailwind CSS, а не подобранные вручную приближения. Справочник охватывает все 22 основные семейства палитры и все 11 оттенков (50–950), всего 242 токена.
Часто задаваемые вопросы
Справочник цветов Tailwind CSS — это браузер по всем 242 официальным токенам палитры Tailwind с поиском и фильтрами: 22 цветовых семейства × 11 оттенков (50–950). Каждый токен показывает название utility-класса, значение HEX и имя CSS-переменной, все копируются в один клик.
В Tailwind CSS 22 основных цветовых семейства × 11 оттенков (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) = всего 242 токена.
В Tailwind v3 цвета используются как суффиксы utility-классов (например, bg-blue-500). В Tailwind v4 цвета также доступны как пользовательские свойства CSS (например, var(--color-blue-500)). Справочник показывает и имя токена, и имя CSS-переменной для каждого цвета.
Да. Введите любое значение HEX в поле поиска, и справочник покажет все совпадающие токены. Также можно искать по имени токена (blue-500) или по имени CSS-переменной.
Tailwind использует шкалу из 11 оттенков от 50 (самый светлый) до 950 (самый тёмный). Оттенок 500 обычно является базовым цветом. Оттенки ниже 500 светлее, выше 500 — темнее.
Да. Значения токенов генерируются напрямую из официального пакета tailwindcss/colors — это точные значения, которые использует Tailwind CSS, а не подобранные вручную приближения.
Да. Используйте выпадающие списки семейства и оттенка, чтобы отфильтровать конкретное цветовое семейство или оттенок. Также можно сочетать поиск с фильтром для более точных запросов.
Да, на 100 % бесплатно, без скрытых расходов и ограничений. Без регистрации, premium-тарифа, ограничений использования и рекламы.