Функция CSS `palette-mix()`

palette-mix() — это CSS-функция, которую можно использовать для создания нового значения font-palette, смешивая два значения font-palette в заданных пропорциях и с использованием указанных методов интерполяции цветов.

Синтаксис

/* Blending font-defined palettes */
font-palette: palette-mix(in lch, normal, dark)

/* Blending author-defined palettes */
font-palette: palette-mix(in lch, --blues, --yellows)

/* Varying percentage of each palette mixed */
font-palette: palette-mix(in lch, --blues 50%, --yellows 50%)
font-palette: palette-mix(in lch, --blues 70%, --yellows 30%)

/* Varying color interpolation method */
font-palette: palette-mix(in srgb, --blues, --yellows)
font-palette: palette-mix(in hsl, --blues, --yellows)
font-palette: palette-mix(in hsl shorter hue, --blues, --yellows)

Значения

Функциональная запись:

palette-mix(method, palette1 [p1], palette2 [p2])

method

<color-interpolation-method>, задающий цветовое пространство для интерполяции.

palette1, palette2

Значения font-palette, которые нужно смешать. Это могут быть любые значения font-palette, в том числе функции palette-mix(), normal, dark и light.

p1, p2 Необязательно

Значения <percentage> от 0% до 100%, задающие долю каждой палитры в смешении. Они нормализуются следующим образом:

• Если 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' — результаты нормализации.

Формальный синтаксис

<palette-mix()> = 
  palette-mix(<color-interpolation-method> , [ [normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2})

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

<palette-identifier> = 
  <dashed-ident>

<palette-mix()> = 
  palette-mix(<color-interpolation-method> , [ [normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2})

<rectangular-color-space> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  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

<custom-color-space> = 
  <dashed-ident>

Примеры

Использование palette-mix() для смешивания двух палитр

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

HTML

HTML содержит три абзаца, к которым мы применим сведения о шрифтах:

<p class="yellowPalette">Yellow palette</p>
<p class="bluePalette">Blue palette</p>
<p class="mixedPalette">Mixed palette</p>

CSS

В CSS мы импортируем цветной шрифт из Google Fonts и определяем два пользовательских значения font-palette с помощью at-правила @font-palette-values. Затем мы применяем к абзацам три разных значения font-palette — --yellow, --blue и новую зеленую палитру, созданную с помощью palette-mix() путем смешивания синей и желтой палитр.

@import "https://fonts.googleapis.com/css2?family=Nabla&display=swap";

@font-palette-values --blue-nabla {
  font-family: "Nabla";
  base-palette: 2; /* this is Nabla's blue palette */
}

@font-palette-values --yellow-nabla {
  font-family: "Nabla";
  base-palette: 7; /* this is Nabla's yellow palette */
}

p {
  font-family: "Nabla", fantasy;
  font-size: 4rem;
  text-align: center;
  margin: 0;
}

.yellowPalette {
  font-palette: --yellow-nabla;
}

.bluePalette {
  font-palette: --blue-nabla;
}

.mixedPalette {
  font-palette: palette-mix(in lch, --blue-nabla 55%, --yellow-nabla 45%);
}

Результат

Результат выглядит так:

Спецификации

Совместимость с браузерами

См. также

• font-palette
• @font-palette-values
• color-mix()
• Руководство по значениям цветов CSS
• Цветовое пространство