Дизайн / Цвет
Генератор шкалы цветов Tailwind
Превратите цвет бренда в полную палитру Tailwind CSS от 50 до 950, созданную в OKLCH, как собственные цвета Tailwind, и скопируйте её как CSS темы Tailwind 4, конфигурацию Tailwind 3 или переменные CSS.
Генератор шкалы цветов Tailwind: Для каждого оттенка используются значения светлоты, цветности и небольшого сдвига тона, характерные для палитр Tailwind на этом шаге и измеренные в цветовом пространстве OKLCH. Они смещаются так, чтобы ваш цвет точно соответствовал выбранному оттенку. Для серых цветов используются семейства серых оттенков Tailwind. Цвета, которые невозможно отобразить в гамме sRGB, преобразуются методом сопоставления цветовой гаммы CSS Color 4, как это делают браузеры; в результате для Tailwind 4 сохраняются значения OKLCH, а в остальных форматах используются HEX-коды. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.
- Категория
- Инструменты на каждый день
- Запуски
- В вашем браузере
- Стоимость
- Бесплатно · без регистрации
- Доступность
- Готово к использованию
Полностью работает в браузере
#f2f8ffoklch(97.6% 0.012 250.3)#dfecffoklch(93.9% 0.029 258.1)#bcd9ffoklch(87.6% 0.061 255.8)#8fbeffoklch(79.3% 0.106 256.6)#5e9cffoklch(69.6% 0.16 259.5)#3b82f6oklch(62.3% 0.188 259.8)#2668daoklch(54.2% 0.187 260.6)#1f57b6oklch(47.7% 0.163 260.6)#1f4997oklch(42.3% 0.137 261.4)#20417coklch(38.4% 0.109 261.4)#15274coklch(27.9% 0.073 263.2)CSS (@theme)
@theme {
--color-brand-50: oklch(97.6% 0.012 250.3);
--color-brand-100: oklch(93.9% 0.029 258.1);
--color-brand-200: oklch(87.6% 0.061 255.8);
--color-brand-300: oklch(79.3% 0.106 256.6);
--color-brand-400: oklch(69.6% 0.16 259.5);
--color-brand-500: oklch(62.3% 0.188 259.8);
--color-brand-600: oklch(54.2% 0.187 260.6);
--color-brand-700: oklch(47.7% 0.163 260.6);
--color-brand-800: oklch(42.3% 0.137 261.4);
--color-brand-900: oklch(38.4% 0.109 261.4);
--color-brand-950: oklch(27.9% 0.073 263.2);
}
Оттенки повторяют изменения светлоты, цветности и тона в собственных палитрах Tailwind, измеренные в OKLCH, поэтому шкала на основе blue-500 Tailwind отличается от синего Tailwind всего на несколько едва заметных различий. Цвета за пределами диапазона sRGB приводятся к нему методом отображения цветового охвата CSS Color 4.
Использование шкалы
Обычно значения 50–100 используют для фона страниц и карточек, 200–300 — для границ, 500–600 — для кнопок и ссылок, 700 — для состояний при наведении, а 800–950 — для текста на светлом фоне. Проверьте сочетания текста и фона с помощью проверки контрастности цветов.
Чтобы преобразовать один цвет между форматами hex, RGB, HSL и OKLCH, воспользуйтесь конвертером цветов; чтобы начать с фотографии — экстрактором цветовой палитры.
Tailwind 4 и OKLCH
Tailwind CSS 4 задаёт цвета в OKLCH, который позволяет описывать цвета за пределами sRGB на экранах с широким цветовым охватом. Результат Tailwind 4 здесь остаётся в пределах sRGB, поэтому цвета выглядят одинаково на любом экране.
Как пользоваться
- Выберите цвет или вставьте его HEX-код.
- Выберите, каким оттенком он должен быть, обычно 500, или позвольте генератору определить его автоматически.
- Скопируйте код для Tailwind 4, Tailwind 3 или обычных переменных CSS.
Конфиденциальность и ограничения
Всё создаётся в вашем браузере.
Похожие инструменты
Часто задаваемые вопросы
Почему OKLCH?
Равные шаги по светлоте в OKLCH выглядят для глаза одинаковыми для любого тона, поэтому жёлтая и синяя шкалы, созданные одним способом, имеют одинаковый контраст. HSL этого обеспечить не может.
Каким оттенком должен быть цвет моего бренда?
Обычно 500 или 600 — именно там Tailwind сохраняет самые насыщенные цвета. Очень светлый цвет, например пастельный, лучше подходит для 200 или 300; выберите «Автоматически», чтобы определить оттенок по светлоте.
Будет ли текст читаться на этих оттенках?
Как правило, для белого текста нужен оттенок 600 или темнее, а для тёмного текста — 400 или светлее, но проверяйте каждую пару с помощью средства проверки контраста.
Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен