Об этом инструменте
Тени и оттенки — основа рабочей цветовой системы интерфейса. Одного фирменного цвета почти никогда не хватает: нужны более светлые оттенки для фонов, состояний hover и лёгких заливок, и более тёмные тени для текста, границ и состояний, которые должны оставаться читаемыми на светлом фоне. У терминов «shade» и «tint» в дизайне точное значение — тень получается смешением базового цвета с чёрным, оттенок — с белым, в отличие от «tone» (смешение с серым), который этот инструмент не создаёт.
Выберите базовый цвет и число шагов, чтобы получить полный переход от тёмного к светлому: самая тёмная тень первой, ваш исходный цвет посередине и самый светлый оттенок последним. Нажмите на любой образец, чтобы скопировать его hex-код в буфер обмена — для CSS-переменных, дизайн-токенов или конфигурации Tailwind. Всё выполняется локально в браузере при изменении цвета или числа шагов; ничего не загружается на сервер.
Частые вопросы
В чём разница между оттенком (shade) и осветлением (tint)?
Оттенок (shade) — это ваш базовый цвет, смешанный с чёрным (темнее), а осветление (tint) — базовый цвет, смешанный с белым (светлее). Оба сохраняют тот же оттенок цвета (hue).
Сколько шагов стоит генерировать для палитры дизайн-системы?
Большинство дизайн-систем используют 5-10 шагов (аналогично шкале 50-900 в Tailwind) — этого достаточно для фонов, границ, текста и состояний hover без слишком большого числа почти одинаковых цветов.