Как пользоваться: Генератор цветов Tailwind
- Введите цвет бренда в формате HEX, RGB, HSL или OKLCH.
- Задайте название палитры (например,
brand): от него будут зависеть классы вродеbg-brand-500. - Оставьте режим «ближайший шаг», чтобы ваш цвет попал на оттенок с подходящей светлотой, или зафиксируйте его на 500.
- Выберите формат экспорта и скопируйте код в конфиг Tailwind, CSS или SCSS.
Что такое цветовая шкала 50–950?
Дизайн-системы, такие как Tailwind CSS, описывают каждый цвет как набор оттенков: 50 — почти белый тон для фонов, 500 — основной цвет, а 900–950 — тёмные оттенки для текста и тёмной темы. Полная шкала позволяет единообразно оформлять состояния наведения и нажатия, границы, бейджи и тёмные темы, не подбирая каждый раз более светлый или тёмный вариант на глаз.
Как генератор строит шкалу
- Ваш цвет переводится в OKLCH, перцептивно равномерное цветовое пространство, поэтому переход между соседними шагами выглядит равномерным.
- Для каждого шага задана целевая светлота, построенная по палитре Tailwind v4 (примерно 97% для 50 и примерно 26% для 950). Ваш цвет ставится на ближайший шаг, а соседние целевые значения немного смещаются, чтобы шкала проходила через него.
- Насыщенность (colorfulness) достигает пика около 500–600 и снижается к краям, как в палитрах, настроенных вручную: светлые оттенки не выглядят неоново, а тёмные не выглядят мутными.
- Оттенки, выходящие за пределы гаммы sRGB, корректируются снижением насыщенности при сохранении тона и светлоты.
Использование палитры
Tailwind v4 читает цвета из CSS: вставьте блок @theme в основной таблицу стилей, и появятся классы вроде bg-brand-100. Tailwind v3 использует theme.extend.colors в tailwind.config.js. Экспорт в CSS-переменные и SCSS работает в любом проекте, в том числе в Webflow, где можно создать такие же цветовые переменные на панели Variables.
Советы по доступности
Как правило, для текста на белом фоне нужен оттенок достаточно тёмный, чтобы достичь контраста 4.5:1 (часто 600 или темнее), а для текста на тёмном фоне обычно подходят оттенки от 300 и светлее. Подсказка под каждым образцом покажет это; проверить конкретные пары можно в проверке контраста или в APCA-проверке контраста.
Также ищут как: генератор оттенков, генератор тонов, цветовая шкала, цвета дизайн-системы, палитра бренда, tailwind 50-900.
Инструменты, которые хорошо сочетаются с Генератор цветов Tailwind
- Палитра цветов из изображения — Узнайте палитру цветов любого изображения: фото, логотипа, скриншота или дизайна.
- Смеситель цветов — Выберите два цвета и количество шагов, чтобы получить равномерно смешанные промежуточные цвета.
- CSS-переменные в Tailwind — Превратите цветовые переменные :root в тему Tailwind одной вставкой — конфиг tailwind.config.js для v3 или @theme для v4, с готовыми значениями или ссылками var().
- Конвертер цвета OKLCH — Изучайте перцептивно равномерное цветовое пространство OKLCH с ползунками в реальном времени, проверяйте, входит ли цвет в sRGB, и копируйте соответствующие запасные значения HEX, RGB и HSL.