О color-mix() на март 2021

На прошлой неделе CSSWG рассмотрела несколько ишью о функции color-mix(), поэтому считаю нужным написать о ней подробнее.

Эта функция принимает два значения <color> и возвращает результат их смешивания в заданной пропорции в заданном цветовом пространстве.

Грамматика функции, указанная в спецификации:

color-mix() = color-mix( in <colorspace> , [ <color> && <percentage>? ]#{2})
        

Более наглядно:

/*
  * @param {<colorspace>} --colorspace Цветовое пространство
  * @param {<color>} --color1 Первый цвет
  * @param {<percentage>} [--p1: 50%] Доля первого цвета
  * @param {<color>} --color2 Второй цвет
  * @param {<percentage>} [--p2: 50%] Доля второго цвета
*/
color: color-mix(in var(--colorspace), var(--color1) var(-p1),  var(--color2) var(-p2))
        

Проценты нормализованы следующим образом:

1. Пусть p1 будет первым процентом, а p2 - вторым.
2. Если оба процента опущены, каждое из них по умолчанию равно 50% (равное сочетание двух цветов).
3. В противном случае, если p2 опущен, он становится 100% - p1
4. В противном случае, если p1 опущен, он становится 100% - p2
5. Если сумма процентов равна нулю поведение пока не определено
6. Если оба знаечние опредоставлены, но не дают в сумме 100%, они масштабируются соответствующим образом, чтобы они в сумме составляли 100%. Это означает, что p1 = p1 / (p1 + p2), а p2 = p2 / (p1 + p2).

После нормализации обоих значений результат получается по следующему алгоритму:

1. Оба цвета преобразуются в указанное цветовое пространство. Если заданное цветовое пространство имеет меньшую гамму, чем та, в которой задан цвет, который должен быть настроен, будет выполнено отображение гаммы.
2. Затем цвета интерполируются в указанном цветовом пространстве. Результатом смешивания является указанное процентное соотношение цвета по мере перехода от второго цвета к первому.

Для больше наглядности разберем пример:

color-mix(in lch, peru 40%, lightgoldenrod)
        

1. peru: lch(62.253% 54.011 63.677)
2. lightgoldenrod: lch(91.374% 31.415 98.821)
3. смешение светлоты: 62.253 * 40/100 + 91.374 * (100-40)/100 = 79.7256
4. смешение количества цвета: 54.011 * 40/100 + 31.415 * (100-40)/100 = 40.4534
5. смешение тона: 63.677 * 40/100 + 98.821 * (100-40)/100 = 84.7634
6. результат: lch(79.7256% 40.4534 84.7634)

Источник: https://drafts.csswg.org/css-color-5/#color-mix