Центр знаний и экспертное руководство
Палитра и конвертер цветов Tailwind CSS: поиск HEX, RGB и HSL оттенков
Палитра и Конвертер цветов Tailwind CSS — инструмент продуктивности для верстальщиков и фронтенд-инженеров, работающих со стилями популярного утилитарного фреймворка Tailwind CSS (версий 3 и 4).
Инструмент содержит полную эталонную шкалу всех 22 фирменных цветовых палитр (Slate, Zinc, Emerald, Indigo, Violet, Amber и др.) от 50 до 950 оттенка, выполняет мгновенный подбор ближайшего класса Tailwind по произвольному HEX/RGB коду и рассчитывает контрастность. Инструмент работает на 100% локально.
Архитектура и математическая формула
Поиск ближайшего цвета: ΔE = min √[ (R1 - R2)² + (G1 - G2)² + (B1 - B2)² ] в евклидовом пространстве
Сопоставляет произвольный HEX-цвет дизайнера из Figma с наиболее близким стандартным классом Tailwind (например, `#4f46e5` -> `indigo-600`).
Лучшие практики и ключевые рекомендации
- Используйте семантические шкалы серого в зависимости от дизайна: `Slate` имеет холодный синеватый подтон; `Zinc` — нейтральный технологичный; `Stone` — теплый песочный оттенок. Не смешивайте разные серые шкалы в одном проекте.
- Применяйте непрозрачность через слэш-нотацию (Opacity Modifier): В Tailwind v3+ непрозрачность задается элегантно: `bg-indigo-600/50`, что избавляет от необходимости прописывать отдельные классы `bg-opacity-*`.
- Соблюдайте правила цветового контраста для доступности: Текст оттенков 50-400 читается на темном фоне, а оттенки 600-950 предназначены для светлого фона. Оттенок 500 является пограничным и требует осторожности.
- Расширяйте палитру в `tailwind.config.js` без потери дефолтных цветов: При добавлении корпоративных брендовых цветов используйте секцию `theme.extend.colors`, чтобы не перезаписать стандартные оттенки фреймворка.
Часто задаваемые вопросы (FAQ)
Как найти класс Tailwind, максимально похожий на корпоративный цвет компании?
Вставьте HEX-код вашего цвета в поле поиска инструмента. Алгоритм вычислит цветовое расстояние в пространстве RGB/Lab и подберет ближайший эквивалентный класс Tailwind с указанием процента совпадения.
В чем отличие палитры Tailwind v4 от предыдущей версии v3?
В Tailwind v4 цветовая система переведена на современное сверхширокое цветовое пространство OKLCH, обеспечивающее лучшую плавность переходов и естественную светимость цветов на OLED-дисплеях.
Можно ли скопировать значения цвета в формате HSL или RGB?
Да. Кликнув по любой плашке цвета, вы можете скопировать как имя утилитарного класса (например, `text-emerald-500`), так и точное шестнадцатеричное значение HEX, код RGB или координаты HSL.
Передаются ли палитры моих проектов на удаленные серверы?
Нет. Вся база цветов встроена непосредственно в легковесный клиентский скрипт. Поиск, расчет дистанции цвета и копирование происходят на 100% внутри вашего браузера.