Конвертер HEX в OKLCH

Что такое конвертер HEX в OKLCH?

// sRGB hex → OKLCH per W3C CSS Color 4 + Ottosson 2020
// References: https://www.w3.org/TR/css-color-4/#color-conversion-code
//             https://bottosson.github.io/posts/oklab/
// Worked example: #3b82f6 (Tailwind blue-500) → oklch(0.629 0.193 263.4)
function hexToOklch(hex) {
  const h = hex.trim().replace(/^#/, '');
  const srgb = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  // sRGB → linear-sRGB (CSS Color 4 §11.2 piecewise gamma)
  const lin = srgb.map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  const [lr, lg, lb] = lin;
  // linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
  const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
  const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
  const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;
  // XYZ D65 → LMS (Ottosson 2020), cube-root, → OKLAB
  const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
  const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
  const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
  const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
  // OKLAB → OKLCH (Cartesian to polar)
  const C = Math.sqrt(a * a + b * b);
  const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
}
console.log(hexToOklch('#3b82f6')); // → oklch(0.629 0.193 263.4)

Ключевые возможности

Альтернативы конвертеру HEX в OKLCH

Примеры HEX в OKLCH

#3b82f6

#FF5733

#FF1744

#0f172a

#3b82f6

Распространённые конвертации HEX → OKLCH (Tailwind v4)

Справочная таблица 10 популярных средних оттенков из палитры по умолчанию Tailwind v4 с их HEX и OKLCH эквивалентами. Значения соответствуют опубликованной точности палитры Tailwind v4 (три знака после запятой для L и C, целое или один знак после запятой для H).

Как пользоваться конвертером HEX в OKLCH

1. 1

   Вставьте HEX-код в поле HEX

   Бросьте любое HEX-значение во ввод HEX — с ведущим `#` или без, в 3-значном сокращении (`#F73`), 6-значной полной форме (`#3b82f6`), 4-значном альфа-сокращении (`#F738`) или 8-значной альфа-полной форме (`#FF573380`). Парсер нормализует все пять входных форм в один и тот же внутренний цвет перед выводом OKLCH. Регистр не имеет значения (`#3b82f6` и `#3B82F6` парсятся идентично). Невалидные символы или неверное число цифр дают тихую инлайн-ошибку; валидный HEX обновляет все остальные поля форматов в реальном времени, включая OKLCH.

2. 2

   Считайте тройку OKLCH из поля OKLCH

   Поле OKLCH поднимает значение в современной форме из CSS Color 4: `oklch(0.629 0.193 263.4)` для непрозрачного цвета, `oklch(0.629 0.193 263.4 / 0.5)` для цвета с альфой. L округляется до трёх знаков после запятой (совпадает с опубликованной точностью Tailwind v4), C — до трёх знаков, H — до одного знака после запятой в градусах. Внутренний OKLCH как источник истины в инструменте означает, что точность float сохраняется по всем остальным полям — переходы туда-обратно обратно в HEX остаются бит-стабильными, в отличие от legacy-конвертеров, маршрутизирующих через HSL, которые дрейфят на градус-другой за каждый цикл.

3. 3

   Нажмите Copy, чтобы получить строку OKLCH

   У каждой карточки формата есть кнопка Copy справа. Один клик — и значение оказывается в буфере обмена; метка кнопки кратко переключается на «Copied!», чтобы вы знали. Скопированная строка — это канонический синтаксис CSS Color 4 (`oklch(0.629 0.193 263.4)`), готовый к вставке в блок `@theme` Tailwind v4 или определение CSS-переменной shadcn/ui. Для платформенно-специфического вывода (CSS custom property, токен Tailwind v4, SwiftUI, Compose, Flutter) используйте раздел Copy as code под пипеткой — эти сниппеты выдают формат, который каждая платформа ожидает нативно.

4. 4

   Проверьте бейджи цветового охвата Display P3 / Rec.2020

   Три бейджа цветового охвата (sRGB, Display P3, Rec.2020) показывают, попадает ли текущий цвет в воспроизводимый диапазон каждого пространства. Если бейдж sRGB красный, а P3 зелёный — цвет является OKLCH с широким охватом, который отрисуется насыщенным на железе Apple (iPhone, iPad, MacBook с 2017 года), но обесцветится на legacy 24-битном мониторе. Кнопка **Snap to sRGB** использует бинарное уменьшение chroma (информативный алгоритм CSS Color 4 §13), чтобы ужать цвет в sRGB, сохраняя L и H, давая HEX-fallback, который вы можете поставлять через `@supports not (color: oklch(0 0 0))`.

5. 5

   Также видны: RGB, HSL, OKLAB, HSV, HWB, CMYK, именованный цвет

   Тот же HEX, который вы вставляете, зажигает и остальные восемь полей форматов — RGB для вызовов canvas и аппаратуры, HSL для legacy CSS-переменных, OKLAB для математики палитр и матриц дальтонизма, HSV и HWB для дизайнерских рабочих процессов с пипеткой, CMYK для оценки печати и ближайший именованный CSS-цвет для документации и прозы. Вы никогда не заперты только в HEX → OKLCH. Пипетка (квадрат SL + слайдер оттенка + слайдер альфы) одновременно управляет всеми девятью, а в браузерах на базе Chromium кнопка EyeDropper сэмплирует любой пиксель на экране, включая за пределами браузера.

Типичные ошибки HEX / OKLCH

Установить OKLCH C = 0.3, ожидая «30% насыщенности»:
oklch(0.7 0.3 250) → может выйти за пределы охвата sRGB для синих
Цвет с широким охватом отрисуется обесцвеченным на legacy-дисплеях.

Воспринимайте C как абсолютную chroma, проверяйте бейджи охвата:
oklch(0.7 0.15 250) → комфортно в sRGB для этой пары L+H
Используйте бейджи, чтобы найти максимальный C, вписывающийся в целевой охват.

Скопировать HSL L-проценты напрямую в OKLCH:
hsl(220 50% 30%) перенесённый как oklch(0.30 0.10 220)
Два цвета выглядят заметно разными по яркости.

Заново выведите OKLCH из исходного HEX, не переносите HSL:
источник HEX → конвертация в OKLCH → oklch(0.34 0.08 254)
Перцептивная L остаётся корректной; палитра чувствуется равномерной.

Поставить oklch(0.7 0.4 30) без проверки sRGB-охвата:
P3-дисплеи отрисуют насыщенный красный; sRGB-дисплеи — обесцвеченный
Брендовый цвет выглядит несогласованно на разном железе пользователей.

Проверьте бейдж sRGB-охвата, при необходимости Snap to sRGB, слоями через @supports:
@supports (color: oklch(0 0 0)) { --primary: oklch(0.7 0.4 30); }
@supports not (color: oklch(0 0 0)) { --primary: #ef6b50; }
Железо P3 получает значение с широким охватом; железо sRGB — приклеенный fallback.

Определить брендовый цвет только в OKLCH:
:root { --primary: oklch(0.629 0.193 263.4); }
IE 11 и старый iOS Safari не отрисуют цвет вовсе.

Слоями через @supports для грациозного fallback:
:root { --primary: #3b82f6; }
@supports (color: oklch(0 0 0)) { :root { --primary: oklch(0.629 0.193 263.4); } }
Современные браузеры получают OKLCH; legacy-браузеры — HEX-fallback.

Подменить lch() на oklch() в ожидании того же результата:
lch(60% 50 240) ≠ oklch(0.6 0.15 240) — совершенно разные цвета
Скопированное между пространствами значение тихо неверно.

Выберите одно пространство и оставайтесь в нём:
oklch(0.629 0.193 263.4) для современных дизайн-систем
или lch(60% 50 240) — но не меняйте имена функций без перевыполнения конвертации

Кто пользуется HEX в OKLCH

Frontend-разработчики, мигрирующие на токены OKLCH Tailwind v4

Tailwind v4 стандартизировался на OKLCH для своей палитры по умолчанию в январе 2025 года. Миграция кодовой базы v3 с брендовыми цветами на HEX-основе означает конвертацию каждого HEX в OKLCH и вставку результата в новый блок `@theme`. Вставьте каждый HEX сюда, скопируйте значение `oklch()`, определите `--color-primary: oklch(0.629 0.193 263.4)` и подобные. Живые бейджи цветового охвата помечают любые цвета, выходящие за пределы sRGB, поэтому вы можете решить, оставить ли значение с широким охватом для пользователей Display P3 или приклеить к sRGB.

Авторы тем shadcn/ui, строящие кастомные палитры

Тема CSS-переменных shadcn/ui использует OKLCH для каждого токена (`--background`, `--foreground`, `--primary` и т. д.). Кастомные темы выводятся из базового брендового HEX через конвертацию в OKLCH и затем прохождение по L для светлого/тёмного вариантов. Вставьте брендовый HEX, считайте тройку OKLCH, постройте остальную часть темы, шагая L при зафиксированных C и H. Точно соответствует каноническому рабочему процессу shadcn.

Авторы дизайн-систем, генерирующие перцептивно-равномерные шкалы

Сгенерируйте шкалу 50/100/200/.../900, шагая по каналу L равными приращениями OKLCH при зафиксированных C и H. Визуальный разрыв между соседними стопами выглядит идентичным по каждому оттенку — это и есть то, что нужно палитре брендовых цветов. Tailwind v4 использует именно эту конструкцию для своей палитры по умолчанию, и shadcn/ui её зеркалит. Вставьте каждый брендовый HEX, считайте OKLCH, сгенерируйте шкалу алгоритмически или через панель Tints/Shades/Tones под пипеткой.

Инженеры доступности, проверяющие контраст в пространстве OKLCH

WCAG 2.1 и APCA оба сообщают контраст против разрешённого sRGB-цвета, а не тройки OKLCH — но знание OKLCH L брендового цвета делает настройку контраста предсказуемой: подбросьте L на 0.1, чтобы пройти AA против белого, опустите L на 0.1, чтобы пройти AA против чёрного. Одновременный вид OKLCH + WCAG + APCA делает эту связь видимой. Вставьте брендовый HEX, наблюдайте за бейджами контраста, регулируйте L в OKLCH (предсказуемее, чем в HSL), пока пара не пройдёт обе метрики.

Веб-разработчики, строящие токены с широким охватом для современных дисплеев

Большинство устройств Apple с 2017 года (и многие современные Android-устройства) отрисуют Display P3 нативно. Определение брендовых акцентных цветов в OKLCH позволяет адресовать насыщенные красные и зелёные только-P3, которые ни один HEX-код закодировать не может. Вставьте существующий HEX, чтобы считать его OKLCH, затем поднимите канал C над потолком sRGB, чтобы забрать дополнительную насыщенность P3. Бейджи цветового охвата подтвердят, что новое значение вписывается в P3 (и грациозно откатывается на экранах только-sRGB через браузерное сжатие chroma).

Преподаватели, объясняющие перцептивную и геометрическую светлоту

Одновременный вид OKLCH + HSL делает разницу между перцептивной и геометрической светлотой очевидной. Вставьте насыщенный зелёный и насыщенный синий при одной и той же HSL L=50%; значения OKLCH L заметно различаются, потому что OKLCH измеряет реальную воспринимаемую яркость. Перетащите слайдер оттенка HSL и наблюдайте, как OKLCH L колеблется, пока вы удерживаете HSL L постоянной — кривая визуализирует гамма-особенность. Готовая к классу демонстрация того, почему дизайн-системы мигрировали на OKLCH.

Open-source-мейнтейнеры, модернизирующие документацию токенов

Старая документация дизайн-систем обычно перечисляет брендовые цвета только как HEX-коды. Модернизация на OKLCH означает показывать тот же цвет в обоих пространствах — HEX для совместимости с code-блоками, OKLCH для таблицы спецификаций и современного определения токена. Вставьте каждый HEX, скопируйте вывод OKLCH, обновите документацию. URL-хэш, которым можно поделиться, также позволяет контрибьюторам ссылаться на точный обсуждаемый цвет в GitHub-issue без двусмысленности.

Математика и конвейер HEX в OKLCH

HEX → OKLCH — это конвейер из 7 шагов

Конвертация маршрутизируется через пять промежуточных представлений: HEX → целочисленный sRGB → нормализованный sRGB (0–1) → линейный sRGB (гамма-декодированный) → CIE XYZ D65 → OKLAB → OKLCH. Каждый шаг — это хорошо определённая матрица или кусочная функция из первоисточника. Инструмент запускает полный конвейер на каждое нажатие клавиши; математика достаточно быстрая (микросекунды), чтобы debouncing не требовался. Поднятие промежуточного RGB-кортежа рядом с OKLCH означает, что вы можете отладить неожиданное значение OKLCH, осмотрев каналы RGB.

Гамма-функция CSS Color 4 §11.2

Конвертация sRGB → linear-sRGB использует кусочную функцию CSS Color 4 §11.2: `v ≤ 0.04045 ? v/12.92 : ((v + 0.055) / 1.055)^2.4`. Кусочная форма (с маленьким линейным сегментом около нуля) избегает численной нестабильности чистой экспоненциальной формы на очень тёмных цветах. Это та же функция, которую используют ICC-профили для кодирования sRGB, и та же функция, которую браузеры используют внутри при отрисовке HEX-кодов. Обратная для OKLCH → HEX применяет ту же функцию в обратную сторону: `v ≤ 0.0031308 ? v * 12.92 : 1.055 * v^(1/2.4) - 0.055`.

Матрица CSS Color 4 §15.1: linear-sRGB ↔ XYZ D65

Матрица из CSS Color 4 §15.1 конвертирует linear-sRGB в CIE XYZ при точке белого D65: `X = 0.4124564 R + 0.3575761 G + 0.1804375 B`, `Y = 0.2126729 R + 0.7151522 G + 0.0721750 B`, `Z = 0.0193339 R + 0.1191920 G + 0.9503041 B`. Строка Y даёт формулу яркости sRGB. Матрица — та же самая, что используется в каждой библиотеке управления цветом, включая ICC, Adobe Color Engine и open-source-конвейер LCMS. Обратная матрица для OKLCH → HEX применяет инверсию §15.1.

Матрицы OKLAB и шаг кубического корня (Оттоссон 2020)

Конвертация XYZ D65 → OKLAB использует две матрицы и шаг извлечения кубического корня, опубликованные в статье Бьорна Оттоссона об OKLAB 2020 года. Первая матрица трансформирует XYZ в пространство LMS-отклика конусов (свободно смоделированное по чувствительностям человеческих L/M/S конусов). Извлеките кубический корень каждого канала, чтобы нелинейно сжать динамический диапазон (шаг, корректирующий перцептивную равномерность). Вторая матрица трансформирует кубически-корневой LMS в координаты OKLAB L/a/b. Все три операции используют точные значения, опубликованные в эталонной реализации статьи; без перевыводов или округлений. Обратная для OKLCH → HEX применяет эти матрицы в обратную сторону.

OKLAB ↔ OKLCH — декартовы координаты в полярные

Оси `a` и `b` в OKLAB образуют плоскость chroma, перпендикулярную оси L. OKLCH полярно кодирует эту плоскость: `C = sqrt(a² + b²)` (евклидово расстояние от серого), `H = atan2(b, a) * 180 / π` (угол в градусах, обёрнут в 0–360°). Обратная: `a = C * cos(H * π / 180)`, `b = C * sin(H * π / 180)`. Полярная форма предпочтительнее OKLAB для хранения дизайн-токенов, потому что Hue — стабильная ось: вращение Hue не приводит к случайному кросс-фейду через серый, как это может случиться при вращении `a` или `b` в OKLAB.

Определение цветового охвата через проверку диапазона каналов

Цвет считается в-охвате для целевого пространства (sRGB, Display P3, Rec.2020), если каждый канал попадает в `[-ε, 1 + ε]` после конвертации в primaries этого пространства, где `ε = 1e-7`, чтобы поглощать шум точности float около границ. Бейдж охвата для каждого пространства краснеет, когда какой-либо канал выходит за диапазон. OKLCH не ограничен по охвату — `oklch(0.7 0.4 30)` — валидная координата, но может выходить за пределы байтового пространства sRGB 256-на-канал. Проверка выполняется на каждое нажатие клавиши; в сочетании со Snap to sRGB это ловит самую распространённую ловушку внедрения (OKLCH с широким охватом, неправильно отображающийся на legacy-экранах).

Бинарное уменьшение chroma в Snap to sRGB

Snap to sRGB соответствует информативному алгоритму отображения цветового охвата CSS Color 4 §13: удерживать L и H зафиксированными на текущих значениях, бинарным поиском найти C ∈ [0, currentC] — наибольший C, чья конвертация в sRGB остаётся в-охвате. Поиск выполняется не более чем за 30 итераций (точность ~10⁻⁹), чего более чем достаточно для визуальной точности. Сохранение L и H означает, что приклеенный цвет читается как тот же оттенок-семья при той же яркости — он просто теряет насыщенность. Мы не обрезаем каналы RGB напрямую, потому что это заметно искажает оттенок (особенно в синих, которые обрезаются в сторону фиолетового).

Лучшие практики для HEX / OKLCH

Используйте OKLCH как канонический формат токенов в новом коде

Для любой дизайн-системы, поставляющейся в 2025 году или позже, определяйте брендовые цвета и шкалы палитр в OKLCH. Ось L автоматически даёт перцептивно-равномерные шкалы; ось Chroma может адресовать цвета с широким охватом, которые HEX закодировать не может. Держите HEX-fallback для старых браузеров через `@supports not (color: oklch(0 0 0))` или сборочный PostCSS, но делайте OKLCH источником истины в вашем хранилище токенов. Tailwind v4 и shadcn/ui оба поставляются именно так; новые проекты могут следовать их примеру без трения.

Генерируйте шкалы, шагая L, удерживая C и H постоянными

Каноническая конструкция OKLCH-шкалы: зафиксировать C и H, пройти L равными приращениями. 9-ступенчатая шкала `oklch(L 0.15 263)` для L = 0.1, 0.2, …, 0.9 даёт визуально-равномерное расстояние между шагами по каждому шагу. Именно это Tailwind v4 делает внутри. Не проходите C вместе с L, если только не хотите, чтобы chroma-интенсивность шкалы намеренно варьировалась (редко). Не дрейфьте H между шагами — даже 5° дрейфа делает шкалу запутанной.

Совпадайте с точностью Tailwind v4: 3 знака L+C, 1 знак H

Палитра по умолчанию Tailwind v4 публикует значения OKLCH с тремя знаками после запятой для L и C и одним знаком после запятой для H — `oklch(0.629 0.193 263.4)` для blue-500. Соблюдение этой точности в ваших собственных токенах означает, что рабочие процессы вставки в конфиг дают идентичные значения тем, которые поставляет Tailwind, и инструменты diff не будут помечать ложные различия. Округление по умолчанию в инструменте следует этой конвенции; копи-паст в блок `@theme` бит-точен.

Прогоняйте OKLCH с широким охватом через проверку Display P3

Если вы целитесь в современное железо Apple (iPhone, iPad, MacBook с 2017 года) или поставляете HDR-aware контент, бейджи цветового охвата позволяют поднять C выше потолка sRGB, чтобы забрать дополнительную насыщенность P3. Применяемое браузером сжатие chroma уберегает цвет от обрезки на экранах только-sRGB. Не приклеивайте к sRGB заранее по умолчанию, если не знаете, что вся ваша аудитория сидит на legacy-дисплеях — это теряет 30%+ насыщенности, которую может отрисовать железо P3.

Предоставляйте HEX-fallback через @supports для браузеров до 2023

Хотя поддержка `oklch()` в вечнозелёных браузерах сейчас 94%+, длинный хвост (IE 11, старый Android Chrome, встроенные webview) по-прежнему нуждается в fallback. Оборачивайте токены в `@supports (color: oklch(0 0 0))` и предоставляйте HEX-вариант в альтернативной ветке. Вывод Snap to sRGB — это именно тот fallback, генерируемый автоматически из текущей тройки OKLCH с сохранением L и H. Сборочные PostCSS-плагины вроде `postcss-oklab-function` тоже могут инлайнить sRGB-приближение во время компиляции.

Документируйте и OKLCH, и исходный HEX в ваших токенах

Когда вы поставляете CSS-переменную вроде `--color-primary: oklch(0.629 0.193 263.4)`, включайте комментарий с исходным HEX: `/* source: #3b82f6 (Tailwind blue-500) */`. Через шесть месяцев, когда кому-то понадобится вывести связанный оттенок или сверить значение с PDF брендбука, исходный HEX сохраняет полный след происхождения. Один OKLCH значим, но его сложнее опознать с одного взгляда; исходный HEX — это идентификатор, который большинство коллег будут искать первым.

Используйте URL-хэш, чтобы делиться живыми решениями по цвету

Каждое изменение цвета автоматически обновляет URL-хэш как `#hex=3b82f6` или `#oklch=...`. Скопируйте URL в тред Slack или GitHub-issue, и любой, кто откроет, попадёт на тот же цвет с той же тройкой OKLCH. Это надёжнее, чем вставка OKLCH-строки в чат — получатели иногда опечатываются на десятичных или оборачивают неправильную точность — и позволяет треду design-review ссылаться на точный цвет, а не на «брендовый синий, который мы обсуждали во вторник». Хэш никогда не передаётся на сервер.

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