Стенд сравнения интерполяции

Смешайте два цвета. Получите четыре ответа.

Один процент применяется сразу к четырём пространствам CSS. Сравните результаты на общей шкале и скопируйте color-mix() вместе с шестизначным sRGB-резервом.

01 / Четыре линии интерполяции

Одна пропорция — четыре результата.

Вертикальная метка пересекает все шкалы в одной точке. Разница создаётся пространством интерполяции, а не изменением входных данных.

sRGB

#A7518DОткрыть резервный цвет ↗

color-mix(in srgb, #FF5C35 50%, #4F46E5 50%)

Линейный sRGB

#C252ABОткрыть резервный цвет ↗

color-mix(in srgb-linear, #FF5C35 50%, #4F46E5 50%)

OKLab

#A6659FОткрыть резервный цвет ↗

color-mix(in oklab, #FF5C35 50%, #4F46E5 50%)

OKLCH · короткая дуга тона

#C939B0Открыть резервный цвет ↗

color-mix(in oklch, #FF5C35 50%, #4F46E5 50%)

02 / Почему середина смещается

Смешивание цвета — выбор координат.

Цифровая интерполяция не имитирует смешивание красок. Каждое пространство прокладывает собственный путь между точками, поэтому середина бывает светлее, темнее, спокойнее или насыщеннее.

RGB

Кодированные значения и линейный свет

sRGB смешивает кодированные каналы, а linear-sRGB — свет. Их результат на 50% может заметно различаться, особенно между чёрным и белым.

Перцептивные траектории

OKLab интерполирует прямоугольные перцептивные координаты. OKLCH смешивает светлоту, насыщенность и тон по короткой дуге, сохраняя более выразительный путь.

CSS

Сначала резерв

В скопированном фрагменте шестизначный sRGB-резерв стоит перед color-mix(). Поддерживающие функцию браузеры применят второе объявление.

03 / Метод и источник

Детерминированная математика цвета CSS.

Непрозрачные входные цвета sRGB преобразуются и интерполируются по спецификациям CSS Color. Результаты OKLab и OKLCH вне охвата переводятся в sRGB. Вид также зависит от дисплея, управления цветом в браузере, окружения и итогового компонента.