Конвертер OKLCH и построитель палитр
Переводите между OKLCH, hex, RGB и HSL и стройте ряды, которые остаются перцептивно ровными, потому что светлота и цветность держатся, пока меняется тон. Цвета вне sRGB отображаются снижением цветности, а не отсечением каналов: разница в том, останется ли ваш фиолетовый фиолетовым.
Почему светлота в OKLCH что-то значит
В HSL смена тона при неизменной светлоте меняет видимую яркость: жёлтый на 50% читается куда светлее синего на 50%, поэтому ряды в HSL выглядят неровно, как их ни расставляй. OKLab подгонялся под перцептивные данные, и его ось светлоты следует за тем, что сообщает глаз. Закрепите L и C, вращайте H — и каждый образец несёт одинаковый визуальный вес. В этом и весь смысл собирать палитры здесь, а не в HSL.
Главное — отображение охвата
У множества значений OKLCH нет эквивалента в sRGB, и наивное решение — загнать каждый канал в диапазон. Это заметно сдвигает тон: сочный фиолетовый, отсечённый по каналам, уплывает в синий. Снижение цветности при неизменных светлоте и тоне оставляет цвет узнаваемо тем же и забирает лишь ту насыщенность, которую экран всё равно не показал бы. Здесь используется алгоритм CSS Color 4: двоичный поиск по цветности с принятием отсечённого результата, как только он оказывается в пределах едва заметного различия от уменьшенного.
Сверено с эталоном
Преобразования сверялись с независимой реализацией на сетке из четырёх тысяч цветов: светлота и цветность совпадают до миллионных, тон — до десятитысячных градуса, и каждое hex-значение возвращается точно. Отображение охвата проверено тем же способом на четырёхстах восьмидесяти цветах вне охвата и в худшем случае укладывается в одну часть из 255. Кто читает OKLCH, заметит неверную матрицу, поэтому стоило сказать, как всё проверялось.
Как пользоваться выводом
Пользовательские свойства записываются в OKLCH, а рядом в комментарии стоит hex, потому что именно эта пара нужна на ревью: значение, которое уедет в сборку, и значение, которое можно вставить куда угодно ещё. Все браузеры, что сегодня в ходу, понимают синтаксис OKLCH; если вы всё ещё поддерживаете тот, который не понимает, комментарий и есть ваш запасной вариант.
Часто задаваемые вопросы
Почему цветность ограничена 0,4?
Потому что в sRGB ничто к нему не приближается. Самый насыщенный цвет sRGB — синий, около 0,313, а ползунок специально идёт дальше, чтобы вы видели, что выходит за охват и как возвращается.
Что здесь считается едва заметным различием?
Дельта E 0,02 в OKLab — порог, принятый в CSS Color 4. Ниже него отсечение и снижение цветности неразличимы, поэтому алгоритм берёт отсечённый цвет и сохраняет лишнюю цветность.
Поддерживает ли P3 или Rec2020?
Пока нет. Всё здесь рассчитано на sRGB — о нём и говорят предупреждения об охвате. Более широкие охваты требуют своих первичных цветов и второго набора матриц.
Что-нибудь из этого куда-то отправляется?
Нет. Все преобразования выполняются на этой странице.
Сделано командой GO AI. Калькулятор CSS clamp() · Все бесплатные инструменты