CSS palette-mix() Function

CSS palette-mix() Function

The CSS palette-mix() function creates a new color font palette by interpolating between two existing font palettes.

It is used with the font-palette property to blend the colors of compatible color fonts. The function accepts a color interpolation method, two palette values, and optional percentages that control how much each palette contributes to the result.

Syntax

font-palette: palette-mix(in color-space, palette1, palette2);
font-palette: palette-mix(in color-space, palette1 percentage, palette2 percentage);

The function combines two font palettes using the specified color interpolation method.

For example:

font-palette: palette-mix(in oklab, light, dark);
font-palette: palette-mix(in srgb, light 25%, dark);
font-palette: palette-mix(in oklch, --warm 40%, --cool 60%);

The in keyword introduces the color interpolation method.

Each palette can be a supported palette keyword or a custom palette name defined using @font-palette-values.

The function returns a font palette value, not a CSS <color> value.

Therefore, it is used with font-palette, not with properties such as color or background-color.

Parameters

The palette-mix() function requires a color interpolation method and two font palettes.

For example:

font-palette: palette-mix(in oklab, light 30%, dark 70%);

This mixes the light and dark font palettes, with the light palette contributing 30% and the dark palette contributing 70%.

When neither percentage is specified, both palettes contribute equally.

The function operates on the palette entries of a color font rather than mixing two ordinary CSS colors.

How It Works

A color font can contain multiple color palette entries used to render different parts of its glyphs.

The palette-mix() function interpolates corresponding entries from two palettes to produce a new palette.

For example:

.color-text {
  font-palette: palette-mix(in oklab, light, dark);
}

The browser selects the font's light and dark palettes and mixes their corresponding colors in the Oklab color space.

The resulting palette is then used to render glyphs that support font palette colors.

The process can be summarized as follows:

1. Select a compatible color font containing palette-based color information.
2. Identify the two palettes to mix.
3. Choose the color interpolation method.
4. Calculate each resulting palette entry from the corresponding entries of the source palettes.
5. Render the color font using the generated palette.

The function does not change the font's glyph shapes or layout.

It changes the colors used by palette-aware portions of the font.

Color Fonts

Color fonts can contain multiple colors within individual glyphs, unlike traditional monochrome fonts that normally use a single text color.

Some color font formats support predefined palettes that determine the colors used by different glyph layers.

For example, a color font might use one palette entry for a shape's background and another for its foreground details.

The CSS font-palette property can select or modify these palette colors.

For example:

.color-font {
  font-family: "My Color Font";
  font-palette: light;
}

The light keyword requests a font palette intended for use on light backgrounds.

Another example:

.color-font {
  font-family: "My Color Font";
  font-palette: dark;
}

The dark keyword requests a palette intended for dark backgrounds.

The exact appearance depends on the palettes provided by the selected font.

Not every color font uses palette-based colors. Some color fonts use embedded images or other color rendering mechanisms that are not controlled by font-palette.

For a meaningful palette-mix() result, use a font with suitable palette entries.

Font Palettes

The font-palette property supports several ways to select a font palette.

For example:

.text-a {
  font-palette: normal;
}
.text-b {
  font-palette: light;
}
.text-c {
  font-palette: palette-mix(in oklab, light, dark);
}

The first two declarations select existing palette behavior.

The third declaration requests an interpolated palette.

Palette availability and the colors selected for each keyword depend on the font.

Mixing Percentages

Percentages control the relative contribution of each palette.

For example:

font-palette: palette-mix(in oklab, light 50%, dark 50%);

Both palettes contribute equally.

Another example:

font-palette: palette-mix(in oklab, light 25%, dark 75%);

The resulting colors are weighted more heavily toward the dark palette.

If only one percentage is supplied, the other is calculated as the remaining percentage needed to reach 100%.

For example:

font-palette: palette-mix(in oklab, light 30%, dark);

This is equivalent to:

font-palette: palette-mix(in oklab, light 30%, dark 70%);

When both percentages are omitted, each palette contributes 50%.

When explicitly supplied percentages do not total 100%, CSS applies the color-mixing percentage normalization rules.

If their total is less than 100%, the resulting colors can have reduced alpha values. If their total exceeds 100%, the percentages are normalized to their relative proportions.

For predictable results, percentages totaling 100% are usually the easiest to understand.

Color Interpolation Methods

The palette-mix() function requires a color interpolation method.

The method determines how corresponding palette colors are blended.

For example:

font-palette: palette-mix(in srgb, light, dark);
font-palette: palette-mix(in oklab, light, dark);
font-palette: palette-mix(in oklch, light, dark);

These expressions use the same palettes but different interpolation spaces.

For polar color spaces such as oklch, hue interpolation can be controlled using a hue interpolation method.

For example:

font-palette: palette-mix(in oklch longer hue, light, dark);

This requests interpolation along the longer path between hue angles.

Different interpolation methods can produce noticeably different intermediate colors, even when the same source palettes are used.

Using Custom Font Palettes

Custom font palettes can be defined using the CSS @font-palette-values rule.

For example:

@font-palette-values --blue-theme {
  font-family: "My Color Font";
  base-palette: 0;
  override-colors:

    0 #0066cc,
    1 #99ccff;
}
@font-palette-values --green-theme {
  font-family: "My Color Font";
  base-palette: 0;
  override-colors:
    0 #008866,
    1 #99ddbb;
}

Each rule defines a named palette for the specified font family.

The base-palette descriptor selects a base palette, while override-colors replaces specific palette entries.

The entry numbers must correspond to palette entries used by the font.

Once defined, the palettes can be mixed:

.color-text {
  font-family: "My Color Font";
  font-palette: palette-mix(
    in oklab,
    --blue-theme 50%,
    --green-theme 50%
  );
}

The resulting palette contains interpolated colors from corresponding entries in the two custom palettes.

Both palette definitions must be applicable to the font being rendered.

The example assumes a suitable color font with palette entries 0 and 1.

Light and Dark Palettes

The light and dark palette keywords can be used as inputs to palette-mix().

For example:

.color-heading {
  font-palette: palette-mix(in oklab, light, dark);
}

This requests a palette halfway between the font's light and dark palette selections.

Different weights can produce intermediate variations:

.color-heading-light {
  font-palette: palette-mix(in oklab, light 80%, dark 20%);
}
.color-heading-medium {
  font-palette: palette-mix(in oklab, light 50%, dark 50%);
}
.color-heading-dark {
  font-palette: palette-mix(in oklab, light 20%, dark 80%);
}

The visible result depends on the source font's available palettes.

These keywords do not automatically detect the page's color scheme. They request palette types provided by the font.

To select different palettes based on the user's preferred color scheme, combine font-palette with a media query:

.color-heading {
  font-palette: light;
}
@media (prefers-color-scheme: dark) {
  .color-heading {
    font-palette: dark;
  }
}

The media query selects a palette based on the user's preference, while palette-mix() blends palette colors.

palette-mix() vs. color-mix()

The palette-mix() and color-mix() functions both use CSS color interpolation, but they operate on different types of values.

For example, palette-mix() blends font palettes:

.color-text {
  font-palette: palette-mix(in oklab, light, dark);
}

By comparison, color-mix() blends two colors:

.box {
  background-color: color-mix(in oklab, blue 50%, white 50%);
}

The two functions are not interchangeable.

Use color-mix() for ordinary CSS colors and palette-mix() for compatible color font palettes.

Example

This example mixes two built-in font palette selections using equal percentages.

HTML:

<p class="palette-mix-demo">COLOR FONT</p>

CSS:

.palette-mix-demo {
  font-family: "My Color Font", sans-serif;
  font-size: 48px;
  line-height: 1.4;
  font-palette: light;
}
@supports (font-palette: palette-mix(in oklab, light, dark)) {
  .palette-mix-demo {
    font-palette: palette-mix(in oklab, light 50%, dark 50%);
  }
}

The example requires a color font named My Color Font with palette-based glyphs.

The font name is a placeholder and must be replaced with the name of an actual compatible font.

The light value provides a fallback when the browser does not support palette-mix().

When the function is supported, the browser blends corresponding colors from the light and dark palettes.

The result depends on the font's palette definitions, so the same CSS can produce different colors with different fonts.

The preview shows ordinary text because no external color font is loaded. It does not demonstrate an actual palette mixture.

To see the function in action, load a compatible color font and apply the example CSS in a browser that supports palette-mix().

Custom Palette Example

This example defines two custom palettes and blends them using the palette-mix() function.

CSS:

@font-face {
  font-family: "Demo Color Font";
  src: url("fonts/demo-color-font.woff2") format("woff2");
}
@font-palette-values --ocean {
  font-family: "Demo Color Font";
  base-palette: 0;
  override-colors:
    0 #0066cc,
    1 #00aacc;
}
@font-palette-values --sunset {
  font-family: "Demo Color Font";
  base-palette: 0;
  override-colors:
    0 #cc5500,
    1 #ffcc66;
}
.custom-palette-text {
  font-family: "Demo Color Font", sans-serif;
  font-size: 48px;
  font-palette: --ocean;
}
@supports (font-palette: palette-mix(in oklab, --ocean, --sunset)) {
  .custom-palette-text {
    font-palette: palette-mix(in oklab, --ocean 60%, --sunset 40%);
  }
}

HTML:

<p class="custom-palette-text">COLOR FONT</p>

The --ocean palette contains blue and cyan entries, while --sunset contains orange and yellow entries.

The mixture gives the ocean palette a 60% contribution and the sunset palette a 40% contribution.

The browser calculates corresponding palette entries using Oklab interpolation.

The example font URL is a placeholder. Replace it with a compatible color font that includes the referenced palette entries.

If the font does not use palette entries 0 and 1, the overrides may have no visible effect.

If palette-mix() is unsupported, the --ocean palette remains selected where custom font palettes are supported.

Common Uses

The palette-mix() function is intended for applications that use palette-based color fonts.

For example:

.heading-a {
  font-palette: palette-mix(in oklab, light 75%, dark 25%);
}
.heading-b {
  font-palette: palette-mix(in oklab, light 50%, dark 50%);
}
.heading-c {
  font-palette: palette-mix(in oklab, light 25%, dark 75%);
}

These declarations request three different mixtures of the same two font palettes.

The visible effect depends on the selected color font and its palette information.

Limitations

The palette-mix() function has several important requirements and limitations.

• It is intended for the font-palette property.
• It mixes font palettes, not ordinary CSS color values.
• A compatible palette-based color font is required for a visible effect.
• The font must provide meaningful palette entries for the selected palettes.
• Custom palette names must be defined using @font-palette-values.
• The color interpolation method must use valid CSS color interpolation syntax.
• Different color spaces can produce different intermediate colors.
• The resulting colors depend on the font's palette definitions.
• Browser support is limited and should be checked before production use.
• Unsupported browsers need a suitable font palette fallback.

For example, this is valid syntax:

font-palette: palette-mix(in oklab, light, dark);

The following is invalid because the color interpolation method is missing:

font-palette: palette-mix(light, dark);

The following uses the wrong CSS property:

background-color: palette-mix(in oklab, light, dark);

The background-color property requires a color value, not a font palette.

To mix ordinary colors, use color-mix() instead:

background-color: color-mix(in oklab, blue, white);

For reliable rendering, provide a fallback font-palette value and test with the actual color font used by the website.

Browser Support

The CSS palette-mix() function has Limited availability and is not Baseline across major browser engines.

Support for font-palette and @font-palette-values does not necessarily mean that a browser supports palette-mix().

For example:

.color-text {
  font-palette: light;
  font-palette: palette-mix(in oklab, light, dark);
}

Browsers that recognize palette-mix() can use the mixed palette. Browsers that do not recognize the function retain the preceding valid declaration.

A feature query can also be used:

.color-text {
  font-palette: light;
}
@supports (font-palette: palette-mix(in oklab, light, dark)) {
  .color-text {
    font-palette: palette-mix(in oklab, light, dark);
  }
}

The feature query tests whether the browser accepts the specified CSS declaration.

It does not verify that the selected font contains suitable color palettes.

For current compatibility information, visit Can I Use? and search for CSS palette-mix() and CSS font-palette.

Specifications

The palette-mix() function is defined in the CSS Fonts Module Level 4 .

The specification describes font palettes, custom palette values, and interpolation between palettes.

Color interpolation methods are also defined by the CSS Color Module Level 4 .

Related CSS features include font-palette, @font-palette-values, color-mix(), oklab(), and oklch().