Генератор оттенков цвета — стиль Tailwind CSS
Выберите базовый цвет, чтобы мгновенно получить полную палитру из 11 оттенков (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) — по аналогии со шкалой Tailwind CSS и Material Design. Каждый оттенок отображает оценку контраста WCAG относительно белого или чёрного текста. Кликните на любой образец, чтобы скопировать hex-код, или нажмите «Копировать CSS», чтобы экспортировать все оттенки как CSS-переменные.
Как это работает
Как работают шкалы цветовых оттенков
Шкала цветовых оттенков — это систематический ряд более светлых и более тёмных вариаций базового цвета, используемый для создания визуальной иерархии и доступного контраста в дизайне интерфейсов. Конвенция Tailwind CSS предусматривает 11 ступеней: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 и 950. Меньшие числа соответствуют более светлым тонам (более высокая светлота в HSL), а большие — более тёмным. Ступень 500 обычно близка к введённому базовому цвету.
Инструмент генерирует оттенки, переводя входной hex в HSL (тон, насыщенность, светлота), сохраняя тон и насыщенность, и при этом сопоставляя каждую ступень с заранее определённым значением светлоты. Ступень 50 соответствует ~97% светлоты (почти белый), ступень 500 — ~52% (средний диапазон), ступень 950 — ~12% (почти чёрный). Такой подход создаёт визуально последовательные палитры, сохраняющие характер цвета на всех уровнях яркости.
Оценки контраста WCAG в палитре
Каждый оттенок в палитре отображает оценку контраста WCAG (Руководство по доступности веб-контента) относительно чёрного или белого текста — смотря какой более читаемый. Оценки: AAA (коэффициент контраста ≥ 7:1, наилучшая доступность), AA (≥ 4,5:1, обязателен для обычного текста), AA Large (≥ 3:1, допустим только для крупного текста и элементов интерфейса) и Fail (< 3:1, недостаточен для текста). Соответствие WCAG 2.1 AA является минимальным законодательным требованием по доступности во многих юрисдикциях.
При создании интерфейса с цветовой палитрой используйте оттенки с оценкой AA или AAA для текста на этих фонах. Как правило, оттенки 50–300 обеспечивают высокий контраст с тёмным текстом, а оттенки 700–950 — с белым текстом. Средние оттенки (400–600) для мелкого текста часто попадают в категорию AA Large или Fail, поэтому они подходят для декоративных элементов, границ или фонов за крупным белым текстом, но не для мелкого основного текста.
Использование палитры в CSS и дизайн-системах
Кнопка «Копировать CSS» экспортирует палитру как CSS-переменные в блоке :root, готовые для вставки в таблицу стилей. Например, переменная blue-500 примет вид --color-500: #3b82f6 (или выбранный вами цвет). Префикс переменной можно переименовать под свой проект: --brand-500, --primary-500, --blue-500 и т. д. CSS-переменные каскадируются и могут быть переопределены для отдельного компонента или темы.
Дизайн-системы, такие как Tailwind CSS, Material Design, Ant Design и Chakra UI, используют пронумерованные шкалы оттенков для своих цветовых систем. Наличие единой шкалы позволяет делать уверенный выбор: используйте 50 для фонов при наведении, 100 для активных состояний в светлой теме, 500 для основных кнопок, 700 для состояния hover кнопок и 900 для тёмных фонов. Единая нумерованная шкала для всех фирменных цветов создаёт предсказуемость и сокращает число дизайн-решений на уровне компонентов.
Частые вопросы
›Что означают номера оттенков (50–950)?
Числа следуют конвенции цветовой шкалы 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 и зачем оттенкам нужны оценки?
WCAG (Руководство по доступности веб-контента) определяет минимальные коэффициенты контраста для читаемого текста. AA требует соотношения 4,5:1 для обычного текста; AAA — 7:1. Оценка контраста каждого оттенка показывает, соответствует ли чёрный или белый текст на этом фоне стандарту AA или AAA. Это помогает выбирать, какие оттенки безопасны для текста, а какие следует использовать только для декоративных элементов.
›Как использовать эту палитру в Tailwind CSS?
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-переменными?
Да — нажмите «Копировать CSS», чтобы получить готовый блок :root со всеми 11 оттенками в виде CSS-переменных. В вашем CSS обращайтесь к ним как var(--color-500), var(--color-50) и т. д. Префикс --color- можно переименовать в любой подходящий для вашего проекта (--brand-, --primary-, --blue-). CSS-переменные каскадируются и могут быть ограничены компонентом или переопределены в медиа-запросе для тёмного режима.
›Чем эти оттенки отличаются от CSS-функции color-mix()?
CSS-функция color-mix() (поддерживается современными браузерами) смешивает два цвета в заданной пропорции, подобно смешиванию краски. Этот инструмент использует заранее определённую шкалу светлоты (на основе HSL), которая создаёт более контролируемую и предсказуемую шкалу дизайн-системы. color-mix() лучше подходит для разовых смешений (например, смешать фирменный цвет с 20% белого), тогда как этот инструмент генерирует полную систематическую палитру для дизайн-системы. Оба подхода уместны в зависимости от задачи.
Похожие инструменты
Обновлено: