Функция color-mix() в CSS

Определение и использование

CSS color-mix() Функция используется для смешивания двух значений цветов в заданном цветовом пространстве в указанном соотношении.

Пример

Пример 1

Смешивание двух цветовых значений в пространстве цветов hsl по указанным пропорциям:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

Попробуйте сами

Пример 2

Смешивание двух цветовых значений в пространстве цветов oklab по разным пропорциям:

li:nth-child(1) {
  background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
  background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
  background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
  background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
  background-color: color-mix(in oklab, #6a5acd 100%, pink);
}

Попробуйте сами

Синтаксис CSS

color-mix(color-interpolation-method, color1 %, color2 %)
Значение Описание
color-interpolation-method

Обязателен. Определяет используемый метод интерполяции цвета.

Он состоит из ключевого слова in, за которым следует имя цветовой системы.

Доступны следующие два типа:

Прямоугольная цветовая система:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab
  • oklab
  • xyz
  • xyz-d50
  • xyz-d65

Полярная цветовая система:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

Обязателен. Цветовые значения для смешивания, а также опциональные процентные значения (от 0% до 100%), используемые для указания пропорции цвета.

Значение по умолчанию для процента составляет 50%.
color2 %

Обязателен. Цветовые значения для смешивания, а также опциональные процентные значения (от 0% до 100%), используемые для указания пропорции цвета.

Значение по умолчанию для процента составляет 50%.

Технические детали

Версия: CSS Color Module Level 5

Поддержка браузеров

Таблица содержит цифры, представляющие версии браузеров, которые полностью поддерживают эту функцию.

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

Соответствующие страницы

См. также:Цвета CSS