Перейти к содержимому
Все инструментыЛичный кабинет
🎨

Генератор оттенков и тонов

Создайте палитру тонов и оттенков любого цвета с экспортом в CSS, SCSS и Tailwind

Открывали 127 раз

Инструмент справился с вашей задачей?

Одно нажатие, без регистрации. По ответам мы решаем, какие инструменты дорабатывать первыми.

Ваш ответ здесь будет первым.

Этот инструмент ещё ждёт первого комментария

Нашли приём, остался вопрос или чего-то не хватило — напишите, пригодится следующим. Без почты и пароля · публикуем после проверки, обычно за 1–2 дня

Генератор оттенков — онлайн

Онлайн-генератор оттенков помогает создать гармоничную палитру из базового цвета. Вы выбираете цвет — инструмент генерирует серии более тёмных (shade) и более светлых (tint) вариантов. Это основа грамотного дизайна и цветокоррекции.

Инструмент полезен веб-дизайнерам, иллюстраторам, фотографам, всем, кто работает с цветом. Вместо подбора оттенков вручную вы получаете готовую палитру за секунды. Это экономит время и даёт стабильные, профессиональные результаты.

Shade и tint в теории цвета

Shade (оттенок) — цвет с добавлением чёрного, более тёмный. Например, тёмно-синий от синего. Tint (подтон) — цвет с добавлением белого, более светлый. Например, светло-синий. Вместе они создают монохромную палитру.

Кроме того, существует tone (тон) — цвет с добавлением серого, менее насыщенный. Все три приёма дают разные эффекты: shade — драматичность и глубину, tint — свежесть и мягкость, tone — спокойствие и утончённость.

Применение в дизайне

Монохромные палитры — классика веб-дизайна. Они создают единообразие и профессиональный вид. Основной цвет + его shades/tints — безошибочный рецепт красивого интерфейса. Особенно эффективно для минималистичного дизайна.

В фотографии: регулировка теней и светов для создания настроения. В иллюстрации: добавление объёма через градиенты. В архитектуре: подбор красок разных оттенков для гармоничного внешнего вида здания.

💡

Пример: палитра для сайта

1

Дизайнер выбирает основной брендовый цвет #3498DB (синий)

2

Использует генератор оттенков

3

Получает 10 tints и 10 shades

4

Выбирает нужные: светлый для фона, средние для акцентов, тёмные для текста

5

Создаёт гармоничный дизайн с единой цветовой схемой

🧠

Знаете ли вы?

🎨

Shade — добавление чёрного, tint — добавление белого

💡

Монохромные палитры — самый простой способ гармонии

🖼️

Художники используют оттенки со времён Возрождения

📐

В CSS можно генерировать оттенки через hsl() и alpha

🎯

Хорошая палитра содержит 3-5 основных цветов

🌈

Цветовая теория — основа грамотного дизайна

💡

Важно знать

Начните с одного основного цвета и создайте 5-7 его оттенков — этого обычно достаточно для любого дизайна. Монохромные палитры всегда выглядят профессионально.

Как создать палитру оттенков и тонов: пошаговая инструкция

1

Выберите базовый цвет

Введите цвет в формате HEX (например, #3498DB), укажите значения RGB или HSL, воспользуйтесь пикером цвета, выберите из готовой библиотеки популярных цветов или нажмите кнопку случайного выбора. Все форматы ввода синхронизируются автоматически — меняйте в любом поле.

2

Настройте количество ступеней

Переместите ползунок для выбора количества ступеней палитры — от 2 до 16. Большее число ступеней создаёт более плавную градацию от светлого к тёмному. Для типичных дизайн-систем оптимально 8-10 ступеней, для простых задач достаточно 4-6.

3

Просмотрите и используйте палитру

Палитра генерируется мгновенно. Нажмите на любой цвет, чтобы скопировать его в выбранном формате (HEX, RGB или HSL). Используйте кнопки экспорта для получения готового кода CSS-переменных, SCSS-переменных или конфигурации Tailwind CSS. Метка "AA" указывает на соответствие цвета стандарту доступности WCAG.

Примеры использования генератора оттенков и тонов

🎨 Создание дизайн-системы для веб-проекта

При разработке интерфейса необходим набор производных цветов от основного фирменного. Дизайнер вводит базовый цвет бренда, получает палитру из 10 ступеней и экспортирует её в CSS-переменные. Светлые тона идут на фоны секций и карточек, базовый — на кнопки и акценты, тёмные оттенки — на заголовки и hover-состояния. Получается целостная визуальная система за считанные секунды.

💻 Настройка Tailwind CSS палитры

Фронтенд-разработчик выбирает основной цвет приложения, генерирует палитру и экспортирует конфигурацию Tailwind. В коде становятся доступны классы от bg-custom-50 (самый светлый тон) через bg-custom-500 (базовый цвет) до bg-custom-950 (самый тёмный оттенок). Это привычная для Tailwind логика нумерации, где меньшие числа — светлее, а базовый цвет закреплён за 500; она ускоряет вёрстку и обеспечивает последовательность дизайна.

♿ Проверка доступности цветовой схемы

Специалист по accessibility генерирует палитру и сразу видит, какие цвета имеют достаточный контраст для текста (метка AA). Это позволяет быстро определить, что для крупных заголовков на белом фоне подойдут оттенки от -3 и темнее, а для мелкого текста — от -5. Вместо ручной проверки каждого цвета в отдельном инструменте, контрастность отображается прямо в палитре.

📱 Подбор цветов для мобильного приложения

Разработчик мобильного приложения использует генератор для создания согласованной цветовой схемы. Светлые тона применяются для фоновых элементов в светлой теме, тёмные оттенки — для тёмной темы. Промежуточные ступени используются для разграничения секций, иконок, разделителей и индикаторов состояний.

🖌️ Подготовка палитры для иллюстрации

Цифровой художник выбирает основной цвет объекта и генерирует палитру тонов и оттенков для создания объёма. Светлые тона используются для бликов и освещённых поверхностей, базовый цвет — для средних тонов, тёмные оттенки — для теней и глубины. Математически точная градация обеспечивает натуральный переход между светлыми и тёмными участками.

Часто задаваемые вопросы о генераторе оттенков и тонов

В чём разница между тоном (tint) и оттенком (shade)?
Тон (tint) — это результат смешивания исходного цвета с белым, что делает его светлее. Оттенок (shade) — это смешивание с чёрным, что делает цвет темнее. Существует также понятие тени (tone) — смешивание с серым, которое снижает насыщенность. Генератор создаёт именно тона и оттенки, покрывая полный диапазон от светлого к тёмному через базовый цвет.
Сколько ступеней палитры лучше выбрать?
Для полноценной дизайн-системы обычно хватает 6-10 ступеней — палитра получает плавную градацию с нумерацией в духе Material Design и Tailwind CSS: светлые тона получают меньшие числа, базовый цвет закреплён за 500, тёмные оттенки — большие (диапазон 50–950). Для простых задач вроде подбора фона и текста достаточно 4-6 ступеней. Если нужна очень плавная градация, например для gradient-эффектов, можно использовать 12-16 ступеней.
Что означает метка AA рядом с цветом?
Метка AA указывает, что данный цвет соответствует стандарту доступности WCAG 2.0 уровня AA. Это означает, что коэффициент контрастности между этим цветом и белым или чёрным текстом составляет не менее 4.5:1. Такие цвета безопасно использовать в качестве фона для текста обычного размера, обеспечивая читаемость для людей с нарушениями зрения.
Какой формат цвета лучше использовать — HEX, RGB или HSL?
HEX (#3498DB) — наиболее распространённый формат в веб-разработке, компактный и удобный для CSS. RGB (52, 152, 219) — используется в JavaScript, графических редакторах и при работе с прозрачностью (RGBA). HSL (204°, 70%, 53%) — интуитивно понятен для дизайнеров, так как оперирует тоном, насыщенностью и светлотой. Все три формата описывают один и тот же цвет, выбор зависит от контекста использования.
Как экспортировать палитру в код?
Под палитрой расположены три кнопки экспорта: CSS — копирует палитру как CSS-переменные в формате :root, SCSS — копирует как SCSS-переменные ($color-100 и т.д.), Tailwind — копирует готовый фрагмент конфигурации для tailwind.config.js. Также можно скопировать всю палитру как список цветов в выбранном формате (HEX, RGB или HSL) с помощью кнопки над палитрой.
Безопасно ли использовать генератор?
Все вычисления выполняются исключительно в вашем браузере. Выбранные цвета и сгенерированные палитры не отправляются на сервер сайта. Инструмент работает автономно и не требует подключения к интернету после загрузки страницы. Регистрация не требуется.
Можно ли использовать генератор на телефоне?
Да, генератор полностью адаптирован для мобильных устройств. Интерфейс перестраивается под экраны смартфонов и планшетов, все функции — ввод цвета, выбор из палитры, копирование и экспорт — работают на сенсорных экранах. Пикер цвета использует системный компонент устройства для максимального удобства.

Полезная информация

Инструмент использует математически точные алгоритмы смешивания цветов в RGB-пространстве, обеспечивающие равномерное распределение тонов и оттенков. Расчёт контрастности выполняется по формуле относительной яркости, определённой в спецификации WCAG 2.0 (W3C). Все формулы конверсии между HEX, RGB и HSL реализованы с учётом стандарта CSS Color Module Level 4.

Если у вас есть предложения по улучшению генератора или вопросы по работе с цветовыми палитрами, напишите в комментариях внизу страницы или нам напрямую: почта и Telegram есть на странице «Контакты».

Смежные инструменты для работы с цветом

Соберите палитру, проверьте контраст и переведите цвета между форматами.

Генератор палитр
Целые цветовые схемы, не только монохром.
Проверка контраста
Контраст текста и фона по WCAG.
CSS-градиенты
Плавные переходы из ваших оттенков.
Конвертер цветов
HEX, RGB, HSL, CMYK и обратно.
HEX в RGB
Быстрый перевод HEX → RGB.
Сочетания цветов
Какие цвета хорошо смотрятся вместе.

Комментарии

Этот инструмент ещё ждёт первого комментария

Без почты и пароля · публикуем после проверки, обычно за 1–2 дня

  • Руслан АвдеевОт автора проекта
    Все инструменты на ToolFox бесплатны, и я их дорабатываю сам. Напишите, если инструмент считает неверно, чего-то не хватает или что-то стоит поправить, — по таким комментариям я и решаю, чем заняться дальше.

Комментарии — мнения посетителей, прошедшие проверку по правилам сайта.