base-palette

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨November 2022⁩.

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

Related at-rule	`@font-palette-values`
Initial value	`n/a (required)`
Computed value	as specified

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", fantasy; } @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; }