# eyedropper-polyfill

> EyeDropper API Polyfill

Latest version **1.1.5** (published 2026-01-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install eyedropper-polyfill
pnpm add eyedropper-polyfill
yarn add eyedropper-polyfill
bun add eyedropper-polyfill
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2026-01-23 |
| First published | 2023-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 22 |
| Author | Ilya Medvedev |
| Maintainers | imedvedev |
| Keywords | eyedropper, polyfill, colorpicker |

## Links

- npm: https://www.npmjs.com/package/eyedropper-polyfill
- Repository: https://github.com/iam-medvedev/eyedropper-polyfill
- Homepage: https://github.com/iam-medvedev/eyedropper-polyfill#readme
- Issues: https://github.com/iam-medvedev/eyedropper-polyfill/issues
- npm.io page: https://npm.io/package/eyedropper-polyfill

## Dependencies (1)

- [html2canvas-pro](https://npm.io/package/html2canvas-pro.md) ^1.6.6

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 1.1.5 (latest) — 2026-01-23
- 1.1.4 — 2026-01-23
- 1.1.3 — 2026-01-22
- 1.1.2 — 2025-07-05
- 1.1.1 — 2025-07-05
- 1.1.0 — 2025-07-05
- 1.0.3 — 2025-06-29
- 1.0.2 — 2023-08-09
- 1.0.1 — 2023-08-09
- 1.0.0 — 2023-08-09

## README

# `eyedropper-polyfill`

`eyedropper-polyfill` provides a polyfill implementation for the [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper), allowing you to capture colors from any part of a webpage.

This package was inspired by the EyeDropper API and the need for a consistent color selection mechanism across various browsers where the EyeDropper API is not [natively supported](https://caniuse.com/mdn-api_eyedropper).

[![Baseline Status: Eyedropper](https://baseline.js.org/features/eyedropper/static-adaptive.svg)](https://webstatus.dev/features/eyedropper)

<img src="https://raw.githubusercontent.com/iam-medvedev/eyedropper-polyfill/refs/heads/main/demo/preview.gif" width="500" />

[DEMO](https://iam-medvedev.github.io/eyedropper-polyfill/)

## Table of Contents

- [`eyedropper-polyfill`](#eyedropper-polyfill)
  - [Table of Contents](#table-of-contents)
  - [Features](#features)
  - [Installation](#installation)
  - [Usage](#usage)
    - [TypeScript Support](#typescript-support)
    - [Opening the EyeDropper](#opening-the-eyedropper)
    - [Aborting](#aborting)
  - [Limitations](#limitations)
  - [Contributing](#contributing)
  - [License](#license)

## Features

- Provides a polyfilled implementation of the EyeDropper API for capturing colors from web pages.
- Supports selection of colors from different parts of the webpage.
- Offers a magnifier for precise color selection.
- Handles asynchronous operations and signal abortions.

## Installation

```bash
yarn add eyedropper-polyfill
```

or

```bash
bun add eyedropper-polyfill
```

or

```bash
npm install eyedropper-polyfill
```

or

```typescript
import 'https://esm.sh/eyedropper-polyfill@latest';
```

## Usage

Import the `EyeDropperPolyfill` from the package:

```typescript
import 'eyedropper-polyfill';
```

It will create EyeDropper support via `window.EyeDropper`.

### TypeScript Support

If the import is located in a different file than where you're using the `EyeDropper` API, you need to add the package to the `types` array in your `tsconfig.json`:

```json
{
  "compilerOptions": {
    "types": ["eyedropper-polyfill"]
  }
}
```

### Opening the EyeDropper

```typescript
const eyeDropper = new window.EyeDropper();

eyeDropper
  .open()
  .then((colorSelectionResult) => {
    // Use the selected color information
    console.log('Selected color:', colorSelectionResult.sRGBHex);
  })
  .catch((error) => {
    console.error('Error:', error);
  });
```

### Aborting

```typescript
const eyeDropper = new window.EyeDropper();
const abortController = new window.AbortController();
const signal = abortController.signal;

// Set up an event listener to abort the operation after a certain time
setTimeout(() => {
  abortController.abort();
}, 5000); // Abort after 5 seconds

eyeDropper
  .open({ signal })
  .then((colorSelectionResult) => {
    // Use the selected color information
    console.log('Selected color:', colorSelectionResult.sRGBHex);
  })
  .catch((error) => {
    if (error.name === 'AbortError') {
      console.log('Operation was aborted.');
    } else {
      console.error('Error:', error);
    }
  });
```

## Limitations

Since this package is based on [html2canvas-pro](https://yorickshan.github.io/html2canvas-pro/), you can look at their [limitations](https://html2canvas.hertzen.com/documentation.html#limitations).

## Contributing

Contributions are welcome! If you find any issues or have suggestions, please open an issue on the [GitHub repository](https://github.com/iam-medvedev/eyedropper-polyfill).

## License

This package is distributed under the [MIT License](https://opensource.org/licenses/MIT).

---
_Source: https://npm.io/package/eyedropper-polyfill · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._