Генератор цветов Tailwind

Превратите один фирменный цвет в полную шкалу оттенков Tailwind 50-950 в OKLCH с контрастом WCAG для каждого оттенка прямо в браузере.

Генератор цветов Tailwind работает целиком в вашем браузере. Фирменный цвет, который вы вводите, и генерируемые оттенки вычисляются на вашем устройстве и никогда не загружаются в ArrayKit.

Открыть конвертер CSS-цветов

Об инструменте Генератор цветов Tailwind

Генератор цветов Tailwind превращает один фирменный цвет в полную шкалу оттенков 50, 100, 200 … 900, 950, которую можно вставить прямо в tailwind.config. Вместо угадывания hex-значений он интерполирует светлоту в OKLCH — перцептивно равномерном пространстве, — так что каждый шаг ощущается равномерно распределённым, и привязывает ваш ввод к ближайшему шагу, чтобы палитра действительно содержала ваш точный фирменный цвет. Каждый образец показывает свой hex плюс коэффициент контраста WCAG относительно чёрного и белого, так что вы с первого взгляда видите, какие оттенки безопасны для текста. Скопируйте всю шкалу как блок theme.colors или как CSS-переменные. Вставьте любой CSS-цвет — hex, rgb(), hsl() или именованный цвет вроде rebeccapurple. Всё вычисляется на вашем устройстве; вводимые цвета никогда не покидают браузер.

Возможности

Как использовать Генератор цветов Tailwind

  1. Введите или выберите ваш фирменный цвет (hex, rgb(), hsl() или имя)
  2. Задайте имя цвета — оно станет ключом, например brand или accent
  3. Читайте бейджи контраста WCAG для каждого оттенка, чтобы найти шаги, безопасные для текста
  4. Переключайтесь между выводом tailwind.config и CSS-переменными
  5. Скопируйте блок или щёлкните отдельный образец, чтобы взять его hex

Пример

Ввод

#7c3aed  (name: brand)

Результат

colors: { brand: { 50: '#faf5ff', 500: '#7c3aed', 950: '#2e1065' } }

Один фиолетовый hex разворачивается в шкалу 50-950 с шагами в OKLCH и ключом brand.

Частые ошибки и устранение неполадок

Часто задаваемые вопросы

Как генератор цветов Tailwind строит шкалу 50-950?
Он преобразует ваш цвет в OKLCH, сохраняет оттенок (hue), проводит светлоту по одиннадцати шагам Tailwind и сужает насыщенность к крайним значениям. OKLCH перцептивно равномерен, поэтому каждый шаг выглядит равномерно распределённым, а не сгущается в середине, как у обычных шкал HSL.
Почему мой фирменный цвет попадает на 400 или 600, а не на 500?
Генератор привязывает ваш ввод к шагу, целевая светлота которого ближе всего к нему, и сохраняет там ваш точный цвет. Более светлый фирменный цвет закрепляется ближе к 300-400, а более тёмный — ближе к 600-700, так что шкала всегда содержит цвет, который вы ввели.
Что означают числа контраста на каждом образце?
Это коэффициенты контраста WCAG 2.x этого оттенка относительно чистого чёрного и чистого белого. Зелёный бейдж — не менее 4.5:1 (AA для обычного текста), а янтарный — не менее 3:1 (AA для крупного текста или UI). Используйте их для выбора пар текста и фона.
Можно ли вставить rgb(), hsl() или именованный цвет вместо hex?
Да. Работает любая строка CSS-цвета — #7c3aed, rgb(124 58 237), hsl(262 83% 58%) или имя вроде rebeccapurple. Инструмент разбирает её, преобразует в OKLCH и строит шкалу тем же способом.
Как использовать вывод в моём проекте?
Скопируйте блок tailwind.config в theme.extend.colors и обращайтесь к классам вроде bg-brand-500 или text-brand-800. Или скопируйте вариант с CSS-переменными и используйте var(--brand-500) где угодно в обычном CSS. Переименуйте ключ, изменив поле имени цвета.
Отправляются ли вводимые мной цвета куда-либо?
Нет. Вся шкала — разбор, математика OKLCH, коэффициенты контраста и оба формата вывода — вычисляется в вашем браузере. Фирменный цвет, который вы вводите или выбираете, никогда не покидает ваше устройство и не загружается в ArrayKit.

Связанные инструменты

Все инструменты ArrayKit