How to Inspect and Debug Wide-Gamut CSS Colours in Microsoft Edge DevTools

Modern computer displays, tablets, and smartphones—including Apple Retina displays, high-end OLED monitors, and wide-colour laptop panels—routinely render rich, vibrant colours that extend far beyond the traditional sRGB colour space. However, standard legacy web colour models (such as hex codes #ff0055, rgb(), and hsl()) are strictly confined to the narrow sRGB spectrum, rendering them incapable of displaying high-chroma greens, fluorescent cyans, and intense reds.

The CSS Color Module Level 4 standard modernised web typography and design by introducing wide-gamut colour models, including Display P3, OKLCH, and LAB. Microsoft Edge DevTools provides a dedicated wide-gamut colour picker and colour space inspection suite, allowing web developers to debug, preview, and convert wide-gamut palettes directly in the browser.

Understanding Wide-Gamut Colour Spaces in Modern CSS

Modern CSS introduces several advanced colour declaration syntaxes:

• Display P3: Offers approximately 50% more visible colours than sRGB, particularly across vibrant greens and vivid reds. Declared via color(display-p3 1 0 0.2).
• OKLCH: A perceptually uniform colour space defined by Lightness (L), Chroma (C), and Hue (H). Unlike HSL, increasing hue in OKLCH does not alter human-perceived brightness, making it the premier choice for accessible web colour systems. Declared via oklch(0.65 0.24 135).
• LAB / OKLAB: Device-independent colour spaces designed to encompass all colours discernible by the human eye.

Inspecting Wide-Gamut Colours in Edge DevTools

To inspect and audit colour definitions applied to your webpage elements:

1. Launch Microsoft Edge and navigate to your website or design prototype.
2. Press F12 or Ctrl + Shift + I to open Edge DevTools.
3. Select the Elements panel.
4. Select any HTML element styled with CSS colour declarations.
5. In the Styles pane on the right-hand side, locate the CSS property (such as background-color or color).
6. Click the small square colour swatch located immediately next to the colour value.

Edge DevTools opens an interactive colour picker overlay displaying numerical channels and colour space indicators.

Using the Wide-Gamut Color Picker and Gamut Boundary Line

When inspecting wide-gamut colours in Microsoft Edge, the colour picker includes a specialised visual diagnostic aid called the Gamut Boundary Line:

• Gamut Boundary Arc: A distinct curved boundary line appears across the colour gradient field. The area inside the curve represents colours that fall within the standard sRGB gamut, while the area outside the curve represents wide-gamut Display P3 colours.
• Detecting Gamut Clipping: If you select a colour outside the boundary arc on a display that does not support wide-gamut output, Edge DevTools indicates that the colour will clip back to the closest sRGB equivalent on standard monitors.

Converting Between Colour Spaces in Real Time

Edge DevTools allows instant conversion between legacy formats and modern wide-gamut standards:

1. With the colour picker open, locate the format toggle buttons at the bottom of the picker sheet.
2. Hold Shift and click the colour swatch or format toggle arrows to cycle through supported notations:
   • HEX (e.g. #2dfa7a)
   • RGB / RGBA
   • HSL / HSLA
   • HWB
   • Display P3 (color(display-p3 ...))
   • OKLCH (oklch(...))
   • LAB (lab(...))
3. DevTools instantly converts the active channel parameters while maintaining visual colour equivalency, allowing you to copy the updated CSS code directly into your stylesheet.