Генератор цветовых схем

Один базовый цвет на входе — объяснимая схема и её шкала светлоты на одном экране, готовые к копированию.

Базовый цвет

Принимает #RGB, #RRGGBB, rgb(), hsl() и английские названия цветов CSS. Пусто = цвет по умолчанию #4F46E5.

HEXRGBHSL

Схема

Шкала светлотыТот же оттенок и насыщенность, что у базового цвета, светлота 88 / 70 / 52 / 34 / 18%

Как пользоваться

Схема и шкала светлоты уже на экране при открытии страницы — они построены из базового цвета по умолчанию #4F46E5, для первого результата кликать не нужно.
Сделайте цвет своим: вставьте #4F46E5, rgb(79, 70, 229), hsl(243, 75%, 59%) или английское название цвета CSS, воспользуйтесь системной палитрой или нажмите «Случайный базовый». Всё пересчитывается по мере ввода.
Выберите, как связаны оттенки. Аналогичная (0°, ±30°, ±60°) остаётся по соседству; комплементарная (0°, 180°) — прямая противоположность; триада (0°, 120°, 240°) и тетрада (0°, 90°, 180°, 270°) расширяют разброс; сплит-комплементарная (0°, 150°, 210°) сохраняет напряжение без столкновения. Шкала всегда строится из базового цвета со светлотой 88 / 70 / 52 / 34 / 18%, поэтому «более светлая или тёмная версия моего основного цвета» в одном нажатии.
Нажмите на любой образец, чтобы скопировать его значение в выбранном формате; «Копировать CSS» даёт весь набор как пользовательские свойства в :root, «Копировать значения» — по одному значению в строке.

Пример

Настройки

Базовый #4F46E5 · правило «Аналогичная» · формат HEX

Результат (одинаковый на любом устройстве)

Схема: #46DCE5 #468CE5 #4F46E5 #9F46E5 #E546DC
Шкала: #CCC9F7 #7F79EC #3328E1 #1D1598 #0F0B50

В отличие от инструмента «случайная палитра», этот результат детерминирован: один и тот же базовый цвет и правило дают одинаковые значения везде, поэтому можно проверить форму — у каждого цвета схемы насыщенность и светлота базового цвета, а меняется только оттенок (здесь шагами по 30°), и пять цветов шкалы имеют оттенок и насыщенность базового при светлоте 88, 70, 52, 34 и 18%. Текст на каждом образце автоматически чёрный или белый — какой читается лучше.

Область применения, ограничения и частые вопросы

Пять правил, без своих углов и цветового круга: если нужен точный оттенок, задайте базовый цвет или используйте конвертер цветов.
Шкала использует фиксированные шаги светлоты (88 / 70 / 52 / 34 / 18%), а не «на 25% ближе к белому или чёрному от вашего цвета». Так лестница сравнима между разными базовыми цветами, но у очень светлого или очень тёмного базового шаги почти не будут от него отличаться.
Серый, белый или чёрный базовый цвет даёт полностью одинаковую схему: поворот оттенка у полностью обесцвеченного цвета ничего не меняет. Это честная арифметика, а не ошибка.
Только непрозрачные цвета: без alpha, rgba() и 8-значного HEX. Прозрачность относится к конвертеру цветов.
Только значения sRGB для экрана: без CMYK, Lab и управления цветом — один и тот же HEX действительно выглядит иначе на некалиброванных дисплеях, и инструмент этого не скрывает.
Контраст используется только для выбора, чёрным или белым писать значение на образце. Коэффициенты контраста не выводятся; для проверки доступности используйте конвертер цветов.
Геометрия гарантирует соотношения оттенков, а не эстетику: комплементарная пара при высокой насыщенности тоже может быть кричащей. Это и означает правило.
«Случайный базовый» берёт значения из crypto.getRandomValues браузера — криптографически стойкий, но не физический источник энтропии — и недоступен, если браузер такого источника не даёт. Всё остальное продолжает работать.
Ничего не загружается, не сохраняется и не попадает в URL: перезагрузка возвращает #4F46E5 + «Аналогичная» + HEX, а кнопка «Поделиться» делится только ссылкой на страницу. Забирайте схему через «Копировать CSS».
Английские названия цветов CSS принимаются на вход, потому что это синтаксис CSS; локализованного вывода названий нет — у одного и того же цвета нет стандартного русского названия для печати.
Округление только на уровне отображения: каналы целые, поэтому перевод одного и того же цвета между HEX и HSL может сдвинуть канал на 1.

Куда обычно идут, когда схема выбрана.