Widely availableSupported across all major browsers. Safe to use in production.
Typography Widely available

font-palette

The font-palette CSS property selects a color palette from the font, optionally overriding individual colors in the @font-palette-values at-rule.

Typography

Overview

The font-palette CSS property selects a color palette from the font, optionally overriding individual colors in the @font-palette-values at-rule.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-palette
101
101
107
15.4
101
15.4
DOM API
CSSFontPaletteValuesRule

The CSSFontPaletteValuesRule interface represents an @font-palette-values at-rule.
101
101
107
15.4
101
15.4
basePalette

The read-only basePalette property of the CSSFontPaletteValuesRule interface indicates the base palette associated with the rule.
101
101
107
15.4
101
15.4
fontFamily

The read-only fontFamily property of the CSSFontPaletteValuesRule interface lists the font families the rule can be applied to. The font families must be named families; generic families like courier are not valid.
101
101
107
15.4
101
15.4
name

The read-only name property of the CSSFontPaletteValuesRule interface represents the name identifying the associated @font-palette-values at-rule. A valid name always starts with two dashes, such as --Alternate.
101
101
107
15.4
101
15.4
overrideColors

The read-only overrideColors property of the CSSFontPaletteValuesRule interface is a string containing a list of color index and color pair that are to be used instead. It is specified in the same format as the corresponding @font-palette-values/override-colors descriptor.
101
101
107
15.4
101
15.4
Other
css.at-rules.font-palette-values

The @font-palette-values CSS at-rule allows you to customize the default values of font-palette created by the font-maker.
101
101
107
15.4
101
15.4
CSS at-rule
base-palette

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.
101
101
107
15.4
101
15.4
font-family

The @font-palette-values descriptor font-family is used to specify which font-family palette values are to be applied to. This need to match exactly the values used when setting the CSS font-family.
101
101
107
15.4
101
15.4
override-colors

The override-colors CSS descriptor is used to override colors in the chosen base-palette for a color font.
101
101
107
15.4
101
15.4
CSS property
dark
101
101
107
15.4
101
15.4
light
101
101
107
15.4
101
15.4
normal
101
101
107
15.4
101
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Use built-in palette */
.emoji {
  font-palette: dark;
}

/* Custom palette */
@font-palette-values --brand-palette {
  font-family: "MyColorFont";
  override-colors:
    0 #ff6600,
    1 #0066ff;
}

.branded {
  font-family: "MyColorFont";
  font-palette: --brand-palette;
}

Live demo

no-mlpalette

font-palette no-mlpalette demo.

PreviewFullscreen

Dark palette

font-palette darkpalette demo.

PreviewFullscreen

Light palette

font-palette lightpalette demo.

PreviewFullscreen

Use cases

  • Using font-palette

    The font-palette CSS property selects a color palette from the font, optionally overriding individual colors in the @font-palette-values at-rule.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features