Генератор затемнённых оттенков

Шаг 1 / 2

Базовый цвет

Шаги

Результаты

Затемнённый оттенок, это результат смешивания цвета с чёрным: с каждой ступенью он становится темнее. Генератор берёт HEX-цвет основы и создаёт 3–20 ступеней (по умолчанию 10) всё более тёмных оттенков, а также осветлённые оттенки той же основы. Это удобно для шкал палитр дизайн-системы (500 → 900), состояний нажатия/активности кнопок, цветов текста, которые остаются читаемыми, и теневых наложений. Каждая ступень показана образцом со значением hex, готовым к копированию.

Как работает генерация оттенков

1

Выберите цвет основы

Используйте палитру цветов или передайте значение hex через URL страницы в пошаговом режиме. Основа находится между диапазоном осветлений и диапазоном затемнений.
2

Выберите количество ступеней

От 3 до 20 ступеней, по умолчанию 10. Больше ступеней даёт более плавную шкалу; меньше ступеней даёт более сильные перепады.
3

Смешивайте с чёрным равными ступенями

Каждая ступень умножает красный, зелёный и синий каналы на один и тот же коэффициент, что эквивалентно смешиванию с чёрным (или с белым для осветлений) равными ступенями. При 10 ступенях каждая из них примерно на 9 % темнее или светлее. Тон остаётся идентичным основе.
4

Считайте шкалу

Каждый образец показывает своё значение hex. Выделите текст, чтобы скопировать его в CSS, тему Tailwind или файл design tokens.

Затемнение, осветление и приглушение

Затемнённый оттенок (shade): цвет + чёрный → темнее.
Осветлённый оттенок (tint): цвет + белый → светлее.
Приглушённый оттенок (tone): цвет + серый → менее насыщенный.

Этот генератор создаёт и затемнённые, и осветлённые оттенки из одной основы. Пара «осветление + затемнение» обычно образует палитру дизайн-системы (например, от brand-100 до brand-900, где 500, базовый цвет).

Пример шкалы: #3B82F6 (Tailwind blue-500)

Ступень	HEX	Смешивание	Роль в дизайн-системе
0	#3B82F6	База	Основной бренд (например, blue-500)
1	#316CCD	17% чёрного	Состояние наведения
2	#2756A4	33% чёрного	Нажатое/активное состояние (blue-600)
3	#1D417B	50% чёрного	blue-700
4	#132B52	67% чёрного	blue-800
5	#091528	83% чёрного	blue-900

В таблице показана шкала из 5 ступеней: каждая ступень проходит одну шестую пути к чёрному.

Как вычисляются ступени

Инструмент умножает красный, зелёный и синий каналы основы на один и тот же коэффициент на каждой ступени. Это эквивалентно смешиванию с чёрным в диапазоне затемнений и с белым в диапазоне осветлений, равными ступенями. При 10 ступенях каждая из них примерно на 9 % темнее или светлее предыдущей.

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

Использование оттенков в интерфейсе

Кнопка: база для состояния покоя, на 1–2 ступени темнее для наведения, на 2–3 ступени темнее для активного/нажатого состояния.
Основной текст: на 2–3 ступени темнее базы, это обеспечивает читаемость на белом фоне; светлее для вторичного текста.
Граница/разделитель: на 1–2 ступени темнее фона, достаточно, чтобы выделить элемент, не перегружая интерфейс.
Тени: самая тёмная ступень (или ещё темнее) с пониженной альфа-прозрачностью вместо нового серого.
Визуализация данных: используйте оттенки одного тона для последовательной шкалы (величины значений) или пары оттенков двух тонов для расходящихся шкал (положительные и отрицательные значения).

Типичные ошибки

Слишком много ступеней сливаются в неразличимые полосы. 10-ступенчатые шкалы работают хорошо, потому что каждая ступень примерно на 9 % темнее; при 20 ступенях различия становятся едва заметными. Для сильного контраста выбирайте 3–5 ступеней.
Сдвиг тона здесь невозможен: каждая ступень умножает все каналы одинаково, поэтому красный остаётся красным, а зелёный зелёным. Сдвиг тона появляется при интерполяции между двумя разными цветами, чего этот инструмент не делает.
Игнорирование доступности. Гармоничные на вид оттенки могут не проходить по контрасту WCAG относительно фона. Всегда проверяйте контраст на каждой ступени.
Шкалы только из затемнённых оттенков выглядят давяще на тёмном фоне. Для удобного тёмного режима сочетайте их со шкалой осветлённых оттенков.

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

Для дизайн-системы общепринята схема из 5 ступеней затемнения + 5 ступеней осветления (всего 10 вокруг базы). Для быстрых цветов состояний интерфейса (наведение, активность) достаточно 3 ступеней.

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

У тёмных цветов уже мало запаса, чтобы стать темнее до чёрного, тёмно-фиолетовая база даёт лишь 2–3 различимые ступени, после чего шкала схлопывается. Для более богатых шкал выбирайте базу средней светлоты.

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

Генератор затемнённых оттенков

Как работает генерация оттенков

Выберите цвет основы

Выберите количество ступеней

Смешивайте с чёрным равными ступенями

Считайте шкалу

Затемнение, осветление и приглушение

Пример шкалы: #3B82F6 (Tailwind blue-500)

Как вычисляются ступени

Использование оттенков в интерфейсе

Типичные ошибки

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

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

Справочная таблица ASCII

Справочник сочетаний клавиш

Справочник символов HTML

Счетчик FPS

Генератор цветовой палитры

Генератор случайных букв