How to Inspect CSS color-mix() Color Spaces in Safari Web Inspector

Creating dynamic design systems historically required CSS preprocessors like Sass or JavaScript utility functions to blend colours, generate accessible hover tints, and manage alpha channels. CSS Color Module Level 4 introduces the native color-mix() functional notation, allowing browsers to mix arbitrary colours directly in the stylesheet. Because blending behaviour varies dramatically depending on the chosen interpolation colour space (e.g., sRGB versus perceptually uniform spaces like OKLCH), Safari Web Inspector provides visual colour inspection tools to evaluate blended hues.

Understanding CSS color-mix() and Interpolation Spaces

The color-mix() notation requires specifying an interpolation colour space followed by two colours and optional percentages:

• color-mix(in <color-space>, <color1> [percentage], <color2> [percentage])
• Perceptually Uniform Spaces (oklch, oklab): Modern recommended spaces. Mixing complementary colours in OKLCH maintains consistent perceived lightness and avoids muddy grey dead zones in intermediate hues.
• Wide-Gamut Spaces (display-p3): Provides 25% richer greens and reds on modern Apple Retina displays.
• Legacy Rectangular Spaces (srgb, hsl): Traditional spaces prone to brightness clipping and hue distortion during blending.

Configuring Safari Web Inspector for Color Debugging

To inspect dynamic colour blending rules in Safari:

1. Open Safari and launch Web Inspector by pressing Option + Command + I.
2. Click the Elements tab.
3. Select your target DOM element in the tree.
4. In the Styles panel, locate declarations utilizing color-mix().

Inspecting and Testing Color Spaces in the Styles Panel

Review the following button theme implementation:

/* Mixing dynamic accent tint in perceptually uniform OKLCH */
.primary-button {
  background-color: color-mix(in oklch, #3b82f6 80%, #ffffff);
  border: 1px solid color-mix(in oklch, #3b82f6 60%, #000000);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 6px;
  transition: background-color 200ms ease;
}

.primary-button:hover {
  background-color: color-mix(in oklch, #3b82f6 90%, #ffffff);
}

Inside Safari Web Inspector:

1. Locate the color-mix() declaration in the Styles panel.
2. Notice the small interactive colour swatch icon directly preceding the declaration.
3. Shift-click the colour swatch to cycle through colour format representations (OKLCH, P3, Hex, HSL, RGB).
4. Click the swatch to open the visual Color Picker:
   • Inspect the colour gamut boundaries: Safari marks the gamut boundary line to show whether your mixed colour exceeds standard sRGB boundaries.
   • Modify interpolation percentages live in the stylesheet to observe real-time button re-rendering.
5. Switch to the Computed panel to verify the final resolved RGB or OKLCH hex value sent to the display compositor.

Comparing Interpolation Results Across Spaces

Demonstrate the power of perceptually uniform mixing by testing different colour space arguments in Web Inspector:

• color-mix(in srgb, blue, yellow): Produces an unappealing murky grey-brown mid-tone due to non-linear luminance compounding.
• color-mix(in oklch, blue, yellow): Transitions through vibrant intermediate greens, maintaining pleasing perceived lightness across the entire gradient curve.

Validating Progressive Enhancement Fallbacks

Ensure safe fallback behaviour for older browser clients lacking Color Module Level 4 support:

.alert-banner {
  background-color: #dbeafe; /* Fallback hex */
  background-color: color-mix(in oklch, #3b82f6 15%, #ffffff);
}

Safari Web Inspector respects standard cascading rules, verifying that modern engines adopt the advanced mix while older clients retain the solid fallback colour.