---
title: "useEyeDropper – Browser Hook Usage & Examples"
description: "Use [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) to pick color. for"
canonical: https://reactuse.com/browser/useeyedropper/
---

# useEyeDropper

Use [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) to pick color

`useEyeDropper` provides access to the [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API), which lets users sample colors from any pixel on their screen. It returns a tuple of a boolean indicating browser support and an `open` function that launches the native color picker. The `open` function returns a promise resolving to an object with the selected color in `sRGBHex` format.

### When to Use

- Building color picker tools that let users sample colors from anywhere on screen
- Creating design or theming tools where users need to match existing colors
- Implementing accessibility contrast checkers that sample page colors

### Notes

- **SSR-safe**: Returns `false` for support and a no-op function during server-side rendering. No `window` or `EyeDropper` access occurs on the server.
- **Browser support**: The EyeDropper API is currently only supported in Chromium-based browsers. Always check the first tuple element (`isSupported`) before offering the feature.
- **User activation**: The `open` function requires a user gesture (e.g., button click) to launch the picker. You can pass an `AbortSignal` to cancel the operation.

## Usage

```tsx live
function Demo() {
  const [color, setColor] = useState("");
  const [supported, open] = useEyeDropper();

  if (supported) {
    return (
      <div style={{ padding: 40 }}>
        Supported: {supported.toString()}
        <br />
        Color: {color}
        <button
          type="button"
          onClick={async () => setColor((await open()).sRGBHex)}
        >
          Pick color
        </button>
      </div>
    );
  }

  return <span>Not Supported by Your Browser</span>;
};

```

%%API%%