Sampling Screen Colors with Chromium's EyeDropper API

The EyeDropper API in Chromium-based browsers revolutionizes web design applications by providing a built-in method to sample pixel colors from anywhere on a user's screen, even outside the browser window. This article explores how the API bridges the gap between web applications and the operating system, detailing its simple JavaScript implementation, its reliance on native system interfaces, and the strict security measures that protect user privacy during the color-picking process.

Historically, creative web applications could only sample colors from within a specific HTML <canvas> element, leaving designers unable to grab colors from other open applications, desktop backgrounds, or different browser tabs. The EyeDropper API solves this by tapping directly into the operating system's native color-picking capabilities. When triggered, the browser temporarily hands control over to an OS-level magnifying glass cursor. This cursor can move freely across the entire display, inspecting the exact pixel data rendered on the screen regardless of which application owns that space.

Implementing this functionality in a web application requires minimal code. Developers first check if the EyeDropper interface is supported in the user's browser window object. If it is, the application creates a new instance of the EyeDropper class and calls its open() method.

if ('EyeDropper' in window) {
  const eyeDropper = new EyeDropper();
  try {
    const result = await eyeDropper.open();
    console.log(result.sRGBHex); 
  } catch (error) {
    console.log('Color selection was canceled.');
  }
}

When open() is called, the browser enters "eyedropper mode" and returns a JavaScript Promise. As the user moves their mouse across the screen, they see a magnified grid of pixels. Once the user clicks on their desired pixel, the Promise resolves and returns an object containing the sRGBHex property, which is a string representing the selected color in standard hexadecimal format (such as #ff0000). The web application can then immediately apply this value to its tools, palettes, or canvases.

Because allowing a website to read pixel data from outside the browser poses significant security and privacy risks, Chromium enforces strict boundaries on how the EyeDropper API operates:

• User Gesture Requirement: A web app cannot secretly activate the eyedropper in the background. The open() method must be triggered by a direct user action, such as clicking a specific button within the app.
• No Continuous Screen Reading: The web application is completely blind to the pixels the user hovers over while moving the magnifying glass. The browser only shares the color data of the single, final pixel that the user explicitly clicks.
• Visual Indicators and Cancellation: The magnified cursor acts as a clear visual indicator that the screen is being sampled. Users can abort the process at any time by pressing the Escape key, which rejects the Promise and prevents any data from being sent to the web app.Developers can also programmatically abort the mode using an AbortController.

Through this combination of native OS integration, asynchronous JavaScript promises, and strict privacy guardrails, the EyeDropper API gives web-based creative tools the exact same screen-sampling power as traditional desktop software.