Web UtilitiesГенератор оттенков и теней цвета
Создавайте оттенки, тени и тона из любого базового цвета. Генерируйте палитры в стиле Tailwind 50–950, копируйте CSS-переменные и создавайте полные дизайн-системы мгновенно.
hsl(217, 91%, 60%)
210
Базовый цвет
#3B82F6
CSS-переменные
:root {
--tint-1: #DFEAFD;
--tint-2: #BED6FC;
--tint-3: #9EC1FA;
--tint-4: #7DADF9;
--tint-5: #5D98F7;
--color-base: #3B82F6;
--shade-1: #0B64F4;
--shade-2: #0950C3;
--shade-3: #073C92;
--shade-4: #052861;
--shade-5: #021431;
/* Tones */
--tone-1: #4C87E6;
--tone-2: #5B8BD7;
--tone-3: #6B8EC7;
--tone-4: #7A92B8;
--tone-5: #8A95A8;
}Оттенки
#DFEAFD
#BED6FC
#9EC1FA
#7DADF9
#5D98F7
Тени
Base#3B82F6
#0B64F4
#0950C3
#073C92
#052861
#021431
Тона
#4C87E6
#5B8BD7
#6B8EC7
#7A92B8
#8A95A8
Нажмите на образец, чтобы скопировать его HEX
Похожие инструменты
О генераторе оттенков и теней
Как это работает
- Введите или выберите базовый цвет с помощью выбора цвета или поля HEX.
- Выберите количество шагов для генерации оттенков и теней.
- Переключитесь между классическим режимом и режимом Tailwind (50–950).
- Нажмите на образец, чтобы скопировать его HEX-значение.
- Используйте «Копировать всё как CSS» для получения полной палитры.
Случаи применения
- Создание цветовых палитр для дизайн-систем.
- Генерация цветовых шкал для Tailwind CSS.
- Создание доступных цветовых рамп с сохранением фирменного стиля.
- Исследование вариаций брендового цвета по всем уровням яркости.
- Создание цветовых токенов для передачи дизайна в Figma или Storybook.
Часто задаваемые вопросы
Что такое оттенок цвета?
Оттенок создаётся путём добавления белого к базовому цвету, делая его светлее и менее насыщенным. Оттенки сохраняют исходный тон, увеличивая яркость, создавая пастельные вариации для фонов и акцентов UI.
Что такое тень цвета?
Тень создаётся путём добавления чёрного к базовому цвету, делая его темнее. Тени сохраняют исходный тон, уменьшая яркость, и используются для текста, границ и нажатых состояний.
Что такое тон цвета?
Тон создаётся путём добавления серого к базовому цвету, что снижает насыщенность без значительного изменения яркости. Тона дают более приглушённые вариации для нейтральных компонентов UI.
Что такое режим палитры в стиле Tailwind?
Режим Tailwind генерирует 11 остановок: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 и 950 — копируя соглашение об именовании Tailwind CSS. Это позволяет создавать семейства цветов для tailwind.config.js.
Как использовать сгенерированные CSS-переменные?
Инструмент создаёт блок :root { } с пользовательскими свойствами CSS для каждого цвета. Скопируйте их в глобальную таблицу стилей и используйте через var(--tint-1), var(--shade-3), var(--color-500) и т.д.
Сколько шагов можно сгенерировать?
В классическом режиме можно выбрать от 2 до 10 шагов. Режим Tailwind всегда создаёт фиксированную шкалу из 11 остановок.
Можно ли копировать отдельные значения цвета?
Да. Нажмите на любой образец, чтобы мгновенно скопировать его HEX-значение. Также можно использовать кнопку «Скопировать всё как CSS» для получения всей палитры одним нажатием.
Какие форматы цвета поддерживает инструмент?
Можно ввести любой 6-значный HEX-цвет (например, #3B82F6) или использовать стандартный выбор цвета браузера. Все выходные значения представлены в формате HEX.
Является ли сгенерированная палитра доступной?
Инструмент генерирует перцептивно равноудалённые цвета, но соответствие WCAG зависит от сочетания цветов текста и фона. Используйте инструмент проверки доступности цвета для проверки контрастности.
Как этот инструмент полезен для дизайн-систем?
Дизайн-системы требуют полной цветовой шкалы для каждого брендового цвета. Этот инструмент автоматизирует этот процесс: введите свой цвет бренда и получите готовую шкалу для Figma или tailwind.config.js.
Хранит ли инструмент мои цвета?
Нет. Все вычисления цвета выполняются в браузере с помощью JavaScript. Данные не отправляются на сервер и не сохраняются между сессиями.
В чём разница между оттенками/тенями и градиентом?
Градиент — это плавный визуальный переход между двумя и более цветами. Оттенки и тени — это дискретные, именованные цветовые остановки в рамках одного семейства тонов, используемые как отдельные значения цвета в токенах дизайна.