Генератор оттенков цвета
Превратите один базовый цвет HEX в шкалу OKLCH, HSL или RGB с настраиваемыми ступенями, подсказками контраста WCAG на каждой ступени и экспортом в CSS, Tailwind и JSON.
Генератор оттенков цвета — Введите один базовый цвет в HEX и мгновенно постройте полную шкалу с перцептивно равномерной интерполяцией в OKLCH или HSL — стабильный оттенок при равномерно распределённой светлоте — либо классическим линейным смешиванием RGB, с любым числом ступеней. Смещайте оттенок и масштабируйте насыщенность, читайте на каждой ступени подсказку контраста WCAG, показывающую, какие оттенки остаются читаемыми как текст на белом и на чёрном, и копируйте всю шкалу как пользовательские свойства CSS, конфигурацию цвета Tailwind или JSON. Всё выполняется полностью в вашем браузере; ни один цвет никогда не отправляется на сервер.
Что такое Генератор оттенков цвета?
Генератор оттенков цвета превращает один базовый цвет HEX в полную шкалу светлых и тёмных оттенков, готовую для дизайн-системы. Вместо смешивания только линейно в RGB он может интерполировать в OKLCH или HSL, так что оттенок остаётся стабильным, а светлота распределяется равномерно, давая перцептивно сбалансированную шкалу без грязных или выцветших ступеней. Вы выбираете, сколько ступеней создаётся — от 2 до 24 или собственный список меток через запятую —, смещаете оттенок или масштабируете насыщенность и читаете на каждой ступени подсказку контраста WCAG, показывающую, какие оттенки подходят как текст на белом и на чёрном. Готовая шкала копируется как пользовательские свойства CSS, объект конфигурации цвета Tailwind или JSON одним щелчком.
Как пользоваться Генератор оттенков цвета
- Введите базовый цвет в поле Базовый цвет (HEX) в формате #rrggbb или #rgb либо нажмите на крупный образец, чтобы выбрать его визуально.
- Выберите цветовое пространство: OKLCH или HSL для перцептивно равномерной шкалы со стабильным оттенком либо RGB для классического линейного смешивания.
- Задайте нужное число ступеней (2–24) или откройте Настройки, чтобы ввести собственный список ступеней через запятую, сместить оттенок, масштабировать насыщенность и задать имя цвета для экспорта.
- Читайте в каждой строке две ячейки контраста — букву A на белом и на чёрном —, которые подсвечиваются, когда оттенок достигает WCAG AA для текста.
- Скопируйте HEX одной ступени или всю шкалу как переменные CSS, конфигурацию Tailwind или JSON с помощью кнопок копирования.
Примеры
Равномерная шкала OKLCH из фирменного синего
Выберите OKLCH и оставьте 11 ступеней: шкала 50–950 распределяет светлоту равномерно, сохраняя синий оттенок, поэтому ни одна ступень не выглядит грязной или выцветшей, как это бывает при линейном смешивании RGB.
Своя конфигурация Tailwind из пяти ступеней
Введите 100, 300, 500, 700, 900 как собственный список ступеней, чтобы получить всего пять образцов, затем скопируйте их как объект цвета Tailwind с этими метками в качестве ключей или как переменные CSS и JSON.
Часто задаваемые вопросы
- В чём разница между вариантами RGB, HSL и OKLCH?
- RGB смешивает ваш цвет линейно к белому и чёрному — это быстро, но в средних тонах может выглядеть неравномерно. HSL и OKLCH, наоборот, сохраняют оттенок стабильным и распределяют светлоту равномерно; OKLCH перцептивно однороден, поэтому каждая ступень выглядит как одинаковый скачок яркости. Для самой сбалансированной шкалы выбирайте OKLCH.
- Сколько оттенков можно создать и можно ли их именовать?
- Задайте любое число ступеней от 2 до 24. Значение 11 использует привычную нумерацию Tailwind (50, 100…900, 950); другие значения равномерно распределяются от 50 до 950. В Настройках также можно ввести собственный список меток через запятую, который переопределяет число ступеней и именует каждую ступень ровно так, как вы её напишете.
- Как рассчитывается подсказка контраста WCAG?
- Для каждого оттенка инструмент вычисляет коэффициент контраста WCAG относительно чистого белого и чистого чёрного по относительной яркости. Две маленькие ячейки в каждой строке показывают букву A на белом и на чёрном и подсвечиваются, когда коэффициент достигает 4,5:1 (AA для обычного текста); наведите курсор, чтобы увидеть точный коэффициент и является ли он AA или AAA.
- Загружаются ли мои данные о цвете куда-либо?
- Нет. Расчёты цвета, проверки контраста и все три экспорта выполняются полностью в вашем браузере, поэтому ни одно значение цвета не отправляется на сервер. Инструмент работает офлайн и сохраняет вашу палитру конфиденциальной.
Похожие инструменты
Код в изображение
Превратите фрагмент кода в изображение с подсветкой синтаксиса прямо в браузере — с более чем 20 языками, своими темами и фонами, номерами строк и экспортом в PNG или SVG.
Проверка цветового контраста
Проверьте контраст WCAG 2.1 и оценку APCA Lc между цветом текста и фона, посмотрите значки AA, AAA и 3:1 и примените ближайший проходящий цвет.
Смеситель цветов
Смешивайте два HEX-цвета в выбранной пропорции в цветовом пространстве RGB или Lab и считывайте полученный промежуточный цвет в виде образца и копируемого HEX-значения.
Симулятор дальтонизма
Загрузите изображение и посмотрите, как оно выглядит при протанопии, дейтеранопии, тританопии или полной цветовой слепоте, а затем скачайте смоделированный результат.