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

Создайте практичную шкалу оттенков

Одного фирменного цвета редко хватает для полноценного интерфейса. Кнопкам нужны состояния наведения, карточкам — светлые фоны, рамкам — более спокойный оттенок, а тексту иногда — более тёмный спутник. Этот генератор оттенков Tailwind превращает одно значение HEX в привычную шкалу 50-950, чтобы вы могли быстро увидеть, как цвет ведёт себя на светлых и тёмных поверхностях. Сгенерированные значения детерминированы и легко копируются, поэтому подходят для прототипов, дизайн-ревью, пользовательских свойств CSS и документации дизайн-токенов.

Инструмент использует шаги светлоты HSL, чтобы сохранить узнаваемый тон, одновременно смещая цвет к очень светлым оттенкам и глубоким теням. Это не официальный алгоритм Tailwind, и он не пытается точно повторить вручную настроенные палитры Tailwind. Вместо этого вы получаете чистую отправную точку, которую можно корректировать в контексте. Если ваш базовый цвет уже очень бледный или очень тёмный, внимательно изучите средние значения и решите, нужна ли шкале ручная доработка.

Использование сгенерированных оттенков в CSS

Копируйте вывод CSS, когда нужны готовые для браузера переменные вроде --brand-500 и --brand-700. Копируйте вывод JSON, когда готовите токены для файла конфигурации, style dictionary или страницы документации. В типичном интерфейсе 50 и 100 хорошо подходят для мягких поверхностей, 200 и 300 — для рамок или бейджей, 500 — для основного цвета действия, а 600-800 — для состояний наведения, нажатия или текста. Значения 900 и 950 самые насыщенные, поэтому оставьте их для тёмных тем или элементов с сильным акцентом.

Проверьте контраст перед публикацией

Шкалы оттенков удобны, но они не гарантируют автоматически доступный текст. Цвет, который выглядит сбалансированно как образец, может не пройти проверку контрастности за мелкими подписями или отключёнными элементами управления. После копирования шкалы протестируйте комбинации, которые действительно использует ваш интерфейс: основной текст на светлых фонах, белый текст на кнопках действий, кольца фокуса вокруг полей и рамки на фоне соседних поверхностей. Воспринимайте этот генератор как первый шаг в рабочем процессе цветовой системы, а окончательные сочетания проверьте средством проверки контрастности перед публикацией.