Какие форматы цветов поддерживает инструмент?

HEX (6-значный, например #3b82f6), RGB (0–255 на канал), HSL (оттенок 0–360°, насыщенность и светлота 0–100%) и имена классов Tailwind CSS. Редактируйте любой формат — остальные обновляются немедленно.

Как работает подбор цвета Tailwind?

Инструмент сравнивает ваш цвет со всеми ~242 цветами палитры Tailwind v3 (22 семейства × 11 оттенков каждое) по евклидовому расстоянию в пространстве RGB. Ближайшее совпадение возвращается как имя utility-класса, например 'blue-500'.

Совпадение с Tailwind всегда точное?

Не всегда. Если ваш цвет точно совпадает с цветом Tailwind — совпадение идеальное. Для произвольных цветов возвращается ближайший сосед, который может не быть визуально идентичным. Образец цвета рядом с именем класса позволяет сравнить.

Из какой версии Tailwind взята палитра?

Таблица поиска использует стандартную палитру Tailwind CSS v3, включающую все 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).

Можно ли ввести значение HSL напрямую?

Да. Нажмите на любое из трёх числовых полей HSL (H, S, L) и введите значение. Оттенок — 0–360 градусов, насыщенность и светлота — 0–100 процентов. Поля HEX и RGB будут обновляться по мере ввода.

Работает ли инструмент офлайн?

Да, после загрузки страницы. Все математические вычисления цветов и таблица поиска Tailwind встроены в JavaScript — сетевые запросы при конвертации цветов не выполняются.

Конвертер цветов

Конвертировать цвета между форматами HEX, RGB, HSL и находить ближайший класс Tailwind CSS мгновенно.

#6366F1

HEX

RGB

HSL

H°

Tailwind

indigo-500

Ближайший класс цвета Tailwind

Конвертировать цвета между HEX, RGB, HSL и Tailwind онлайн

Переключение между форматами цветов — постоянное неудобство при разработке интерфейсов. Конвертер цветов Zolkit работает с HEX, RGB и HSL в обе стороны и даже находит ближайший класс цвета Tailwind CSS — от hex-кода в дизайн-инструменте до utility-класса в один шаг.

Три формата одновременно

Редактируйте любой формат — HEX, RGB или HSL — и все остальные обновляются мгновенно. Измените одно число — все представления синхронизируются.

Подбор цвета Tailwind

Автоматически находит ближайший класс цвета Tailwind v3 из полной палитры 22 семейств по евклидовому расстоянию в пространстве RGB.

Живой образец цвета

Большой выбор цвета даёт мгновенный визуальный предпросмотр выбранного цвета по мере изменения значений.

Копирование любого формата

Копирование одним кликом для каждой карточки формата — скопируйте HEX-строку, функцию rgb(), функцию hsl() или имя класса Tailwind.

100% приватно

Все вычисления цветов выполняются локально в браузере. Никакие данные не отправляются на сервер.

Бесплатно навсегда

Без аккаунта, без ограничений, без платных функций. Конвертация цветов всегда бесплатна.

Как конвертировать цвета

1
Нажмите на выбор цвета или введите значение в любое поле формата (HEX, RGB или HSL).
2
Все остальные поля обновятся автоматически. Карточка Tailwind покажет ближайший подходящий utility-класс.
3
Нажмите кнопку «Копировать» на любой карточке, чтобы скопировать этот формат в буфер обмена.