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

Как пользоваться генератором палитры

1. Нажмите «Новая палитра» (или пробел на клавиатуре) — появятся пять цветов, подобранных по правилу цветовой гармонии. Каждое нажатие даёт новую случайную палитру.
2. Закрепите понравившиеся цвета замком под образцом. Закреплённые цвета остаются на месте, а остальные меняются; в случайном режиме первый закреплённый цвет становится опорным, и новые цвета подбираются под него.
3. Начните со своего цвета: переключите «Начать с» на «Мой базовый цвет» и выберите его — например, фирменный цвет. Тогда в каждой палитре будет ровно этот цвет.
4. Выберите гармонию (аналоговая, монохромная, комплементарная, расщеплённо-комплементарная, триада, тетрада или светлые и тёмные оттенки) или оставьте «Любая», чтобы она менялась каждый раз.
5. Подправьте цвет карандашом — откроется выбор цвета вашего устройства; изменённый цвет закрепляется автоматически.
6. Возьмите цвета с фотографии: нажмите «Цвета с изображения», перетащите файл на инструмент или вставьте скриншот. Пять основных цветов изображения будут найдены и закреплены.
7. Копируйте и экспортируйте: нажмите на код, чтобы скопировать его, переключайте HEX, RGB, HSL и OKLCH, копируйте всю палитру как CSS-переменные или JSON или скачайте PNG с пятью образцами. «Скопировать ссылку» даёт адрес, который открывает ровно эту палитру.

Всё работает в браузере. Загруженное изображение читается на вашем устройстве, уменьшается до 100 пикселей по длинной стороне и анализируется там же; на сервер оно не отправляется.

Почему палитры строятся в OKLCH

Привычные цветовые круги — HSL в CSS, HSV/HSB в графических редакторах — лишь перестановка красного, зелёного и синего каналов, а не модель того, как видит человек. При одинаковой светлоте HSL 50 % чистый жёлтый кажется гораздо светлее чистого синего, поэтому палитра, построенная поворотом тона в HSL, прыгает от кричащих цветов к блёклым. Этот генератор работает в OKLCH — полярной форме OKLab, перцептивного цветового пространства, которое Бьёрн Оттоссон (Björn Ottosson) опубликовал в 2020 году и которое вошло в CSS Color Module Level 4 как функция oklch(). Три числа: L — воспринимаемая светлота (0–100 %), C — хрома, то есть насыщенность (0 — серый, цвета sRGB доходят примерно до 0,32), и H — угол цветового тона в градусах. Одинаковые шаги по L выглядят одинаковыми шагами яркости при любом тоне.

Перевод цвета идёт в три шага: снимается гамма-кривая sRGB, чтобы получить линейный свет, значения умножаются на фиксированную матрицу и из них извлекается кубический корень, затем вторая матрица даёт L, a и b. Хрома равна √(a² + b²), тон — atan2(b, a). Эталонные значения этого инструмента совпадают с опубликованными:

Не каждый цвет OKLCH можно показать на экране. Если задуманный цвет выходит за охват sRGB, генератор сохраняет его светлоту и тон и уменьшает хрому, пока цвет не поместится, — та же идея, что и в отображении охвата в CSS Color 4. Поэтому тон в палитре никогда не съезжает из-за обрезки цвета.

Как строится палитра

Каждая палитра начинается с опорного цвета: вашего базового цвета, первого закреплённого или случайного цвета со светлотой от 45 до 80 % и умеренной хромой. Остальные четыре цвета получают тона выбранной гармонии и уровни светлоты, разнесённые от 30 до 90 % (ближайший к опорному цвету уровень пропускается, так что каждый цвет отличается от него по светлоте). Хрома меняется в пределах 30 % от хромы опорного цвета и уменьшается у очень светлых и очень тёмных цветов, которые при полной насыщенности выглядят кричаще. Все решения задаёт одно случайное число, которое выбирается при каждом нажатии «Новая палитра», и одно и то же число всегда даёт одну и ту же палитру — поэтому скопированная ссылка точно воспроизводит ваши цвета.

Углы отсчитываются на круге OKLCH, поэтому дополнительный цвет может отличаться от того, что показывает круг HSL или художественный круг Иттена (красный — жёлтый — синий): для тёмно-синего #1f4e79 (тон 249°) дополнительный в OKLCH — тёплый оливково-оранжевый тон около 69°.

Пример: триада от #1f4e79

С базовым цветом #1f4e79 (светлота OKLCH 41,4 %, хрома 0,088, тон 249,1°) и гармонией «Триада» начальное случайное число страницы даёт такие цвета. Тона лежат около 249°, 9° и 129° — через 120° друг от друга, — а светлота меняется от 28,7 до 92,9 %:

Столбцы контраста показывают, какой текст подойдёт к каждому цвету. На тёмном бордовом белый текст даёт 14,66:1, на бледно-розовом чёрный текст — 16,79:1, а средний зелёный с белым текстом достигает лишь 3,64:1: годится для крупных заголовков, но мало для основного текста.

Контраст и доступность

На каждом образце указан лучший из двух вариантов — белый или чёрный текст — с коэффициентом и уровнем, а таблица под палитрой показывает оба. Расчёт следует Руководству по доступности веб-контента (WCAG) 2.2 консорциума W3C (российский ГОСТ Р 52872-2019 основан на предыдущей версии 2.1 с теми же порогами): относительная яркость равна 0,2126 R + 0,7152 G + 0,0722 B линеаризованных каналов, а коэффициент контраста — (светлее + 0,05) / (темнее + 0,05), от 1:1 до 21:1. Обычному тексту нужно 4,5:1 для уровня AA и 7:1 для AAA; крупному (24 px или 18,7 px полужирным) — 3:1 для AA. Коэффициенты отбрасываются, а не округляются, до двух знаков после запятой, поэтому цвет никогда не показан прошедшим проверку, если он её не проходит.

Советы по использованию палитры

• Дайте каждому цвету роль. Распространённое деление — 60 % на фон или основной цвет, 30 % на дополнительный и 10 % на акцент; самый тёмный цвет часто подходит для текста.
• Проверьте текст, прежде чем решать. Таблица контраста сразу покажет, какие пары проходят по WCAG.
• Не полагайтесь только на тон. Около 8 % мужчин различают красный и зелёный хуже обычного; меняйте и светлоту.
• Используйте экспорт CSS как основу для дизайн-токенов: переименуйте --color-1 и остальные в роли вроде --brand или --surface.

Частые вопросы

Обновлено: 15 октября 2026 г.