Понятные дизайн-токены
У каждой ступени есть роль и стабильное имя CSS-переменной. Свет, база и тень переходят из исследования в компонент без ручной переписи.
Бесплатный браузерный инструмент
Генератор оттенков цвета для света и toon-теней
Создайте палитру из пяти, семи или девяти ступеней по одному базовому цвету. Сравните классическую шкалу с выразительным toon-затемнением и скопируйте готовые значения без загрузки файлов.
Обновлено 23 июля 2026 года
генератор оттенков цвета
Что создаёт этот генератор оттенков?
Генератор превращает корректный трёх- или шестизначный HEX в центрированную шкалу и точно сохраняет исходный цвет. Классический режим смешивает с белым для светлых оттенков и с чёрным для теней. Toon-режим вместе меняет тон, насыщенность и яркость, создавая более тёплый свет и холодную тень. Для каждого результата показаны HEX, RGB, HSB, контраст с белым и чёрным, копирование, CSS-свойства и локально созданный PNG.
Один базовый цвет — три полезных результата
Используйте шкалу как систему с назначениями, а не безымянный декоративный ряд.
Видимая проверка контраста
У каждого цвета указаны отношения с белым и чёрным текстом. Метки AA обычный, AA крупный и ниже AA помогают сделать первый выбор до полной проверки.
Тени для мультяшной графики
Toon-режим немного сдвигает тон при осветлении и затемнении. Это живой старт для персонажей, игровых интерфейсов, значков и плоских иллюстраций.
HEX · RGB · HSB · WCAG
Создайте шкалу от света до тени
Выберите базовый цвет, метод и число ступеней. Палитра сразу обновится в браузере.
Свет 3#D1EFF6
RGB 209, 239, 246
HSB 191°, 15%, 96%
- Белый текст
- 1.21:1Ниже AA
- Чёрный текст
- 17.39:1AA обычный
--toon-shade-01Свет 2#9FDEED
RGB 159, 222, 237
HSB 192°, 33%, 93%
- Белый текст
- 1.48:1Ниже AA
- Чёрный текст
- 14.15:1AA обычный
--toon-shade-02Свет 1#6ACCE3
RGB 106, 204, 227
HSB 191°, 53%, 89%
- Белый текст
- 1.85:1Ниже AA
- Чёрный текст
- 11.36:1AA обычный
--toon-shade-03База#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
- Белый текст
- 2.34:1Ниже AA
- Чёрный текст
- 8.97:1AA обычный
--toon-shade-04Тень 1#22869E
RGB 34, 134, 158
HSB 192°, 78%, 62%
- Белый текст
- 4.22:1AA крупный
- Чёрный текст
- 4.97:1AA обычный
--toon-shade-05Тень 2#175A6A
RGB 23, 90, 106
HSB 192°, 78%, 42%
- Белый текст
- 7.76:1AA обычный
- Чёрный текст
- 2.71:1Ниже AA
--toon-shade-06Тень 3#0C3038
RGB 12, 48, 56
HSB 191°, 79%, 22%
- Белый текст
- 14.04:1AA обычный
- Чёрный текст
- 1.50:1Ниже AA
--toon-shade-07:root {
--toon-shade-01: #D1EFF6;
--toon-shade-02: #9FDEED;
--toon-shade-03: #6ACCE3;
--toon-shade-04: #2FB8D8;
--toon-shade-05: #22869E;
--toon-shade-06: #175A6A;
--toon-shade-07: #0C3038;
--toon-shade-base: var(--toon-shade-04);
}Как создать полезные оттенки
Шкала пригодна для повторного использования, когда источник, интервал и назначение указаны явно. Повторяйте этот короткий процесс при каждом изменении.
1. Начните с надёжного HEX
Берите значение из дизайн-файла, бренд-токена или проверенного образца, а не угадывайте по сжатому скриншоту. Генератор сохраняет HEX точно в центре, поэтому происхождение соседних ступеней остаётся понятным.
2. Выберите метод под задачу
Классика предсказуема для фонов, границ, диаграмм и состояний. Toon — художественная эвристика для света и тени. Сравните оба и оставьте простой вариант, если сдвиг тона не улучшает иерархию.
3. Проверьте контраст в контексте
Отношения служат быстрым фильтром. До публикации проверьте реальный размер и насыщенность шрифта, соседний цвет, фокус и интерактивное состояние. Прошедший образец не делает автоматически доступным весь компонент.
Классические и toon-оттенки
Оба метода удерживают базу в центре, но используют разные преобразования и решают разные задачи.
| Метод | Изменение | Лучшее применение | Ограничение |
|---|---|---|---|
| Классика | Линейное смешивание RGB к белому или чёрному | Поверхности UI, границы, диаграммы, токены | Середина может казаться серой и механической |
| Toon | Кривая HSB с малым сдвигом тона и насыщенности | Персонажи, игровые UI, стикеры, плоская графика | Творческий старт, а не официальная палитра бренда |
| Контраст | Относительная яркость WCAG с чистым белым и чёрным | Первичный выбор текста на каждом цвете | Нужна проверка реального шрифта, размера и состояния |
Как рассчитывается шкала
Нечётное число создаёт точный центр. Пять ступеней дают два светлых цвета, исходную базу и два тёмных; семь и девять добавляют более мелкие интервалы с обеих сторон. Классические светлые оттенки приближают каналы RGB к 255, тени — к нулю. Крайние значения останавливаются до чистого белого и чёрного, сохраняя цветовую идентичность. База не пересчитывается, поэтому её HEX, RGB и HSB остаются точными.
Toon следует другой кривой. Свет получает яркость, немного теряет насыщенность и сдвигается на несколько градусов в тёплую сторону. Тени теряют яркость, немного усиливают насыщенность и движутся в обратную сторону. Изменение растёт с расстоянием от центра. Это прозрачная дизайнерская эвристика, не физическая модель света. Материал, окружение, отражения и композиция могут требовать другого направления, поэтому результат — редактируемый черновик.
Светлый оттенок, тон и тень — не одно
В традиционной терминологии tint получают добавлением белого, shade — добавлением чёрного, а tone обычно означает добавление серого, уменьшающего интенсивность. Цифровые инструменты часто называют shade любую светлую или тёмную вариацию, размывая определения. Здесь светлая сторона названа светом, тёмная — тенью, а между ними находится база. Классический метод не создаёт отдельный серый ряд тонов.
Различие важно при передаче палитры. «Тень 2» воспроизводима, если сохранены метод, база и число ступеней; «сделать немного темнее» — нет. Копируйте весь блок CSS, когда проекту нужны постоянные имена. Если для hover или отключённого состояния требуется менее насыщенный цвет, создайте его намеренно в HSB-палитре, а не считайте любой центр бело-чёрной шкалы подходящим тоном.
Цветные toon-тени без грязи
Частая ошибка — одинаково уменьшать все каналы RGB, пока тень не выглядит почерневшей. Объект технически остаётся в той же цветовой семье, но теряет энергию рисунка. Небольшие сдвиги тона и насыщенности сохраняют цвет в тёмных областях. Toon-режим показывает этот приём сдержанной кривой, придавая свету и глубокой тени разный характер и сохраняя удобное сравнение соседних ступеней.
Для плоской графики используйте меньше ступеней. Пять цветов часто покрывают блик, свет, базу, тень и глубокую тень; девять подходят для UI-токенов и более плавного рендера. Не используйте всё только потому, что цвета созданы. Выберите минимальные роли, видимые в композиции, назовите их по назначению и проверьте в реальном размере. Различия больших образцов могут исчезнуть на маленькой иконке.
Как читать контраст WCAG
Число сравнивает относительную яркость оттенка с чистым белым или чёрным. WCAG 2.2 уровня AA требует минимум 4.5:1 для обычного текста и 3:1 для крупного; улучшенный критерий использует 7:1 для обычного. Метки быстро отбрасывают слабую пару, но инструмент не знает размер, толщину, прозрачность, градиент, фоновое изображение, hover и фокус готового продукта.
Более контрастный передний план — только начальная рекомендация. Тестируйте настоящие компоненты при обычном масштабе и включайте нетекстовые элементы управления, когда это нужно. Яркость HSB не равна яркости WCAG: два цвета с одинаковым B могут иметь совершенно разное отношение, потому что красный, зелёный и синий по-разному влияют на воспринимаемую яркость.
Превращение шкалы в поддерживаемые токены
Скопированный CSS содержит нумерованные свойства от светлого к тёмному и псевдоним базы. Переименуйте их по системе: surface-accent, badge-hover или character-shadow. Семантические имена лучше переживают смену палитры, чем названия внешнего вида. Сохраните исходный HEX, метод, число ступеней и дату, чтобы другой дизайнер воспроизвёл решение, а не снимал цвет со скриншота.
До выпуска проверьте светлую и тёмную темы, типичные дисплеи и соседние цвета. PNG удобен для обсуждения и передачи, но текстовые значения должны оставаться источником реализации: изображение может быть сжато или иначе обработано. Если соседние ступени неразличимы в реальном применении, удалите одну или увеличьте интервал. Компактная документированная палитра проще в поддержке.
Стандарты, измерения и метод
Генератор отделяет воспроизводимый расчёт от творческого решения. Эти первичные источники объясняют форматы, термины и пороги.
- CSS Color Module Level 4 определяет шестизначный HEX как три 8-битных канала sRGB. В каждом 256 значений, что даёт 16 777 216 сочетаний RGB до альфа-канала. W3C CSS Color Module Level 4
- WCAG 2.2 задаёт 4.5:1 для обычного и 3:1 для крупного текста на уровне AA; улучшенный критерий использует 7:1 для обычного текста. Рекомендации W3C WCAG 2.2
- Классическая шкала — воспроизводимая интерполяция RGB. Toon — эвристика Toon Tone, а не модель света, официальная бренд-палитра или полное доказательство доступности. Справка W3C по теории цвета
WCAG 2.2 говорит:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Продолжить работу с палитрой
Вопросы о генераторе оттенков
Чем светлый оттенок отличается от тени?
Tint смешивает цвет с белым, shade — с чёрным. Tone обычно добавляет серый. Инструмент ставит светлые варианты до точной базы, а тени после неё.
Сохраняется ли исходный HEX?
Да. Трёхзначный HEX разворачивается в шесть цифр, и нормализованное значение точно остаётся в центре шкалы из пяти, семи или девяти ступеней.
Какой режим выбрать для интерфейса?
Начните с Классики для предсказуемых поверхностей, границ и состояний. Попробуйте Toon, если игре или иллюстрации нужны тёплые блики и холодные насыщенные тени.
Метки WCAG гарантируют доступность?
Нет. Они рассчитывают только отношение к чистому белому или чёрному. Проверяйте реальные фон, текст, размер, толщину, состояния и весь компонент.
Цвета загружаются или сохраняются?
Нет. Генерация, копирование, контраст и PNG работают в браузере без аккаунта. Файл создаётся локально на вашем устройстве.