ПаветтаГенератор оттенков и тонов
Из одного фирменного цвета нужна целая шкала: светлый для подложек, средний для кнопки, тёмный для нажатого состояния и для текста на светлом фоне. Инструмент строит её тремя способами.
Базовый цвет
Палитра
Палитра из фотографии
Перетащите картинку сюда или
Картинка не загружается на сервер: цвета считываются прямо в браузере.Выгрузка
Оттенки, тени и тона
Генератор строит от одного цвета полный набор оттенков и тонов: светлее — добавлением белого, темнее — добавлением чёрного, приглушённее — добавлением серого. Получается шкала из девяти-одиннадцати ступеней, готовая для интерфейса.
Простое смешивание с белым и чёрным даёт неровный результат: середина шкалы выглядит грязной, а светлые ступени почти не отличаются друг от друга. Поэтому генератор работает в пространстве, где расстояние между цветами примерно соответствует зрительной разнице.
Отдельно строится шкала по светлоте с постоянным шагом: ступени 50, 100, 200 и так до 900, привычные по популярным наборам интерфейсных цветов. Такая нумерация удобна тем, что 500 всегда середина, а 100 и 900 — края.
Каждая ступень сопровождается проверкой контраста с белым и чёрным. Обычно первые четыре-пять ступеней требуют тёмного текста, остальные — светлого, и граница видна прямо в шкале.
| Термин | Что добавляют |
|---|---|
| Оттенок (tint) | Белый |
| Тень (shade) | Чёрный |
| Тон (tone) | Серый |
| Ступени | 50–900 |
Манселл, равные шаги и CIELAB
Систему из тона, насыщенности и светлоты предложил американский художник Альберт Манселл в начале XX века. Его атлас 1915 года впервые расставил цвета так, чтобы соседние образцы отличались на одинаковую зрительную величину.
Прежние системы строились по смешиванию красок, и шаги в них выходили неравномерными: в области жёлтого глаз различает больше оттенков, чем в области синего, и линейная шкала это игнорировала.
Международная комиссия по освещению в 1976 году утвердила пространство CIELAB, где расстояние между цветами примерно пропорционально видимой разнице. Оно легло в основу расчётов цветовых различий в промышленности.
Отдельно стоит помнить о восприятии контекстом. Один и тот же серый на белом фоне выглядит темнее, чем на чёрном, и разница заметна невооружённым глазом. Поэтому ступени шкалы проверяют на том фоне, где они будут применяться.
Пространства с равномерной светлотой пришли в веб-разработку заметно позже. До этого палитры подбирали смешиванием в RGB, и характерная беда таких наборов — провал в середине шкалы, где цвет теряет насыщенность.
Шкала оттенков в интерфейсе
Введите основной цвет и заберите шкалу. Для интерфейса берите ступень 500 как основную, 600–700 для наведения и нажатия, 50–100 для фона блоков.
Заводите отдельные шкалы для нейтральных серых и для акцентных цветов. Серая шкала работает на фонах, границах и тексте, и ступеней в ней обычно нужно больше, чем в цветной.
Проверяйте края шкалы на настоящем экране. Крайние светлые ступени на дешёвой матрице сливаются с белым, и различие, заметное на хорошем мониторе, у части пользователей исчезает.
Для состояний интерфейса берите соседние ступени шкалы. Кнопка, темнеющая на одну ступень при наведении, воспринимается как та же кнопка; смена цвета на два-три шага читается как другой элемент.
Держите одну шкалу на весь проект. Отдельно подобранные цвета для каждого блока разъезжаются уже через десяток экранов, и привести их обратно к системе гораздо дороже, чем задать её сразу.
Для тёмной темы стройте отдельную шкалу. Простая инверсия ступеней даёт перенасыщенные цвета на тёмном фоне: там нужны приглушённые варианты, иначе интерфейс начинает светиться и утомляет глаз через несколько минут.
Подобрать исходный цвет поможет генератор цветов, а собрать переход между двумя — генератор градиентов.
| Ступеней | 9–11 |
| Нумерация | 50–900 |
| Основная ступень | 500 |
| Оттенок | плюс белый |
| Тень | плюс чёрный |
| Тон | плюс серый |
| Атлас Манселла | 1915 |
| Пространство CIELAB | 1976 |
Оттенки получаются подмешиванием белого, тона — чёрного, приглушённые — серого.
Как пользоваться
Отдельно собирается шкала в привычной нумерации от 50 до 950 — та, что принята в дизайн-системах и в Tailwind. У каждой ступени сразу показан контраст с белым и чёрным текстом, поэтому видно, где можно ставить надпись, а где нельзя. Готовая палитра выгружается переменными CSS, SCSS или куском конфига Tailwind. Базовый цвет можно вынуть из фотографии: перетащите картинку — инструмент достанет из неё самые заметные цвета, и любой из них станет основой шкалы.
- Пипеткой или кодом в поле — принимаются HEX, RGB и HSL.
- Оттенки, тона, приглушённые или нумерованная шкала от 50 до 950.
- У каждой ступени показано, читается ли на ней белый и чёрный текст.
- Переменные CSS, SCSS или конфиг Tailwind — кнопкой под шкалой.
Частые вопросы
Чем отличаются оттенки, тона и приглушённые цвета
Это три разных способа изменить цвет. Оттенок получается добавлением белого: цвет светлеет и одновременно теряет насыщенность. Тон — добавлением чёрного: темнеет и тоже приглушается. Приглушённый — добавлением серого: светлота почти не меняется, зато насыщенность падает. Приглушённые полезны для второстепенных элементов, которые не должны спорить с основным цветом.
Почему шкала пронумерована от 50 до 950
Это соглашение, пришедшее из Material Design и закрепившееся в Tailwind. Число примерно отражает светлоту наоборот: 50 — самый светлый, 950 — самый тёмный, 500 — базовый. Удобство в том, что шкалы разных цветов совпадают по номерам: синий 600 и красный 600 одинаково темны, и их можно менять местами без перевёрстки.
Почему просто осветлить цвет иногда выглядит грязно
Потому что светлота в цветовой модели HSL не совпадает с воспринимаемой яркостью. Жёлтый с L равным 50% глазу кажется намного светлее синего с тем же значением. Поэтому шкалы, построенные механическим изменением L, у части цветов дают вялые или мутные ступени, и их приходится править вручную. Инструмент показывает воспринимаемую яркость рядом, чтобы такие места было видно.
Как понять, где ставить белый текст, а где чёрный
По контрастности, в цифрах. Требование WCAG для обычного текста — 4,5:1, для крупного от 18 пунктов — 3:1. У каждой ступени здесь посчитаны оба варианта, и подсказка говорит, какой из них проходит. Переломная точка почти всегда приходится на ступени 500–600.
Сколько ступеней нужно в дизайн-системе
Обычно от девяти до одиннадцати на цвет. Меньше — не хватает на состояния кнопок и подложки, больше — соседние ступени становятся неразличимыми, и выбор превращается в мучение. Ходовой набор: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
Можно ли строить шкалу от любого цвета
Технически да, но от очень тёмного или очень светлого база выходит смещённой: если исходный цвет уже почти чёрный, тёмные ступени сольются. Практичнее брать за базу цвет средней светлоты, около 45–55% по L, и строить шкалу от него в обе стороны.
Спросите нейросети об инструменте
Похожие инструменты
Случайный цвет или палитра из пяти с фиксацией удачных. Диапазоны тона, насыщенности и светлоты, пресеты пастели и тёмных.
ОткрытьГенератор CSS-градиентовЛинейный, радиальный и конический градиент с живым предпросмотром. Любое число цветовых точек, угол и позиции, разбор чужого кода обратно в точки.
ОткрытьВеб-безопасные цветаТаблица 216 безопасных цветов с кодами HEX и RGB, поиск и подбор ближайшего безопасного цвета к любому вашему.
ОткрытьПалитра flat-цветовГотовые палитры плоского дизайна: Flat UI и три ступени Material. Названия, коды, контраст текста и выгрузка в CSS.
ОткрытьПалитра из картинкиГлавные цвета фото или логотипа: от 3 до 10 оттенков с HEX и RGB, копирование, экспорт в CSS-переменные и проверка контраста с текстом.
ОткрытьСочетание цветовГармоничные палитры по цветовому кругу: комплементарные, триада, аналоговые. С симуляцией дальтонизма и контрастом пар.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.