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.
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.
Final published standard: Recommendation, Living Standard, Candidate Recommendation, or similar final form
Status in Chromium
In developer trial (Behind a flag)
Consensus & Standardization
Search tagspalette, font-palette, color, colr, cpal, animation,
Last updated on 2022-04-14