font-palette | CSS CSS Properties

Selects a pre-defined color palette for color fonts. Lets you apply different color schemes to emoji and color glyphs.

Quick example

.dark { font-palette: dark; }
.emoji { font-palette: emoji; }

Syntax

normal | light | dark | <palette-identifier> | <palette-mix()>

Quick facts

Initial value

normal

Inherited

Yes

Examples

Use a predefined color palette from a variable font

@supports (font-palette: light) {
  .heading {
    font-family: "Noto Color Emoji", sans-serif;
    font-palette: light; /* Uses light palette from font */
  }
}

Many modern fonts include multiple color palettes. Use font-palette to switch between them without downloading multiple files.

Create light and dark mode themes

:root[data-theme="light"] {
  font-palette: light;
}

:root[data-theme="dark"] {
  font-palette: dark;
}

Switch between light and dark color palettes in fonts that support multiple palettes, great for theme switching.

Override palette colors with CSS variables

@supports (font-palette: 0) {
  .emoji {
    font-palette: 0; /* Use first palette */
    --c0: rgb(255, 0, 0); /* Override specific palette colors */
  }
}

Some fonts let you override individual palette colors with CSS custom properties.

font-palette Browser Support

Widely availableSince 202272% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.

Safe to use without fallbacks.

View on caniuse.com →View on MDN →View on webstatus.dev →View spec →Learn more about Baseline →

101+

107+

15.4+

101+

Common pitfalls

Only works with variable fonts that include palettes

Not all fonts support font-palette. It only works with color fonts (like Noto Color Emoji or fonts with @font-palette-values defined).

Limited browser support

font-palette is relatively new (2024). Use @supports to check support and provide fallbacks for older browsers.

Palette indices are font-specific

If you use palette index (0, 1, 2) instead of named palettes, switching fonts breaks your styling. Use named palettes (light, dark) when possible.