font-palette
============

The **`font-palette`** CSS property allows specifying one of the many palettes contained in a font that a user agent should use for the font. Users can also override the values in a palette or create a new palette by using the @font-palette-values at-rule.

Syntax
------


```css
/\* Using a font-defined palette \*/
font-palette: normal;

/\* Using a user-defined palette \*/
font-palette: --one;
```

### Values

`normal`

Specifies the default color palette or the default glyph colorization (set by the font maker) to be used for the font. With this setting, the palette in the font at index 0 is rendered.

`light`

Specifies the first palette in the font that matches 'light' to be used for the font. Some fonts contain metadata that identify a palette as applicable for a light (close to white) background. If a font does not have this metadata, the `light` value behaves as `normal`.

`dark`

Specifies the first palette in the font that matches 'dark' to be used for the font. Some fonts contain metadata that identify a palette as applicable for a dark (close to black) background. If a font does not have this metadata, the value behaves as `normal`.

`<palette-identifier>`

Allows you to specify your own values for the font palette by using the @font-palette-values at-rule. This value is specified using the <dashed-ident> format.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

font-palette =   
  normal                |  
  light                 |  
  dark                  |  
  <palette-identifier>  |  
  <palette-mix()>         
  
<palette-mix()> =   
  palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )    
  
<color-interpolation-method> =   
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]    
  
<rectangular-color-space> =   
  srgb          |  
  srgb-linear   |  
  display-p3    |  
  a98-rgb       |  
  prophoto-rgb  |  
  rec2020       |  
  lab           |  
  oklab         |  
  xyz           |  
  xyz-d50       |  
  xyz-d65         
  
<polar-color-space> =   
  hsl    |  
  hwb    |  
  lch    |  
  oklch    
  
<hue-interpolation-method> =   
  [ shorter | longer | increasing | decreasing ] hue    
  
```

Examples
--------

### Specifying a dark palette

This example allows you to use the first palette marked as *dark* (works best on a near black background) by the font-maker.


```css
@media (prefers-color-scheme: dark) {
  .banner {
    font-palette: dark;
  }
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-palette-prop |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `@font-palette-values`
* `base-palette` descriptor
* `font-family` descriptor
* `override-colors` descriptor