Водич кроз Tailwind CSS боје

Подразумевана палета Tailwind-а има 22 породице боја (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), свака са 11 нијанси од 50 (најсветлија) до 950 (најтамнија) — укупно 242 боје. Овај алат ради у оба смера: налепите hex код попут #c4b5fd да пронађете најближи одговарајући назив класе, или откуцајте класу попут bg-amber-500 да добијете њен тачан hex, RGB и друге utility варијанте. Потпуна мрежа палете испод може се прегледати, а сваки узорак боје копира свој hex код кликом.

Šta je ovaj alat?

Tailwind CSS нуди фиксну подразумевану скалу боја уместо да вам омогући да бирате произвољне вредности за уобичајене боје корисничког интерфејса. Свака од 22 именоване породице (попут amber или slate) има тачно 11 нијанси, нумерисаних од 50 до 950, а свака нијанса има једну званичну hex вредност коју је документовао сам Tailwind и која се идентично користи у bg-, text-, border- и ring- utility класама.

Овај водич локално уграђује целу званичну палету, тако да претрага боје или назива класе не захтева отварање Tailwind-ове документације, покретање билда или слање класе кроз PurgeCSS само да бисте видели како изгледа. Претраге по hex-у користе еуклидско растојање у RGB-у да пронађу најближу званичну нијансу, док су претраге по класи тачне — свака вредност овде одговара документованим подразумеваним вредностима Tailwind-а.

Zašto ga koristiti?

Налепите hex код из дизајн датотеке или снимка екрана и одмах добијте најближи назив Tailwind класе, уместо да нагађате којој нумерисаној нијанси одговара.
Откуцајте назив класе попут slate-900 или bg-purple-500 да видите њену тачну hex и RGB вредност без претраживања Tailwind-ове документације.
Прегледајте целу мрежу од 22 породице x 11 нијанси да упоредите нијансе једну поред друге пре него што изаберете.
Добијте bg-, text-, border- и ring- варијанте за било коју нијансу једним кликом, јер Tailwind користи исту бројчану скалу за све њих.
Бесплатно, тренутно и потпуно локално — без отпремања, без налога, без корака билда.

Kako se koristi

Да бисте пронашли назив класе из hex кода: откуцајте или налепите hex вредност (са или без #) у поље за претрагу — најближа званична Tailwind нијанса се приказује изнад мреже, заједно са растојањем боје ако то није тачно поклапање.
Да бисте пронашли hex вредност из назива класе: откуцајте назив класе или породице (нпр. amber-500, bg-blue-600, или само teal) — тачно поклапање приказује hex, RGB и све utility варијанте; само назив породице филтрира мрежу на ту породицу.
Да бисте прегледали све: оставите поље за претрагу празно и кликните на било који узорак у мрежи — његови детаљи се приказују у панелу изнад, а његов hex код се аутоматски копира.
Кликните на било које од дугмади варијанти bg-/text-/border-/ring- у панелу са детаљима да копирате тачан назив класе.

Primer

Unos

#c4b5fd

Rezultat

violet-300 — Тачно поклапање, #C4B5FD, rgb(196, 181, 253)

Овај hex је једна од сопствених документованих подразумеваних вредности Tailwind-а, тако да је растојање 0, а поклапање је тачно, а не приближно.

Često postavljana pitanja

Да ли су ово званичне подразумеване боје Tailwind CSS-а?

Да — свих 242 hex вредности (22 породице x 11 нијанси) долази из сопствене документоване подразумеване палете Tailwind-а. Tailwind v4 интерно представља боје као OKLCH, али иста подразумевана палета и њени документовани hex еквиваленти остају непромењени у односу на v3, тако да су ове вредности актуелне за обе верзије.

Шта значи када претрага по hex-у није тачно поклапање?

Ако налепите hex код који није једна од 242 подразумеване вредности Tailwind-а (на пример, прилагођена боја бренда), алат приказује најближу званичну нијансу на основу RGB растојања и означава је као „Најближе поклапање“ са приказаним растојањем — неће бити пиксел по пиксел идентична вашем уносу, само најближа подразумевана вредност Tailwind-а.

Зашто bg-, text-, border- и ring- сви користе исте бројеве?

Tailwind примењује једну заједничку скалу боја на све utility категорије, тако да су bg-amber-500, text-amber-500, border-amber-500 и ring-amber-500 све иста основна hex вредност примењена на другачије CSS својство. Зато панел са детаљима приказује све четири варијанте заједно за било коју нијансу коју претражујете.

Могу ли да претражим групу породице попут само „blue“ без броја нијансе?

Да — уношење само назива породице (без броја) филтрира мрежу на само 11 нијанси те породице како бисте их могли упоредити једну поред друге, а да још нисте изабрали одређену нијансу.

Да ли ово покрива прилагођене боје Tailwind теме које сам дефинисао у својој конфигурацији?

Не — овај водич покрива само уграђену подразумевану палету Tailwind-а, а не боје које сте додали или преписали у блоку tailwind.config.js theme.extend.colors или блоку @theme за v4. Ако ваш пројекат прилагођава палету, ваше стварно приказане боје могу се разликовати од оних приказаних овде за исти назив класе.