css at rule descriptor
`override-colors` CSS at-rule descriptor
The override-colors CSS descriptor is used to override colors in the chosen base-palette for a color font.
Syntax
/* basic syntax */
override-colors: <index of color> <color>;
/* using color names */
override-colors: 0 red;
/* using hex-color */
override-colors: 0 #ff0000;
/* using rgb */
override-colors: 0 rgb(255 0 0);
/* overriding multiple colors */
override-colors:
0 red,
1 green,
2 blue;
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
Formal syntax
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
<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;
}
@font-face {
font-family: "Noto Color Emoji";
font-style: normal;
font-weight: normal;
src: url("https://fonts.gstatic.com/l/font?kit=Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diywYkdG3gjD0U&skey=a373f7129eaba270&v=v24")
format("woff2");
}
.emoji {
font-family: "Noto Color Emoji", 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
<h2 class="normal-palette">Normal Palette</h2>
<h2 class="override-palette">Override Palette</h2>
CSS
@font-face {
font-family: "Rocher";
src: url("[path-to-font]/RocherColorGX.woff2") format("woff2");
}
h2 {
font-family: "Rocher", fantasy;
}
@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 that in base-palette 3, the color at index 0 is overridden with rebeccapurple.
