CSS Бесплатно, без регистрации

Генератор OKLCH и палитр CSS Color 4

В старом HSL жёлтый цвет кажется ослепительно белым, а синий — тёмным при одинаковой яркости 50%? Стандарт CSS oklch() основан на биологии человеческого глаза: одинаковый Lightness гарантирует идентичную читаемость текста во всех оттенках и открывает сверхсочные цвета экранов Display P3.

Результат

Готовый CSS-код

:root {
  --brand-color: oklch(65% 0.22 145);
  --brand-light: oklch(92% 0.06 145);
  --brand-dark:  oklch(35% 0.16 145);
}

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

Выберите готовый сочный пресет (Электрик-фиолет, Кибер-неон, Изумруд, Солнечный янтарь, Морской бриз).
Настройте Lightness (Яркость), Chroma (Насыщенность) и Hue (Цветовой тон) ползунками.
Используйте автоматически сгенерированную шкалу оттенков дизайн-системы (от светлого фона к тёмному тексту).
Скопируйте готовый CSS: код oklch() и безопасный HEX-фолбэк для старых браузеров.

Как это работает

Почему OKLCH превосходит HEX, RGB и HSL?

OKLCH — перцептивно равномерное цветовое пространство (Perceptually Uniform). В HSL одинаковая светлота 50% даёт колоссальный разброс реальной видимой яркости, что ломает контрастность текста и кнопок. В OKLCH светлота L = 0.7 воспринимается глазом абсолютно одинаково независимо от того, выбран зелёный, фиолетовый или жёлтый оттенок.

Display P3: сочные цвета, недоступные в sRGB

Традиционные HEX и RGB ограничены 30-летним стандартом sRGB. Современные экраны iPhone, Mac и флагманских Android показывают на 25% больше цветов. OKLCH позволяет использовать эти сочные глубокие оттенки в веб-дизайне без искажений.

/* Сверхнасыщенный неон, недостижимый в классическом HEX sRGB */
.hero-badge {
  background: oklch(70% 0.28 340);
}

Идеально для переменных и дизайн-систем

С OKLCH генерация тёмной темы или палитры кнопок сводится к простой смене Lightness: вы сохраняете точный оттенок бренда (Hue) и насыщенность (Chroma), получая идеальные hover-состояния и рамки.

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

Поддерживается ли OKLCH современными браузерами?

Да, поддержка есть во всех браузерах: Chrome 111+, Safari 15.4+, Firefox 113+, Edge 111+ (глобальный охват превышает 93%).

Что означает Chroma в OKLCH?

Chroma (хрома) — это интенсивность цвета. При значении 0 цвет становится серым, диапазон 0.1–0.18 даёт естественные цвета интерфейса, а 0.22+ создаёт яркие неоновые акценты.

Как обеспечить обратную совместимость?

Браузеры поддерживают естественный фолбэк: первой строкой пишется background: #4f46e5;, второй — background: oklch(...);. Старый браузер проигнорирует непонятную строку и применит HEX.

Эта тема в курсе HTML и CSS

Другие CSS-инструменты