What is the EyeDropper API?

The EyeDropper API is a browser-native interface that activates an OS-level color picker cursor, letting you sample any pixel on your screen - including outside the browser window. It returns a single sRGB hex color value; no screenshot is captured.

Output formats

The picked color is displayed as HEX, RGB, and HSL with one-click copy buttons. Recent picks are saved in the palette row for quick comparison.

Privacy

Only the single sampled color value is returned by the API. No screen content is captured, stored, or sent to any server.

Browser compatibility

The EyeDropper API is supported in Chrome 95+, Edge 95+, and Opera 81+. It is not supported in Firefox or Safari as of 2025. Users on unsupported browsers will see a "not supported" message. As an alternative, the Camera Color Picker tool uses the camera to pick colors and works in all modern browsers.

Color management context

The EyeDropper API returns colors in the sRGB color space, which is the standard for web content. However, modern high-end displays - including many laptops, phones, and professional monitors - support wider color gamuts such as Display P3 or Rec. 2020. Colors that exist outside the sRGB gamut on these displays are clipped to the nearest sRGB value when sampled, meaning the returned hex value may not perfectly represent the visual color you see on screen. For design work on wide-gamut displays, this is worth keeping in mind.

Use cases

Extracting brand colors: sample a color from a company's website to get the exact hex value for use in a design project.
Matching physical products: hold a physical product near the screen and use a color-reference image to find the closest digital equivalent.
Debugging UI inconsistencies: sample rendered elements to verify they match the intended design color values in your CSS.