Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Test @font-palette-values override-colors using relative colors (reference)</title>
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#override-color">
<style>
@font-face {
font-family: "COLR Palettes";
src: url("resources/COLR-palettes-test-font.ttf");
}
/* Reference: pre-computed values for lch(from blue calc(0.5 * l) c h) and lch(from red calc(0.5 * l) c h) */
@font-palette-values --relative-color {
font-family: "COLR Palettes";
override-colors: 3 lch(14.7841 131.201 301.364), 7 lch(27.1453 106.837 40.8577);
}
@font-palette-values --simple-color {
font-family: "COLR Palettes";
override-colors: 3 blue, 7 red;
}
.test {
font-family: "COLR Palettes";
font-size: 3rem;
}
</style>
</head>
<body>
<p>Relative color: <span class="test" style="font-palette: --relative-color;">A</span></p>
<p>Simple color: <span class="test" style="font-palette: --simple-color;">A</span></p>
<p>Default: <span class="test">A</span></p>
</body>