palette-mix()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The palette-mix() CSS function can be used to create a new font-palette value by blending together two font-palette values by specified percentages and color interpolation methods.

Syntax

css
/* 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)

Values

Functional notation:

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

A <color-interpolation-method> specifying the interpolation color space.

palette1, palette2

The font-palette values to blend together. These can be any font-palette values, including palette-mix() functions, normal, dark, and light.

p1, p2 Optional

<percentage> values between 0% and 100% specifying the amount of each palette to mix. They are normalized as follows:

  • If both p1 and p2 are omitted, then p1 = p2 = 50%.
  • If p1 is omitted, then p1 = 100% - p2.
  • If p2 is omitted, then p2 = 100% - p1.
  • If p1 = p2 = 0%, the function is invalid.
  • If p1 + p2 ≠ 100%, then p1' = p1 / (p1 + p2) and p2' = p2 / (p1 + p2), where p1' and p2' are the normalization results.

Formal syntax

<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>? ]

<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

Examples

Using palette-mix() to blend two palettes

This example shows how to use the palette-mix() function to create a new palette by blending two others.

HTML

The HTML contains three paragraphs to apply our font information to:

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

CSS

In the CSS, we import a color font from Google Fonts, and define two custom font-palette values using the @font-palette-values at-rule. We then apply three different font-palette values to the paragraphs — --yellow, --blue, and a new green palette, created using palette-mix() to blend the blue and yellow palettes together.

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

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

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

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

.yellowPalette {
  font-palette: --yellowNabla;
}

.bluePalette {
  font-palette: --blueNabla;
}

.mixedPalette {
  font-palette: palette-mix(in lch, --blueNabla 55%, --yellowNabla 45%);
}

Result

The output looks like this:

Specifications

Specification
CSS Fonts Module Level 4
# typedef-font-palette-palette-mix

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
palette-mix()
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

See also