CSS font-palette Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Define named palettes that map to palette indices provided by the color emoji font */
@font-palette-values PaletteDefault {
    font-family: "Segoe UI Emoji";
    palette: 0;
}

@font-palette-values PaletteWarm {
    font-family: "Segoe UI Emoji";
    palette: 1;
}

@font-palette-values PaletteCool {
    font-family: "Segoe UI Emoji";
    palette: 2;
}

/* Page styling */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f7f7fb;
    color: #111;
    padding: 2rem;
}

.container {
    max-width: 680px;
    margin: 0 auto;
}

h1 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.line {
    margin: 0.75rem 0;
    font-size: 1rem;
}

.emoji {
    font-size: 2rem;
    line-height: 1;
    vertical-align: middle;
    font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", "Twemoji Mozilla", "EmojiOne Color", sans-serif;
}

/* Apply different named palettes to each inline emoji set */
.emoji.default {
    font-palette: PaletteDefault;
}

.emoji.pal1 {
    font-palette: PaletteWarm;
}

.emoji.pal2 {
    font-palette: PaletteCool;
}

.note {
    font-size: 0.85rem;
    color: #555;
    margin-top: 1rem;
}</style></head><body><div class="container">
    <h1>font-palette demo</h1>
    <p class="line">Default: <span class="emoji default">😀 ❤️ 🔥</span></p>
    <p class="line">Palette 1: <span class="emoji pal1">😀 ❤️ 🔥</span></p>
    <p class="line">Palette 2: <span class="emoji pal2">😀 ❤️ 🔥</span></p>
    <p class="note">Note: your system font must support color palettes (for example: "Segoe UI Emoji", "Noto Color Emoji").</p>
</div></body></html>