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

Newly available Since 2023 72% global usage

Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Works in all modern browsers. May need a fallback for older browsers.

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

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.