How to Inspect, Convert, and Test Colours Using the Colour Picker in Microsoft Edge DevTools

Delivering an accessible, visually compelling digital product requires precise colour management. Web developers and digital designers frequently need to sample colours directly from live webpages, convert legacy RGB or HEX colour codes into modern perceptual colour spaces like OKLCH, and verify that foreground text meets strict Web Content Accessibility Guidelines (WCAG) contrast ratios. Rather than relying on external browser extensions or standalone design tools, Microsoft Edge DevTools provides a feature-rich, integrated Colour Picker.

Built directly into the Elements panel, the Microsoft Edge Colour Picker allows you to sample pixels anywhere on your screen, cycle through varied CSS colour notations with a single keystroke, inspect alpha transparencies, and automatically adjust hues to meet AA and AAA accessibility thresholds. In this comprehensive guide, you will learn how to open, navigate, convert, and test colour palettes using Microsoft Edge DevTools.

Key Capabilities of the Microsoft Edge DevTools Colour Picker

The Colour Picker inside Microsoft Edge offers several advanced engineering features designed for modern frontend development workflows:

• Broad Format Conversion: Effortlessly convert active colour values between HEX, RGB, HSL, HWB, and modern wide-gamut formats including OKLCH and LCH.
• Eyedropper Tool: Sample colour values from any element rendered on the webpage—or even outside the browser window across your desktop canvas.
• WCAG Contrast Analysis: Real-time calculation of the contrast ratio between the text foreground and background container, complete with compliance indicators for WCAG 2.1 AA and AAA benchmarks.
• Colour Palette Integration: Immediate access to custom palettes, CSS variables defined across the document, and Material Design or page-specific colour collections.

Step 1: Open Microsoft Edge DevTools and Locate CSS Colours

To inspect the colour attributes of any web component:

1. Open Microsoft Edge and navigate to the target webpage.
2. Right-click the element you want to inspect (such as a button, card, or heading) and choose Inspect. Alternatively, press F12 or Ctrl + Shift + I (Cmd + Option + I on macOS).
3. In the Elements panel, ensure the Styles sub-tab is selected on the right side.
4. Scan the CSS rules for properties containing colours, such as color, background-color, border-color, or CSS custom properties (variables).
5. Notice the small colour square (swatch preview) adjacent to the colour definition.

Step 2: Activating the Colour Picker Interface

To open the dedicated Colour Picker GUI, click directly on the small colour square swatch next to any CSS colour declaration. A popover window will appear displaying:

• The main 2D colour saturation and brightness field.
• A continuous hue slider bar.
• An opacity (alpha channel) slider bar.
• The active colour value box.
• The eyedropper pipette icon.
• The contrast ratio analysis section.

Step 3: Converting Between HEX, RGB, HSL, and OKLCH Formats

One of the most practical everyday utilities of the Colour Picker is rapid colour model conversion:

1. With the Colour Picker open, locate the two small vertical cycling arrows situated next to the colour value input at the bottom of the popover.
2. Click the cycling arrows to transform the colour representation. With each click, DevTools cycles through the available formats:
   • HEX / Hexadecimal: #2563eb or #2563ebff
   • RGB / RGBA: rgb(37, 99, 235)
   • HSL / HSLA: hsl(221, 83%, 53%)
   • HWB: hwb(221 15% 8%)
   • OKLCH: oklch(0.55 0.22 258)
3. Alternatively, hold down the Shift key and click the colour swatch square directly within the Styles panel to cycle through formats instantly without expanding the full popover.

When you select a format, DevTools updates the rule directly in the active stylesheet, allowing you to copy the updated CSS rule directly into your codebase.

Step 4: Sampling Colours with the Eyedropper Tool

If you need to match a colour from a logo, image banner, or desktop window:

1. Click the Eyedropper icon (pipette) in the top-left corner of the Colour Picker popover. Your cursor transforms into a circular magnifying loupe.
2. Hover the loupe over any pixel on your webpage. The loupe displays a pixel grid with the precise HEX value beneath it.
3. Click once to capture the pixel. The Colour Picker immediately updates to reflect the sampled colour.

Step 5: Testing and Fixing WCAG Accessibility Contrast Ratios

Ensuring that text is readable against its background is a fundamental web accessibility standard. The Edge Colour Picker includes a dedicated Contrast ratio section:

1. Open the Colour Picker on a color declaration applied to text.
2. Expand the Contrast ratio line item inside the picker. DevTools will calculate the exact mathematical ratio (e.g., 4.85).
3. Review the compliance checkmarks:
   • AA: Requires a minimum ratio of 4.5:1 for normal body text and 3:1 for large text.
   • AAA: Requires an enhanced ratio of 7:1 for normal text and 4.5:1 for large text.
4. Notice the two curved lines drawn across the colour gradient field:
   • The top line demarcates the boundary for AA compliance.
   • The bottom line demarcates the boundary for AAA compliance.
5. To automatically fix an inaccessible colour, click the small magic wand or refresh icon next to the AA or AAA indicator. DevTools will automatically nudge the luminance of your selected hue to the closest value that passes the standard.

Step 6: Choosing Colours from Page Palettes and CSS Variables

At the bottom of the Colour Picker popover, you will see a palette selector:

• Page Colours: Automatically extracts every unique colour parsed across all loaded stylesheets.
• CSS Variables: Lists custom properties (such as --primary-color, --surface-bg) defined across your stylesheet architecture.
• Material Design: Standardised colour swatches for building Material Design compliant layouts.

Selecting any swatch from these palettes applies the corresponding variable or hex value immediately to the inspected node.

Frequently Asked Questions

Can I sample colours outside the Microsoft Edge browser window?

Yes. When the eyedropper tool is engaged, you can move your cursor outside the Edge application frame across multiple monitors to sample colours from external applications, desktop wallpapers, or PDF documents.

Why are OKLCH and modern colour spaces beneficial in CSS?

Traditional sRGB, HEX, and HSL colour spaces do not exhibit uniform human perception of lightness; changing hue in HSL causes perceived brightness to fluctuate drastically. Perceptual spaces like OKLCH provide uniform perceived lightness, making algorithmic palette generation and theme switching significantly more consistent.

Does modifying colours in Edge DevTools modify my source files?

Edits made in the Styles panel are temporary runtime modifications. To make them permanent, copy the converted declaration into your project CSS file, or configure Edge DevTools Workspaces to map local repository files directly to the browser.

Why is the Contrast Ratio section missing for some elements?

If an element is rendered over a complex CSS gradient, a backdrop filter, or a transparent background with no detectable solid underlying container, DevTools cannot compute a single mathematical contrast ratio and will display a question mark or indicate that the background could not be determined.