Что такое OKLCH и почему следует использовать его вместо HEX или HSL?

OKLCH (Яркость, Насыщенность, Оттенок) — это перцептивно равномерное цветовое пространство, основанное на модели Oklab. В отличие от HEX или HSL, равные числовые изменения в OKLCH дают равные воспринимаемые различия. Это делает его идеальным для разработки доступных цветовых палитр, создания плавных градиентов и генерации согласованных цветовых шкал Tailwind v4. Для дизайнеров и фронтенд-разработчиков, которым необходим точный контроль над восприятием цвета, OKLCH является более современным и научным выбором.

Как конвертировать HEX в OKLCH?

Вставьте ваше значение HEX (например, #3b82f6) в поле ввода HEX, и поле OKLCH мгновенно обновится с эквивалентной нотацией oklch(0.6 0.18 250). Все остальные форматы — OKLab, RGB и HSL — также синхронизируются одновременно, что позволяет легко сравнивать и использовать различные цветовые форматы без дополнительных усилий.

Что означает «за пределами охвата sRGB» и что происходит с цветом?

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

Как работает генератор палитры OKLCH для Tailwind v4?

Генератор использует официальное расписание яркости Tailwind v4 (50=0.971, 100=0.945, вплоть до 950=0.238), применяемое к вашему текущему оттенку и насыщенности. Он производит 11 шагов цвета от светлого к тёмному и экспортирует их в виде блока кода @theme { --color-brand-50: oklch(...); }, готового к вставке в ваш CSS, что значительно упрощает настройку пользовательских тем в Tailwind.

Почему интерполяция OKLCH выглядит лучше, чем HSL для градиентов?

HSL интерполирует в цилиндрической системе координат, которая не соответствует человеческому восприятию, что часто вызывает серые провалы или неожиданные сдвиги оттенка посередине градиента. OKLCH интерполирует в перцептивно равномерном пространстве Oklab, поэтому яркость и насыщенность переходят плавно без неожиданных цветовых искажений. Это особенно заметно в фоновых градиентах, цветовых схемах диаграмм и переходах состояний пользовательского интерфейса.

Этот конвертер OKLCH бесплатный и конфиденциальный?

Да. Инструмент полностью бесплатный и работает целиком в вашем браузере с использованием библиотеки culori. Никакие цветовые значения не отправляются на сервер. Всё вычисление выполняется локально на стороне клиента, поэтому вы можете использовать инструмент безопасно без каких-либо проблем с конфиденциальностью данных, без необходимости создавать аккаунт или устанавливать расширения.

Работает ли OKLCH из CSS Color 4 во всех браузерах?

Синтаксис цвета OKLCH (oklch()) поддерживается во всех современных браузерах с 2023 года, включая Chrome 111+, Firefox 113+, Safari 15.4+ и Edge 111+. Для более старых браузеров используйте резервные значения HEX или RGB, которые предоставляет данный конвертер. Рекомендуется предоставлять оба формата в производственной среде для обеспечения максимальной совместимости.

Инструменты для работы с цветом

Конвертер OKLCH – CSS Color 4, генератор палитры Tailwind v4

Бесплатный конвертер цветов OKLCH с синхронизацией в реальном времени для OKLCH, OKLab, RGB, HSL и HEX. Слайдеры L/C/H/Alpha, маппинг охвата CSS Color 4 и экспорт палитры Tailwind v4.

OKLCH (Яркость, Насыщенность, Оттенок) — это перцептивно равномерное цветовое пространство, основанное на модели Oklab и официально принятое в CSS Color Level 4. В отличие от RGB или HSL, OKLCH сохраняет воспринимаемую яркость неизменной для всех оттенков, что делает его идеальным для создания доступных цветовых систем, палитр Tailwind v4 и плавных градиентов.

Как использовать конвертер цветов OKLCH

1
Введите значение цвета
Введите или вставьте значение в любом поддерживаемом формате: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) или oklab(0.6 -0.056 -0.169). Инструмент мгновенно синхронизирует все остальные форматы.
2
Точная настройка с помощью слайдеров L/C/H/Alpha
Перетаскивайте слайдеры Яркость (L), Насыщенность (C), Оттенок (H) или Alpha. Слайдер насыщенности отображает маркер границы охвата sRGB, чтобы вы всегда знали, когда цвет выходит за пределы стандартного диапазона отображения.
3
Проверьте предупреждение об охвате, если оно появится
Если ваш цвет OKLCH выходит за пределы охвата sRGB, появится предупреждающий баннер янтарного цвета с исходным значением и результатом маппинга toGamut по CSS Color 4, используемым для отображения.
4
Сгенерируйте палитру Tailwind v4
Раздел палитры OKLCH для Tailwind v4 автоматически генерирует шаги цвета от 50 до 950 для вашего текущего оттенка по официальному расписанию яркости Tailwind. Нажмите «Копировать», чтобы вставить блок @theme прямо в ваш CSS.

Источники

W3C CSS Color Level 4 – oklch()
Спецификация W3C, определяющая нотацию цвета OKLCH и алгоритмы маппинга охвата.
Culori – JavaScript-библиотека для работы с цветом
Библиотека с открытым исходным кодом, обеспечивающая конвертацию OKLCH, маппинг toGamut и перцептивную интерполяцию в данном инструменте.
Evil Martians – OKLCH в CSS: зачем отказываться от RGB и HSL?
Исчерпывающее руководство, объясняющее преимущества OKLCH перед RGB и HSL в современной работе с цветом.
Tailwind CSS v4 – Стандартная палитра
Официальная документация цветовой палитры Tailwind, включая значения яркости OKLCH, использованные в данном генераторе палитр.

Часто задаваемые вопросы

Что такое OKLCH и почему следует использовать его вместо HEX или HSL?: OKLCH (Яркость, Насыщенность, Оттенок) — это перцептивно равномерное цветовое пространство, основанное на модели Oklab. В отличие от HEX или HSL, равные числовые изменения в OKLCH дают равные воспринимаемые различия. Это делает его идеальным для разработки доступных цветовых палитр, создания плавных градиентов и генерации согласованных цветовых шкал Tailwind v4. Для дизайнеров и фронтенд-разработчиков, которым необходим точный контроль над восприятием цвета, OKLCH является более современным и научным выбором.
Как конвертировать HEX в OKLCH?: Вставьте ваше значение HEX (например, #3b82f6) в поле ввода HEX, и поле OKLCH мгновенно обновится с эквивалентной нотацией oklch(0.6 0.18 250). Все остальные форматы — OKLab, RGB и HSL — также синхронизируются одновременно, что позволяет легко сравнивать и использовать различные цветовые форматы без дополнительных усилий.
Что означает «за пределами охвата sRGB» и что происходит с цветом?: Некоторые цвета OKLCH — особенно значения с высокой насыщенностью — выходят за пределы цветового пространства sRGB, которое используется большинством дисплеев. Когда это происходит, инструмент применяет алгоритм toGamut из CSS Color 4, чтобы найти ближайший отображаемый цвет sRGB. Появляется баннер предупреждения янтарного цвета с исходным значением за пределами охвата и результатом маппинга, обеспечивая полную прозрачность о том, какие корректировки были внесены в цвет.
Как работает генератор палитры OKLCH для Tailwind v4?: Генератор использует официальное расписание яркости Tailwind v4 (50=0.971, 100=0.945, вплоть до 950=0.238), применяемое к вашему текущему оттенку и насыщенности. Он производит 11 шагов цвета от светлого к тёмному и экспортирует их в виде блока кода @theme { --color-brand-50: oklch(...); }, готового к вставке в ваш CSS, что значительно упрощает настройку пользовательских тем в Tailwind.
Почему интерполяция OKLCH выглядит лучше, чем HSL для градиентов?: HSL интерполирует в цилиндрической системе координат, которая не соответствует человеческому восприятию, что часто вызывает серые провалы или неожиданные сдвиги оттенка посередине градиента. OKLCH интерполирует в перцептивно равномерном пространстве Oklab, поэтому яркость и насыщенность переходят плавно без неожиданных цветовых искажений. Это особенно заметно в фоновых градиентах, цветовых схемах диаграмм и переходах состояний пользовательского интерфейса.
Этот конвертер OKLCH бесплатный и конфиденциальный?: Да. Инструмент полностью бесплатный и работает целиком в вашем браузере с использованием библиотеки culori. Никакие цветовые значения не отправляются на сервер. Всё вычисление выполняется локально на стороне клиента, поэтому вы можете использовать инструмент безопасно без каких-либо проблем с конфиденциальностью данных, без необходимости создавать аккаунт или устанавливать расширения.
Работает ли OKLCH из CSS Color 4 во всех браузерах?: Синтаксис цвета OKLCH (oklch()) поддерживается во всех современных браузерах с 2023 года, включая Chrome 111+, Firefox 113+, Safari 15.4+ и Edge 111+. Для более старых браузеров используйте резервные значения HEX или RGB, которые предоставляет данный конвертер. Рекомендуется предоставлять оба формата в производственной среде для обеспечения максимальной совместимости.

Как использовать конвертер цветов OKLCH

Источники

Похожие инструменты

Часто задаваемые вопросы