Softonic

Генератор цветового оттенка

Шаг 1 / 2
Далее

Светлый оттенок получается при смешивании цвета с белым: с каждым шагом он становится светлее. Генератор берёт ваш базовый цвет и создаёт лестницу постепенно светлеющих оттенков, полезную для диапазонов палитр системы дизайна (100 → 400), мягких заливок фона, состояний наведения на тёмные основные цвета и фонов значков и уведомлений, где акцентный цвет должен присутствовать, но оставаться приглушённым.

Как создаются оттенки

  1. 1

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

    Используйте палитру, чтобы выбрать базовый цвет. Лучше всего работает с базовыми цветами средней светлоты; у почти белых оснований мало запаса для осветления.

  2. 2

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

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

  3. 3

    Смешивайте с белым, увеличивая процентное соотношение

    При 10 шагах первый оттенок смешивает около 9% белого, а последний около 91%. Интерполяция выполняется прямо в RGB-пространстве, поэтому с ростом светлоты насыщенность угасает.

  4. 4

    Считайте HEX-значения

    Каждый образец показывает своё HEX-значение. Перенесите их в CSS-переменные, шкалу Tailwind или карту Sass.

Пример шкалы оттенков #3B82F6.

Таблица ниже показывает, что выводит инструмент при стандартных 10 шагах:

Шаг Hex Белого Типичная роль
0 #3B82F6 База Основной цвет бренда (синий-500)
1 #4C8DF6 9,1% Светлое наведение на тёмном фоне
2 #5E98F7 18,2% эквивалент синего-400
3 #70A4F8 27,3%
4 #82AFF9 36,4% синий-300
5 #94BAFA 45,5%
6 #A5C6FA 54,5%
7 #B7D1FB 63,6%
8 #C9DCFC 72,7% Ненавязчивый фон (синий-100/200)
9 #DBE8FD 81,8%
10 #EDF3FE 90,9% синий-50

Светлые + тёмные оттенки = шкала системы дизайна

Комбинируйте светлые оттенки (tint) и тёмные оттенки (shade) вокруг одной основы, чтобы сформировать полную шкалу:

  • 50, 100, 200, 300, 400: светлые оттенки (от самого светлого до немного светлее основы)
  • 500: базовый цвет
  • 600, 700, 800, 900: тёмные оттенки (от немного темнее основы до самого тёмного)

Это соответствует Tailwind, Material, Open Color, Radix UI и большинству популярных систем дизайна. Шкалы из 10-11 ступеней являются нормой.

Где оттенки незаменимы в интерфейсе

  • Фон уведомлений и значков: текст error-500 на фоне error-50 = мгновенное распознавание без визуального шума.
  • Состояния при наведении на тёмном фоне: кнопки на тёмной поверхности при наведении светлеют до более светлого оттенка.
  • Последовательные шкалы для визуализации данных: сопоставление значения и цвета, где большие величины насыщенные, а малые угасают в сторону белого.
  • Заглушки категорий для аватаров и диаграмм: оттенок основного цвета, когда изображения или данных нет.
  • Слои поверхностей: фон карточки слегка тонируется цветом бренда для ненавязчивого присутствия бренда.

Почему самые светлые оттенки теряют насыщенность

Генератор смешивает прямо в RGB-пространстве. По мере добавления белого насыщенность падает быстрее, чем растёт воспринимаемая светлота, поэтому верхние ступени выглядят бледными или сероватыми. Это нормальное поведение RGB-смешивания:

  • RGB-смешивание (этот инструмент): простое и предсказуемое. Насыщенность угасает равномерно; очень светлые ступени выглядят обесцвеченными.
  • Интерполяция OKLCH или LAB: используется дизайн-программами, чтобы сохранять цветность более стабильной при осветлении. Этот генератор не предлагает такие модели; если нужны оттенки со стабильным тоном, создавайте их в программе с поддержкой OKLCH.
  • Осветление в HSL: повышает светлоту без смешивания белого; результат может выглядеть пастельным, а не как краска.

Нижний предел оттенков для пригодного интерфейса

Очень светлые оттенки (шаг 8+) приближаются к чистому белому и становятся визуально неразличимыми на белом фоне. Полезно как:

  • Тонкое выделение за текстом.
  • Почти невидимые полосы строк в плотных таблицах.

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

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

Генератор смешивает прямо в RGB, а RGB-интерполяция снижает насыщенность с ростом светлоты, поэтому верхние ступени уходят в белый. Интерполяция в OKLCH или LAB, наоборот, сохраняет видимый след основного тона; используйте программу с поддержкой OKLCH, когда это важно.

Похожи, но не идентичны. Смешивание с белым пропорционально уменьшает и насыщенность, и яркость; регулировка светлоты в HSL повышает L независимо. Оттенки выглядят более естественно (как краска), тогда как светлота HSL может уводить в нереалистичную пастель.

Да, для темного режима обычно требуется другая «лестница яркости», поскольку фон уже темный. Многие системы инвертируют шкалу (50 в темном режиме эквивалентно 900 в светлом режиме для белого на темном).

Создайте 5-ступенчатую лестницу светлых оттенков (50-500) и 5-ступенчатую лестницу тёмных оттенков (500-900) на основе одного и того же цвета. Объедините их, чтобы получить полную шкалу системы дизайна из 10-11 ступеней.

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

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

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

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

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

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

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

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

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

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

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.