base-palette

Baseline 2022
Newly available

Since November 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The base-palette CSS descriptor is used to specify the name or index of a pre-defined palette to be used for creating a new palette. If the specified base-palette does not exist, then the palette defined at index 0 will be used.

Syntax

css
@font-palette-values --one {
  base-palette: 1;
}

The base-palette descriptor is specified using a zero-based index of the font-maker created palettes.

Values

<index>

Specifies the index of the pre-defined palette to use.

Formal definition

Formal syntax

base-palette = 
light |
dark |
<integer [0,∞]>

Examples

Changing the default palette in a font

Using the Rocher Color Font, this example shows two instances of switching the default palette in the font to an alternate palette created by the font-maker.

HTML

html
<h2>default base-palette</h2>
<h2 class="two">base-palette at index 2</h2>
<h2 class="five">base-palette at index 5</h2>

CSS

css
@font-face {
  font-family: "Rocher";
  src: url("[path-to-font]/RocherColorGX.woff2") format("woff2");
}

h2 {
  font-family: "Rocher";
}

@font-palette-values --two {
  font-family: "Rocher";
  base-palette: 2;
}

@font-palette-values --five {
  font-family: "Rocher";
  base-palette: 5;
}

.two {
  font-palette: --two;
}

.five {
  font-palette: --five;
}

Result

Example showing 3 different base-palettes of Rocher color font

Specifications

Specification
CSS Fonts Module Level 4
# base-palette-desc

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
base-palette

Legend

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

Full support
Full support

See also