CodeKitHubЩо це за інструмент?
Tailwind CSS пропонує фіксовану стандартну шкалу кольорів замість того, щоб дозволити вам обирати довільні значення для поширених кольорів інтерфейсу. Кожне з 22 названих сімейств (наприклад, amber або slate) має рівно 11 відтінків, пронумерованих від 50 до 950, і кожен відтінок має одне офіційне hex-значення, задокументоване самим Tailwind і використовується однаково в utility-класах bg-, text-, border- і ring-.
Цей довідник вбудовує всю офіційну палітру локально, тому пошук кольору або назви класу не вимагає відкриття документації Tailwind, запуску збірки (build) або пропускання класу через 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 і всі варіанти utility-класів; лише назва сімейства фільтрує сітку до цього сімейства.
- Щоб переглянути все: залиште поле пошуку порожнім і клацніть на будь-якому зразку в сітці — його деталі з'являться на панелі вгорі, а його 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 застосовує одну спільну шкалу кольорів для кожної категорії 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. Якщо ваш проєкт налаштовує палітру, ваші фактично відображені кольори можуть відрізнятися від показаних тут для тієї самої назви класу.