CodeKitHubЧто это за инструмент?
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, а не цвета, которые вы добавили или переопределили в блоке theme.extend.colors файла tailwind.config.js или блоке @theme в v4. Если ваш проект настраивает палитру, реально отображаемые цвета могут отличаться от показанных здесь для того же названия класса.