color-mix()

Функциональная запись: color-mix(<color-interpolation-method>, <color>[<percentage>], <color>[<percentage>])

<color-interpolation-method>

Указывает, какой метод интерполяции следует использовать для смешивания цветов. Он состоит из ключевого слова in и имени цветового пространства. Доступны следующие три типа:

• <rectangular-color-space>: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, lab, oklab, xyz, xyz-d50 и xyz-d65.

• <polar-color-space>: hsl, hwb, lch и oklch.

• custom-color-space: <dashed-ident> со ссылкой на настраиваемое @профиль цвета

Примечание: Когда браузеры поддерживают @color-profile, настраиваемые цветовые пространства могут быть поддерживаемы. В настоящее время цветовое пространство должно быть одним из доступных цветовых пространств, перечисленных в formal_syntax.

<color>

Значение <color> для смешивания.

<percentage> Необязательно

Значение <percentage> от 0% до 100%, определяющее количество соответствующего цвета для смешивания.

Два процента цвета (будем называть их p1 и p2) нормализуются следующим образом:

• Если оба p1 и p2 опущены, то p1 = p2 = 50%.
• Если p1 опущено, то p1 = 100% - p2.
• Если p2 опущено, то p2 = 100% - p1.
• Если p1 = p2 = 0%, функция недействительна.
• Если p1 + p2 ≠ 100%, то p1' = p1 / (p1 + p2) и p2' = p2 / (p1 + p2), где p1' и p2' — результаты нормализации.
  • Если p1 + p2 < 100%, к результирующему цвету применяется множитель альфа p1 + p2. Это аналогично смешиванию в transparent с процентом pt = 100% - p1 - p2.

<color-mix()> = 
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2} )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<rectangular-color-space> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65       

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

Следующая интерактивная демонстрация смешивает два цвета, color-one и color-two, используя функцию color-mix(). Исходные цвета показаны снаружи, а смешанный цвет — посередине. Вы можете изменить цвета, нажав на них и выбрав новый цвет с помощью появившегося селектора. Вы также можете изменить процент каждого цвета в смеси с помощью ползунков и цветовое пространство — с помощью выпадающего списка.

Этот пример демонстрирует смешивание двух цветов, синего #a71e14 в различных процентах и белого без указания процента. Чем выше процент смешанного #a71e14, тем больше синего и меньше белого в результирующем цвете.

HTML

<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

CSS

Функция color-mix() используется для добавления возрастающих процентов синего, до 100%. 6-й <li> не включает процент для ни одного цвета.

li:nth-child(1) {
  background-color: color-mix(in oklab, #a71e14 0%, white);
}

li:nth-child(2) {
  background-color: color-mix(in oklab, #a71e14 25%, white);
}

li:nth-child(3) {
  background-color: color-mix(in oklab, #a71e14 50%, white);
}

li:nth-child(4) {
  background-color: color-mix(in oklab, #a71e14 75%, white);
}

li:nth-child(5) {
  background-color: color-mix(in oklab, #a71e14 100%, white);
}

li:nth-child(6) {
  background-color: color-mix(in oklab, #a71e14, white);
}

Результат

Суммарное значение обоих цветов в функции color-mix() составляет 100%, даже если значения, заданные разработчиком, не составляют 100%. В данном примере, так как только одному цвету назначен процент, другому цвету неявно присваивается значение процента, чтобы общая сумма равнялась 100%. В последнем <li>, где ни одному цвету не назначен процент, оба цвета по умолчанию устанавливаются на 50%.

Этот пример демонстрирует использование функции color-mix() для добавления прозрачности к цвету, смешивая любой цвет с transparent.

HTML

<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

CSS

Функция color-mix() используется для добавления возрастающих процентов red, который объявлен с помощью пользовательского свойства --base, определённого для :root. 6-й <li> не включает процент, что создаёт результирующий цвет, вдвое менее непрозрачный, чем цвет --base . Мы добавили полосатую фоновую отрисовку в <ul>, чтобы сделать прозрачность видимой.

:root {
  --base: red;
}

ul {
  background: repeating-linear-gradient(
    45deg,
    chocolate 0px 2px,
    white 2px 12px
  );
}

li:nth-child(1) {
  background-color: color-mix(in srgb, var(--base) 0%, transparent);
}

li:nth-child(2) {
  background-color: color-mix(in srgb, var(--base) 25%, transparent);
}

li:nth-child(3) {
  background-color: color-mix(in srgb, var(--base) 50%, transparent);
}

li:nth-child(4) {
  background-color: color-mix(in srgb, var(--base) 75%, transparent);
}

li:nth-child(5) {
  background-color: color-mix(in srgb, var(--base) 100%, transparent);
}

li:nth-child(6) {
  background-color: color-mix(in srgb, var(--base), transparent);
}

Результат

Таким образом, функция color-mix() может использоваться для добавления прозрачности к любому цвету, даже если цвет уже непрозрачен (значение канала альфа < 1). Однако, color-mix() не может использоваться для преобразования полупрозрачного цвета в полностью непрозрачный. Для этого используйте относительный цвет с функцией цвета CSS. Относительные цвета могут изменить значение любого цветового канала, включая увеличение канала альфа цвета для получения полностью непрозрачного цвета.

В этом примере показаны методы интерполяции оттенков, доступные функции color-mix(). При использовании интерполяции оттенков полученный оттенок находится между значениями оттенков двух смешиваемых цветов. Значение будет отличаться в зависимости от пути вокруг цветового круга.

Дополнительную информацию см. в разделе интерполяции.

CSS

Метод интерполяции shorter hue выбирает кратчайший путь вокруг цветового круга, в то время как метод интерполяции longer hue выбирает более длинный путь. При использовании increasing hue, путь начинается с увеличения значений. При использовании decreasing hue, значение уменьшается. Мы смешиваем два значения <named-color>, чтобы создать ряд lch() промежуточных цветов, которые отличаются в зависимости от пути вокруг цветового круга. Смешанные цвета включают red, blue, и yellow со значениями оттенков LCH примерно 41 град., 301 град. и 100 град. соответственно.

Для сокращения избыточности кода мы использовали настраиваемые свойства CSS для обоих цветов и для метода интерполяции, задавая разные значения для каждого <ul>.

ul:nth-of-type(1) {
  --distance: longer; /* 52 degree hue increments */
  --base: red;
  --mixin: blue;
}
ul:nth-of-type(2) {
  /* 20 degree hue decrements */
  --distance: shorter;
  --base: red;
  --mixin: blue;
}
ul:nth-of-type(3) {
  /* 40 degree hue increments */
  --distance: increasing;
  --base: yellow;
  --mixin: blue;
}
ul:nth-of-type(4) {
  /* 32 degree hue decrements */
  --distance: decreasing;
  --base: yellow;
  --mixin: blue;
}

li:nth-child(1) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 100%,
    var(--mixin)
  );
}

li:nth-child(2) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 80%,
    var(--mixin)
  );
}

li:nth-child(3) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 60%,
    var(--mixin)
  );
}

li:nth-child(4) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 40%,
    var(--mixin)
  );
}

li:nth-child(5) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 20%,
    var(--mixin)
  );
}

li:nth-child(6) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 0%,
    var(--mixin)
  );
}

Результат

При использовании longer hue приращения или уменьшения между цветами всегда будут такими же или большими, чем при использовании shorter hue. Используйте increasing hue или decreasing hue, если направление изменения значения оттенка важнее, чем длина между значениями.

• <color>
• <color-interpolation-method>
• <hue>
• Относительные цвета CSS