override-colors
===============

The **`override-colors`** CSS descriptor is used to override colors in the chosen base-palette for a color font.

Syntax
------


```css
/\* basic syntax \*/
override-colors: <index of color> <color>;

/\* using color names \*/
override-colors: 0 red;

/\* using hex-color \*/
override-colors: 0 #f00;

/\* using rgb \*/
override-colors: 0 rgb(255 0 0);

/\* overriding multiple colors \*/
override-colors:
  0 #f00,
  1 #0f0,
  2 #00f;

/\* overriding multiple colors with readability \*/
override-colors:
  0 #f00,
  1 #0f0,
  2 #00f;
```


The `override-colors` descriptor takes a comma-separated list of the color index and new color value.

The color index is zero-based and any color value can be used.

For each key-value pair of index and color, the color with the index in the specified base-palette will be overwritten. If the color font does not have a color at the specified index, it will be ignored.

### Values

`[ <integer [0,∞]> <absolute-color-base> ]`

Specifies the index of a color in a base-palette and the color to overwrite it with.

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

|  |  |
| --- | --- |
| Related at-rule | `@font-palette-values` |
| Initial value | `n/a (required)` |
| Computed value | as specified |

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

override-colors =   
  [ <integer [0,∞]> <absolute-color-base> ]#    
  
<absolute-color-base> =   
  <hex-color>                |  
  <absolute-color-function>  |  
  <named-color>              |  
  transparent                  
  
<absolute-color-function> =   
  <rgb()>    |  
  <rgba()>   |  
  <hsl()>    |  
  <hsla()>   |  
  <hwb()>    |  
  <lab()>    |  
  <lch()>    |  
  <oklab()>  |  
  <oklch()>  |  
  <color()>    
  
<rgb()> =   
  <legacy-rgb-syntax>  |  
  <modern-rgb-syntax>    
  
<rgba()> =   
  <legacy-rgba-syntax>  |  
  <modern-rgba-syntax>    
  
<hsl()> =   
  <legacy-hsl-syntax>  |  
  <modern-hsl-syntax>    
  
<hsla()> =   
  <legacy-hsla-syntax>  |  
  <modern-hsla-syntax>    
  
<hwb()> =   
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<lab()> =   
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<lch()> =   
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<oklab()> =   
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<oklch()> =   
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<color()> =   
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )    
  
<legacy-rgb-syntax> =   
  rgb( <percentage>#{3} , <alpha-value>? )  |  
  rgb( <number>#{3} , <alpha-value>? )        
  
<modern-rgb-syntax> =   
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )    
  
<legacy-rgba-syntax> =   
  rgba( <percentage>#{3} , <alpha-value>? )  |  
  rgba( <number>#{3} , <alpha-value>? )        
  
<modern-rgba-syntax> =   
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )    
  
<legacy-hsl-syntax> =   
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )    
  
<modern-hsl-syntax> =   
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<legacy-hsla-syntax> =   
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )    
  
<modern-hsla-syntax> =   
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<hue> =   
  <number>  |  
  <angle>     
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
<colorspace-params> =   
  <predefined-rgb-params>  |  
  <xyz-params>               
  
<predefined-rgb-params> =   
  <predefined-rgb> [ <number> | <percentage> | none ]{3}    
  
<xyz-params> =   
  <xyz-space> [ <number> | <percentage> | none ]{3}    
  
<predefined-rgb> =   
  srgb          |  
  srgb-linear   |  
  display-p3    |  
  a98-rgb       |  
  prophoto-rgb  |  
  rec2020         
  
<xyz-space> =   
  xyz      |  
  xyz-d50  |  
  xyz-d65    
  
```

Examples
--------

### Changing colors of emojis

This example shows how to override colors in the Noto Color Emoji color font to match your site's brand.

#### HTML


```html
<section class="hats">
  <div class="hat">
    <h2>Original Hat</h2>
    <div class="emoji">🎩</div>
  </div>
  <div class="hat">
    <h2>Red Hat</h2>
    <div class="emoji red-hat">🎩</div>
  </div>
</section>
```


#### CSS
```

.hats {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
```



```css
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diywYkdG3gjD0U&skey=a373f7129eaba270&v=v24)
    format("woff2");
}

.emoji {
  font-family: "Noto Color Emoji";
  font-size: 3rem;
}
@font-palette-values --red {
  font-family: "Noto Color Emoji";
  override-colors:
    0 rgb(74 11 0),
    1 rgb(149 22 1),
    2 rgb(183 27 1),
    3 rgb(193 28 1),
    4 rgb(230 34 1);
}
.red-hat {
  font-palette: --red;
}
```


#### Result

### Changing a color in an alternate base-palette

Using Rocher Color Font, this example shows how to override one color in the font.

#### HTML


```html
<h2 class="normal-palette">Normal Palette</h2>
<h2 class="override-palette">Override Palette</h2>
```


#### CSS


```css
@font-face {
  font-family: "Rocher";
  src: url("[path-to-font]/RocherColorGX.woff2") format("woff2");
}
h2 {
  font-family: "Rocher";
}
@font-palette-values --override-palette {
  font-family: "Rocher";
  base-palette: 3;
}
@font-palette-values --override-palette {
  font-family: "Rocher";
  base-palette: 3;
  override-colors: 0 rebeccapurple;
}
.normal-palette {
  font-palette: --normal-palette;
}
.override-palette {
  font-palette: --override-palette;
}
```


#### Result

This example shows the that in `base-palette` `3`, the color at index 0 is overridden with `rebeccapurple`.

![Example showing base-palette and base-palette with 1 color overridden](/en-US/docs/Web/CSS/@font-palette-values/override-colors/override-base-palette-color.jpg)

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # override-color |

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

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

See also
--------

* `@font-palette-values`
* `base-palette`
* `font-family`
* `font-palette`
* `CSSFontPaletteValuesRule.overrideColors`