Собрал бесплатный генератор OKLCH-палитр: выбрал цвета — скачал готовый CSS
Если делаете сайт или игру, здесь можно собрать гармоничную палитру, проверить светлоту и скачать готовый CSS. Без регистрации и ручного копирования каждого цвета.
Обычно после выбора палитры начинается рутина: перенести оттенки, придумать имена переменных и проверить, одинаково ли они выглядят в браузерах. Я убрал этот этап — генератор сам создаёт файл, который можно сразу подключить к проекту.
Как это работает: выберите от 2 до 9 цветов, проверьте палитру на графике и небольших сценах, затем нажмите Export → CSS.
На выходе получится обычный .css с понятными переменными:
:root { --palette-1-shadow: #160067; --palette-2-base: #5B21B6; --palette-3-highlight: #AB7CE1; --palette-4-accent: #4DCD49; }
@supports (color: oklch(50% 0 0)) { :root { --palette-1-shadow: oklch(25.12% 0.1510 280.34); --palette-2-base: oklch(43.22% 0.1960 293.54); --palette-3-highlight: oklch(67.40% 0.1180 301.12); --palette-4-accent: oklch(74.82% 0.1880 142.28); } }
Зачем внутри два формата? HEX служит надёжным запасным вариантом, а браузеры с поддержкой OKLCH получают более точные исходные цвета через @supports. Поэтому палитра не пропадёт в старом браузере и не изменится относительно предпросмотра.
Подключили файл — и используете переменные в стилях:
.button { color: var(--palette-3-highlight); background: var(--palette-2-base); border-color: var(--palette-4-accent); }
Что ещё умеет генератор
- создаёт палитры из 2–9 цветов;
- поддерживает complementary, split-complementary, analogous, triadic, tetradic и monochromatic гармонии;
- подгоняет цвета под sRGB, чтобы экспорт не отличался от предпросмотра;
- показывает ступени светлоты OKLCH и предупреждает о слабом контрасте;
- примеряет цвета к небольшим пиксельным сценам;
- экспортирует PNG, GIMP GPL, JASC PAL для Aseprite, HEX, TXT и JSON;
- работает без аккаунта, а текущая палитра хранится в браузере.
Текущая палитра хранится прямо в браузере, поэтому аккаунт не нужен. Сервис бесплатный: можно открыть генератор и сразу проверить его на своём цвете.
Открыть генератор: https://oklchpalette.ru/create
Все форматы и примеры: https://oklchpalette.ru/guides/palette-file-formats
Исходный код: https://github.com/vansGAMee/OKLCH-PIXEL-PALETTE
Если попробуете, напишите, чего не хватает именно вам: Tailwind theme, Sass map или экспорт для Godot. Следующим сделаю то, что чаще назовут.