Что такое Монохромная Палитра?

Выберите базовый цвет и создайте из него тёмные и светлые оттенки. Задайте количество шагов, затем экспортируйте как CSS-переменные, конфигурацию Tailwind или скопируйте отдельные hex/RGB-значения.

Введите любой HEX или возьмите цвет пипеткой, задайте количество светлых (тинтов), тонов (смешанных с серым) и тёмных (шейдов) — страница интерполирует каждую шкалу в пространстве LAB, чтобы шаги выглядели равномерно. На каждом образце сразу видны HEX, RGB и HSL с копированием в один клик, а «Копировать всё» забирает всю шкалу сразу. Можно показать только светлые, только тона или только тёмные, либо выгрузить всю шкалу как CSS-переменные, фрагмент конфигурации Tailwind, переменные SCSS, дизайн-токены JSON или PNG-лист образцов.

Как использовать

1. Выберите базовый цвет пипеткой, введите HEX-код или возьмите доминирующий цвет прямо из логотипа или фото через «Из изображения».
2. Настройте, сколько светлых (тинтов), тонов (смесь с серым) и тёмных (шейдов) вам нужно, затем при желании сузьте вид фильтром «Показать».
3. Скопируйте отдельные значения цветов, нажмите «Копировать всё», чтобы забрать все HEX сразу, или экспортируйте всю палитру как CSS-свойства, объект конфигурации Tailwind, переменные SCSS, дизайн-токены JSON или изображение со свотчами.

Когда использовать

• Сборка UI-дизайн-системы: нужно девять одинаковых ступеней фирменного цвета для разных компонентов.
• Дата-визуализация, где все серии должны брать оттенки одного цветового тона (тепловые карты, последовательные столбики).
• Подбор пары текста и фона: фон -100 с текстом -900 чаще всего попадает в безопасную зону контраста.

Результат

Вы создаёте дашборд и вам нужна синяя палитра для визуализации данных. Выбираете #3B82F6 как базовый цвет, генерируете 9 шагов — от почти белого (#EBF2FE) до почти чёрного (#1A2744). Экспортируете как CSS-переменные и используете --color-blue-100 через --color-blue-900 по всем графикам.

Частые вопросы

Что такое монохромная палитра, по сути?

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

Сколько ступеней генерировать?

В UI принято девять (Tailwind, Material и IBM Carbon используют десятиступенчатые шкалы 50-900). Для дата-визуализации обычно достаточно 5-7 ступеней. Больше 11 — и палитра начинает выглядеть как градиент, соседние оттенки сложно различить.

Какой формат выбрать для экспорта?

CSS-переменные подойдут к любому стилевому файлу. Фрагмент Tailwind вставляется в theme.extend.colors и сразу даёт утилиты вроде bg-brand-500. SCSS даёт и переменные $brand-500, и Sass-карту. JSON выгружает шкалу как структурированные дизайн-токены для style dictionary. PNG-сетку удобно отправлять в Figma или в брендбук.

Почему самые светлые ступени выглядят почти белыми?

При очень высокой светлоте глаз воспринимает любой насыщенный цвет как белый. Если -100 уже не отличить от белого, уменьшите количество светлых ступеней или сдвиньте верхнюю границу светлоты ближе к базовому цвету — соседние оттенки снова станут различимы.

Соответствуют ли цвета требованиям доступности?

Теперь это можно проверить прямо здесь. Включите значок контраста WCAG — и каждый образец покажет, проходит ли на нём чёрный или белый текст уровень AA или AAA; предпросмотр цветового зрения перекрашивает шкалу так, как её видит человек с дейтеранопией, протанопией или тританопией. Простое правило: сочетайте шаг -100/-200 с шагом -700/-800 — и обычно вы пройдёте уровень WCAG AA.

Похожие инструменты