How to Inspect and Debug CSS OKLCH Perceptual Colour Palettes in Safari Web Inspector

Creating consistent, accessible design system colour palettes using traditional sRGB colour models—such as HEX, RGB, and HSL—has long plagued front-end engineers. In standard HSL (Hue, Saturation, Lightness), mathematical lightness does not match human perception: a yellow hue at 50% lightness appears dramatically brighter than a blue hue at the exact same 50% lightness. This non-uniformity makes automated accessible contrast calculations, dynamic dark mode switching, and harmonious tints unpredictable. The CSS Color Module Level 4 specification solves this through the oklch() colour space. Supported natively across modern WebKit and Safari, developers can inspect, convert, and debug perceptually uniform colour palettes directly in the Safari Web Inspector.

Understanding the OKLCH Perceptual Colour Space

The OKLCH model is designed around human visual perception (based on the Oklab colour space developed by Björn Ottosson). Unlike sRGB, which is constrained to legacy monitor displays, OKLCH supports wide-gamut colour reproduction (such as Display-P3 and Rec. 2020) while maintaining three intuitive parameters:

• L (Lightness): Represents perceived brightness from 0% (pure black) to 100% (pure white). Changing the hue or chroma does not alter the perceived brightness level.
• C (Chroma): Measures colour saturation or purity, ranging from 0 (neutral greyscale) to approximately 0.37 or higher depending on the display’s physical gamut boundaries.
• H (Hue): The colour angle along the colour wheel, specified in degrees (0deg to 360deg).
• A (Alpha): Optional transparency channel between 0 and 1 (or 0% and 100%).

Basic Syntax and Designing Accessible Palettes

Because lightness in OKLCH is perceptually uniform, establishing consistent button states and accessible text pairs becomes effortless:

/* Accessible theme definition in OKLCH */
:root {
    /* Base brand color */
    --color-primary: oklch(0.6 0.22 250);

    /* Hover state: identical hue and chroma, reduced lightness */
    --color-primary-hover: oklch(0.5 0.22 250);

    /* Subdued surface: identical hue, minimal chroma, high lightness */
    --color-surface: oklch(0.96 0.02 250);

    /* Accessible high-contrast text guaranteed across all hues */
    --color-text-on-primary: oklch(0.98 0.01 250);
}

If you swap the hue angle from 250 (blue) to 140 (green), the perceived brightness remains perfectly identical, ensuring WCAG contrast compliance without manual readjustment.

Inspecting OKLCH Values in Safari Web Inspector

Safari Web Inspector provides native tooling for wide-gamut and perceptual colour formats:

1. Open Safari and navigate to your web project.
2. Right-click the element and select Inspect Element to launch Safari Web Inspector.
3. In the right-hand panel, select the Styles tab.
4. Locate your CSS rule containing oklch() declarations. Notice the inline colour preview swatch beside the value.
5. Click the colour swatch to open Safari’s interactive Colour Picker popup.
6. Shift-click the format toggle or select the dropdown to cycle between HEX, RGB, HSL, and OKLCH representations.

Debugging Wide Gamut Clipping and Gamut Mapping

Modern Apple displays (MacBook Pro Liquid Retina XDR, iMac, iPhone, and iPad) natively support the Display-P3 colour gamut, allowing OKLCH colours with high chroma values that cannot physically render on standard sRGB displays. In Safari Web Inspector:

1. When selecting vibrant high-chroma colours in the Colour Picker, observe whether a warning icon appears beside the gamut indicator.
2. Safari automatically maps out-of-gamut colours to the nearest renderable boundary using CSS Color 4 gamut mapping algorithms, preventing harsh hue shifting.
3. Inspect the Computed tab to verify how Safari resolves the final clamped colour on the user’s specific display profile.

Creating Perceptually Smooth Gradients in Safari

Standard CSS gradients interpolated in sRGB often pass through an ugly, muddy grey midpoint between complementary colours. By declaring OKLCH as the interpolation colour space, gradients transition smoothly with vibrant intermediate tones:

/* Perceptually uniform gradient without muddy midpoints */
.hero-gradient {
    background: linear-gradient(
        in oklch to right,
        oklch(0.65 0.25 30),  /* Vibrant coral */
        oklch(0.75 0.2 140)   /* Bright green */
    );
}

Inspecting this rule in Safari confirms that the WebKit compositor calculates colour transitions along the cylindrical OKLCH curve rather than linear RGB space.

Providing Progressive Enhancement for Legacy Browsers

While modern browsers support OKLCH, maintain fallbacks for legacy clients using CSS cascading rules or feature queries:

/* Fallback for legacy browsers */
.callout-box {
    background-color: #007aff;
}

/* Enhanced perceptual styling for modern Safari */
@supports (color: oklch(0.6 0.2 250)) {
    .callout-box {
        background-color: oklch(0.6 0.22 250);
    }
}

Auditing the @supports evaluation in Safari Web Inspector confirms that Safari applies the modern perceptual definition seamlessly.