Справочник на цветовете на 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 и други варианти на утилити класове. Пълната мрежа с палитрата по-долу може да се разглежда и всяко квадратче копира своя hex при клик.

Какво представлява този инструмент?

Tailwind CSS предлага фиксирана цветова скала по подразбиране, вместо да ви позволява да избирате произволни стойности за често срещаните цветове на потребителския интерфейс. Всяко от 22-те именувани семейства (като amber или slate) има точно 11 нюанса, номерирани от 50 до 950, и всеки нюанс има една официална hex стойност, документирана от самия Tailwind и използвана еднакво в bg-, text-, border- и ring- утилити класовете.

Този справочник вгражда цялата официална палитра локално, така че търсенето на цвят или име на клас не изисква отваряне на документацията на Tailwind, стартиране на билд или включване на класа през PurgeCSS, само за да видите как изглежда. Търсенето по hex използва Евклидово разстояние в RGB, за да намери най-близкия официален нюанс, а търсенето по клас е точно — всяка стойност тук съвпада с документираните стойности по подразбиране на Tailwind.

Защо да го използвате?

Поставете hex код от дизайнерски файл или скрийншот и веднага получете най-близкото име на клас на Tailwind, вместо да гадаете на кой номериран нюанс съответства.
Въведете име на клас като slate-900 или bg-purple-500, за да видите точната му hex и RGB стойност, без да ровите в документацията на Tailwind.
Разгледайте цялата мрежа от 22 семейства x 11 нюанса, за да сравните нюансите един до друг, преди да изберете.
Получете вариантите bg-, text-, border- и ring- за всеки нюанс с едно кликване, тъй като Tailwind използва една и съща числова скала за всички тях.
Безплатно, мигновено и напълно локално — без качване, без акаунт, без билд стъпка.

Как да го използвате

За да намерите име на клас от hex код: въведете или поставете hex стойността (със или без #) в полето за търсене — най-близкият официален нюанс на Tailwind се показва над мрежата, заедно с цветовото разстояние, ако не е точно съвпадение.
За да намерите hex стойност от име на клас: въведете класа или името на семейството (напр. amber-500, bg-blue-600 или само teal) — точното съвпадение показва hex, RGB и всички варианти на утилити класове; само име на семейство филтрира мрежата до това семейство.
За да разгледате всичко: оставете полето за търсене празно и кликнете върху произволно квадратче в мрежата — детайлите му се появяват в панела отгоре, а hex кодът му се копира автоматично.
Кликнете върху произволен от бутоните за варианти bg-/text-/border-/ring- в панела с детайли, за да копирате точното име на класа.

Пример

Вход

#c4b5fd

Резултат

violet-300 — Точно съвпадение, #C4B5FD, rgb(196, 181, 253)

Този hex е една от собствените документирани стойности по подразбиране на Tailwind, така че разстоянието е 0 и съвпадението е точно, а не приблизително.

Често задавани въпроси

Това официалните цветове по подразбиране на Tailwind CSS ли са?

Да — всички 242 hex стойности (22 семейства x 11 нюанса) идват от собствената документирана палитра по подразбиране на Tailwind. Tailwind v4 представя цветовете вътрешно като OKLCH, но същата палитра по подразбиране и нейните документирани hex еквиваленти остават непроменени спрямо v3, така че тези стойности са актуални за която и да е от версиите.

Какво означава, когато търсенето по hex не е точно съвпадение?

Ако поставите hex код, който не е една от 242-те стойности по подразбиране на Tailwind (например персонализиран цвят на бранда), инструментът показва най-близкия официален нюанс по RGB разстояние и го обозначава като „Най-близко съвпадение“ с показано разстояние — няма да бъде пиксел за пиксел идентичен с вашия вход, а само най-близкият нюанс по подразбиране на Tailwind.

Защо bg-, text-, border- и ring- използват едни и същи числа?

Tailwind прилага една обща цветова скала за всяка категория утилити класове, така че 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. Ако проектът ви персонализира палитрата, действителните цветове при рендиране може да се различават от показаните тук за същото име на клас.