The font-palette CSS property allows selecting a palette from a color font. In combination with the @font-palette-values at-rule, custom palettes can be defined. Use cases: designs where an icon or emoji font is used in combination with dark or light mode, or multi-colored icon fonts that are colorised using font-palette to harmonise with the content's color scheme. font-palette increases efficiency of color font uses, as no server roundtrip is needed for changing the colors of the font.

Motivation

font-palette amplifies the utility of COLR/CPAL color font support that we already shipped. Palette styling provides the missing link between CSS styling and the colors that are in the font. An icon font can be made to match the content's color scheme. Use cases such as Plakato Color Grade (https://underware.nl/fonts/plakato/features/color/) no longer need a server round-trip to regenerate a new font.

Demo

Specification

Specification link


Final published standard: Recommendation, Living Standard, Candidate Recommendation, or similar final form

Status in Chromium

Blink>Fonts


In developer trial (Behind a flag) (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Search tags

palette, font-palette, color, colr, cpal, animation,

Last updated on 2022-04-14