Генератор оттенков цвета — стиль Tailwind CSS

Числа следуют конвенции цветовой шкалы Tailwind CSS. Меньшие числа светлее: 50 — почти белый, 100 — очень светлый, 200 и 300 — светлые тона. Середина (500) — средний тон, близкий к исходному цвету. Большие числа темнее: 700 — тёмный, 900 — очень тёмный, 950 — почти чёрный. Шкала нелинейна — она откалибрована так, чтобы шаги воспринимались перцептивно равномерно по всему диапазону.

Тинт — это цвет, смешанный с белым, то есть осветлённый. Шейд — это цвет, смешанный с чёрным, то есть затемнённый. В терминах HSL тинты имеют более высокие значения светлоты, а шейды — более низкие, при одинаковом тоне. В данной шкале номера 50–400 являются тинтами (светлее базового), а 600–950 — шейдами (темнее базового). Ступень 500 примерно соответствует самому базовому цвету.

Инструмент переводит hex-цвет в HSL (тон, насыщенность, светлота). Тон и насыщенность остаются неизменными, тогда как каждому номеру ступени сопоставляется целевое значение светлоты: ступень 50 → 97% светлоты, ступень 500 → 52%, ступень 950 → 12%. Результат затем конвертируется обратно в hex. Такой метод сохраняет характер цвета (теплоту, прохладу, яркость) на всех оттенках.

WCAG (Руководство по доступности веб-контента) определяет минимальные коэффициенты контраста для читаемого текста. AA требует соотношения 4,5:1 для обычного текста; AAA — 7:1. Оценка контраста каждого оттенка показывает, соответствует ли чёрный или белый текст на этом фоне стандарту AA или AAA. Это помогает выбирать, какие оттенки безопасны для текста, а какие следует использовать только для декоративных элементов.

Tailwind позволяет определять пользовательские цвета в tailwind.config.js. Добавьте оттенки в theme.extend.colors: colors: { brand: { 50: '#ваш-hex-50', 100: '#ваш-hex-100', ... } }. После этого можно использовать классы bg-brand-100, text-brand-700, border-brand-300. Для Tailwind v4 с CSS-first-конфигурацией вставьте вывод CSS-переменных в определение темы.

Инструмент нацелен на конкретные значения светлоты для каждой ступени — ступень 500 нацелена примерно на 52% светлоты HSL. Если у вашего входного цвета иная светлота (например, 70% у более светлого цвета), оттенок на ступени 500 будет скорректирован в сторону 52%. Это обеспечивает последовательную шкалу, но означает, что ступень 500 может не совпадать с вашим исходным вводом. Для получения точного цвета на ступени 500 откорректируйте hex вручную — шкала будет сгенерирована относительно введённого значения.

Да — нажмите «Копировать CSS», чтобы получить готовый блок :root со всеми 11 оттенками в виде CSS-переменных. В вашем CSS обращайтесь к ним как var(--color-500), var(--color-50) и т. д. Префикс --color- можно переименовать в любой подходящий для вашего проекта (--brand-, --primary-, --blue-). CSS-переменные каскадируются и могут быть ограничены компонентом или переопределены в медиа-запросе для тёмного режима.

CSS-функция color-mix() (поддерживается современными браузерами) смешивает два цвета в заданной пропорции, подобно смешиванию краски. Этот инструмент использует заранее определённую шкалу светлоты (на основе HSL), которая создаёт более контролируемую и предсказуемую шкалу дизайн-системы. color-mix() лучше подходит для разовых смешений (например, смешать фирменный цвет с 20% белого), тогда как этот инструмент генерирует полную систематическую палитру для дизайн-системы. Оба подхода уместны в зависимости от задачи.