🎨

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

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

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

HEX

RGB

HSL

Тона и оттенки

Светлее (тона)БазовыйТемнее (оттенки)

Совет по использованию

Цвета с меткой "AA" соответствуют стандарту доступности WCAG 2.0 (контраст ≥ 4.5:1 с белым или чёрным текстом). Нажмите на любой цвет, чтобы скопировать его в выбранном формате.

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

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

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

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

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

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

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

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

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

💡

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

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

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

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

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

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

🧠

Знаете ли вы?

🎨

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

💡

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

🖼️

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

📐

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

🎯

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

🌈

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

💡

Важно знать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В чём разница между тоном (tint) и оттенком (shade)?

Тон (tint) — это результат смешивания исходного цвета с белым, что делает его светлее. Оттенок (shade) — это смешивание с чёрным, что делает цвет темнее. Существует также понятие тени (tone) — смешивание с серым, которое снижает насыщенность. Генератор создаёт именно тона и оттенки, покрывая полный диапазон от светлого к тёмному через базовый цвет.

Сколько ступеней палитры лучше выбрать?

Для полноценной дизайн-системы рекомендуется 8-10 ступеней — это соответствует стандартной нумерации (100-900) в Material Design и Tailwind CSS. Для простых задач вроде подбора фона и текста достаточно 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.

Если у вас есть предложения по улучшению генератора или вопросы по работе с цветовыми палитрами, обращайтесь через форму обратной связи. Мы открыты к идеям и постоянно работаем над расширением функционала инструмента.

Комментарии (1)

Был ли полезен этот инструмент?

Руслан Авдеев (автор проекта)• 1 янв. 2024 г., 00:00

🎉 Спасибо, что используете наши инструменты! Все инструменты на ToolFox полностью бесплатны и постоянно улучшаются. 📝 Пожалуйста, оставляйте комментарии: - Если инструмент работает некорректно - Если есть идеи по улучшению - Поделитесь своим опытом использования 👍 Ставьте лайки/дизлайки - это помогает мне понять, какие инструменты нуждаются в доработке. Я обновляю сайт каждую неделю на основе вашей обратной связи. ⭐ Если вам нравится ToolFox — буду благодарен за отзыв о сайте в Яндекс.Браузере (нажмите на ⋮ → «Оценить сайт» в панели браузера). Это помогает другим людям находить наши инструменты! 😊 Также вы можете написать мне напрямую в Telegram: @avdeevrus Все доработки и улучшения по вашим пожеланиям делаю бесплатно! Благодарю за доверие и использование ToolFox! 🚀