How to Inspect CSS font-palette-values and Custom Color Font Palettes in Safari Web Inspector

Color fonts (such as COLRv0, COLRv1, and SVG-in-OpenType) allow glyphs to incorporate multi-colored gradients, embedded palettes, and chromatic layer shading. Historically, web developers were restricted to whatever fixed color scheme the font creator hardcoded inside the binary. The CSS @font-palette-values at-rule liberates chromatic typography by empowering developers to remap individual palette color slots or define brand-tailored palettes directly in CSS. Safari Web Inspector includes dedicated tools to audit color font palettes live. This guide covers inspecting @font-palette-values in Safari.

The Mechanics of CSS @font-palette-values

The @font-palette-values rule binds custom colors to a specific typeface family using the font-family descriptor. Within the rule, authors can reference an existing built-in font palette via base-palette and override specific indexed color layers using the override-colors descriptor: override-colors: 0 #hex, 1 #hex, .... Downstream elements activate the palette by declaring font-palette: --custom-palette-name;.

Authoring Custom Color Font Themes in CSS

Configure brand-aligned color font palettes for headlines and illustrative icons:

/* 1. Register custom palette matching light brand aesthetics */
@font-palette-values --BrandLightPalette {
  font-family: "Nabla";
  base-palette: 0;
  override-colors:
    0 #2563eb,
    1 #60a5fa,
    2 #93c5fd,
    3 #dbeafe;
}

/* 2. Register neon cyber palette for dark mode */
@font-palette-values --BrandDarkPalette {
  font-family: "Nabla";
  base-palette: 1;
  override-colors:
    0 #ec4899,
    1 #a855f7,
    2 #6366f1,
    3 #1e1b4b;
}

/* 3. Apply dynamically */
h1.hero-title {
  font-family: "Nabla", system-ui, sans-serif;
  font-size: 3.5rem;
  font-palette: --BrandLightPalette;
}

[data-theme="dark"] h1.hero-title {
  font-palette: --BrandDarkPalette;
}

Inspecting Color Font Layers in Safari Web Inspector

1. Launch Safari on macOS and open your chromatic typography page.
2. Right-click the colored headline and select Inspect Element.
3. In Web Inspector, open the Elements tab and locate the Styles panel.
4. Scroll to the @font-palette-values at-rule displayed in the stylesheet declarations.
5. Click the color swatches beside individual override-colors indices to launch the visual color picker.
6. Modify layer colors live. Safari’s WebKit rendering engine updates the multi-tone font rasterization on the page in real time without refreshing.

Verifying Wide-Gamut Palette Interpolation

Safari’s implementation of @font-palette-values supports wide-gamut Display P3 colors within override-colors. Inspect the Computed tab to confirm that wide-gamut values (e.g. color(display-p3 1 0 0.2)) render accurately on high-DPI Apple Retina displays.