Генератор оттенков цвета
Выберите базовый цвет. Инструмент построит 11 оттенков от почти белого до почти чёрного, сохраняя тон. Нажмите на оттенок, чтобы скопировать код.
Как пользоватьсяОттенки цвета
Доступно на: 
Генератор оттенков цвета: для чего нужен
Выберите цвет, и инструмент создаст 11 оттенков от почти белого до почти чёрного, рассчитанных в цветовом пространстве OKLCH: тон остаётся прежним, а светлота меняется на каждой ступени. Базовый цвет попадает на ступень с наиболее близкой светлотой без изменений.
Нажмите на оттенок, чтобы скопировать HEX, или скопируйте все CSS-переменные либо объект для tailwind.config с выбранным вами названием.
Как пользоваться
- Выберите базовый цвет в палитре или введите HEX.
- Дайте цвету название.
- Скопируйте оттенок, CSS-переменные или шкалу для Tailwind.
Когда использовать
- Создание палитры для сайта или дизайн-системы.
- Светлые оттенки для фонов и тёмные для текста одного цвета.
- Настройка цвета бренда в Tailwind.
Частые вопросы
Как считаются оттенки?
В цветовом пространстве OKLCH, которое соответствует восприятию глаза: инструмент сохраняет тон базового цвета, меняет светлоту каждой ступени и уменьшает насыщенность на краях, чтобы светлые и тёмные оттенки не выглядели кричащими.
Где на шкале окажется мой цвет?
Базовый цвет ставится на ступень с наиболее близкой светлотой, и эта ступень использует именно ваш цвет. Она отмечена на шкале.
Как использовать в Tailwind или CSS?
Скопируйте CSS-переменные (--cor-50 … --cor-950) или объект для tailwind.config. Замените название цвета в поле «Название».
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.