Softonic

Генератор монохромной палитры

Шаг 1 / 3 Создать шкалу

Цвета и палитры создаются в этом браузере. В пошаговом режиме проект хранится до 30 минут в хранилище сеанса этой вкладки; значения цветов не попадают на наши серверы или в URL.

Создайте монохромную шкалу

Введите один цвет, затем выберите преобразование, цветовое пространство интерполяции и число образцов.

Допустимы #RGB, #RRGGBB, rgb(0–255) и hsl() с процентами. Альфа-каналы не поддерживаются.

Используется при экспорте CSS-переменных, Tailwind, SCSS и дизайн-токенов.

Выберите базовый цвет, и генератор построит вокруг него монохромную палитру: светлые оттенки (постепенно смешанные с белым для более светлой шкалы), темные оттенки (постепенно смешанные с черным для более темной шкалы) и приглушенные тона (смешанные с серым для снижения насыщенности). Полезно для дизайн-систем, которым нужна согласованная шкала из одного фирменного цвета, как шкала 50–950 в Tailwind, но настраиваемая, или для подбора состояний при наведении и активном состоянии, не покидая палитру.

Как генерируется палитра

  1. 1

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

    Используйте #RGB, #RRGGBB, целые каналы rgb() или проценты hsl().

  2. 2

    Выберите тип палитры

    Выберите полную светлую и темную шкалу, осветление к белому, затемнение к черному или приглушение к нейтральному.

  3. 3

    Выберите число шагов

    5, 9 или 11 шагов. Девять использует распространенные метки 100–900 в стиле Material; 11 добавляет 50 и 950 для шкалы в стиле Tailwind.

  4. 4

    Скопируйте или экспортируйте

    Копируйте HEX, RGB, HSL или OkLCH либо экспортируйте CSS, Tailwind, SCSS и JSON Design Tokens Community Group.

Светлые против темных против приглушенных оттенков

  • Светлый оттенок = базовый цвет + белый. Светлее, более пастельный. mix(base, #fff, p%), где p, процент белого.
  • Темный оттенок = базовый цвет + черный. Темнее, более глубокий. mix(base, #000, p%).
  • Приглушенный тон = базовый цвет + серый. Та же светлота, ниже насыщенность, более приглушенный.

Эти три преобразования дают разный визуальный характер: светлые оттенки кажутся воздушными и оптимистичными, темные, основательными и серьезными, приглушенные, сдержанными и утонченными.

Шкала из 9 шагов от одной базы

Шаг Описание Типичное применение
100 Очень светлый Поверхности, фоны чипов
200 Светлый Отключенные состояния
300 Средне-светлый Границы, разделители
400 Слегка приглушенный Вторичный текст (светлый фон)
500 Базовый цвет Бренд по умолчанию, ваша основа
600 Средне-темный Состояния при наведении на основные действия
700 Темный Активные состояния, заголовки
800 Очень темный Сильный текст на светлом фоне
900 Самый темный оттенок Текст максимального контраста

Числовые метки основаны на распространенных соглашениях для токенов; созданные цвета не являются официальными значениями Material или Tailwind.

Почему монохром работает для интерфейсов

  • Узнаваемость. Каждый элемент выглядит безошибочно связанным.
  • Согласованность. Повторение одного тона помогает видеть связи, но само по себе не делает интерфейс доступным для людей с нарушениями цветового зрения.
  • Простота. Одно решение, базовый цвет, управляет всей палитрой.

Сочетание с нейтральными

Монохромной палитре нужны и серые. Распространенный паттерн:

  • Основная шкала из вашего фирменного цвета (9 шагов).
  • Нейтральная шкала из обесцвеченной версии основного цвета (9 шагов).
  • Возможно, один акцентный цвет (один хорошо подобранный шаг для предупреждений и CTA).

Считайте это исходной структурой, а не жестким правилом. Количество палитр зависит от состояний продукта, визуализации данных, семантических цветов и требований доступности.

Контрольные точки контраста

Для текста на фоне WCAG требует 4,5:1 для обычного текста и 3:1 для крупного. Метки 100, 500 или 900 не означают определенный коэффициент контраста; результат зависит от базового цвета, типа палитры и пространства интерполяции.

Всегда проверяйте конкретные комбинации, которые планируете использовать, по чекеру контраста.

Экспорт в вашу дизайн-систему

Форматы вывода:

  • CSS-переменные: --primary-50: #f0f9ff; --primary-100: ...
  • Конфиг Tailwind: JS-объект, готовый к вставке в tailwind.config.js → theme.extend.colors.
  • SCSS-карта для проектов на Sass.
  • Дизайн-токены JSON в структуре $type/$value Design Tokens Community Group.

Часто задаваемые вопросы

Светлые оттенки намеренно движутся к белому, поэтому насыщенная база может быстро стать пастельной. Сравните HSL и OkLCH, сократите число шагов или выберите менее насыщенный базовый цвет.

Можно выбрать HSL или OkLCH. HSL изменяет оси светлоты и насыщенности; OkLCH изменяет перцептивную светлоту и хрому, а при необходимости уменьшает хрому, чтобы результат оставался в sRGB.

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

Прямой интеграции с Figma нет. Копируйте отдельные значения или используйте текст CSS, Tailwind, SCSS либо JSON в структуре Design Tokens Community Group как основу своего процесса.

Сопутствующие инструменты

Изменение размера изображений

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

WebP в JPG

Конвертируйте изображения WebP в JPG/JPEG прямо в браузере. Выберите качество, объедините прозрачность с цветом фона и скачайте без загрузки файлов на сервер.

Генератор QR-кодов

Создавайте QR-код из текста или URL в браузере и скачивайте его в PNG.

Генератор мемов

Добавьте верхнюю и нижнюю подписи к JPG, PNG или WebP. Настройте шрифт, цвета и обводку, затем скачайте статичный мем в PNG.

Генератор штрихкодов

Создавайте Code 128, EAN-13, UPC, ITF-14 и еще семь линейных штрихкодов. Данные остаются в браузере, результат можно скачать в SVG или PNG.

Генератор надписей граффити

Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.