# Eyedropper

> Online color dropper and eyedropper: pick any color from your screen, get hex, rgb, hsl & oklch codes, check WCAG contrast, export palettes. Nothing uploaded.

- URL: https://bytescope.dev/en/eyedropper/
- Locale: en · Also: [ja](https://bytescope.dev/ja/eyedropper.md) · [zh-Hant](https://bytescope.dev/zh-Hant/eyedropper.md)
- Runs: Nothing is uploaded. Color values and swatch history are stored locally in your browser.
- Requires: Chrome, Edge or Opera on desktop (EyeDropper API). Not Firefox, Safari or mobile browsers.
- Updated: 2026-09-08

## What it does

Pick any color directly from your desktop, other windows, or websites using the browser's native EyeDropper API. This online eyedropper tool lets you grab pixel-perfect color values instantly with zero software installation. Every picked swatch is converted in real time into hex, rgb, hsl, and oklch formats, making it easy to copy color codes for your CSS stylesheets, design tokens, or graphics editors.

### Pick colors outside the browser window

Unlike canvas-based color pickers constrained to an uploaded image, this screen color picker taps into the operating system's native magnifying loupe on supported Chromium browsers. You can sample pixels from your code editor, wallpaper, design mockups, or another monitor. The browser handles the sampling UI natively, ensuring accurate sRGB color retrieval from any visible pixel.

### Privacy by design: single pixel, no screen capture

Your screen content remains completely private. When you activate the eyedropper, the browser only passes back the single hex color string of the specific pixel you click. The webpage never receives a screenshot, screen recording, video stream, or cursor coordinates. If you press `Esc` to dismiss the picker, the operation cancels silently without reading any screen data.

### WCAG contrast checker and palette export

Keep a running history of up to 48 color swatches saved locally in your browser. Assign any two swatches as foreground and background to calculate their WCAG 2.1 contrast ratio and verify AA and AAA compliance for normal and large text. Note that WCAG contrast formulas assume opaque colors, so alpha channels are ignored. Export your palette anytime as CSS custom properties, GIMP palette (`.gpl`), JSON, or a plain HEX list.

### Cross-browser fallback and manual input

The `EyeDropper` API is currently supported in Chromium-based desktop browsers like Chrome, Edge, and Opera. If you are on Firefox, Safari, or a mobile browser where the API is unavailable, the tool automatically provides a manual input fallback. You can paste hex codes or `rgb()` / `rgba()` values into the input box — in either the legacy comma syntax or the modern space syntax — to access all formatting, contrast calculation, and export features without restrictions.

## Limits

Does not pick colours from images you upload (use image tools for that); it samples the live screen, including outside the browser window.

## FAQ

### How do I pick a color from my screen?

Click the Pick color button to open the browser's native magnifying eyedropper. Move the loupe over any pixel on your screen — inside or outside the browser — and click to capture its color. Press `Esc` if you want to cancel without picking.

### Can this website see or record my screen?

No. The native EyeDropper API only returns the single sRGB color code of the pixel you click. The webpage does not receive a screen capture, video stream, image buffer, or pixel coordinates. Your screen remains private.

### Why is the EyeDropper button disabled in Firefox or Safari?

The `EyeDropper` API is currently implemented in Chromium-based desktop browsers (Chrome, Edge, Brave, Opera). Firefox and Safari do not yet support this Web API. However, you can still paste color codes manually to convert formats, check WCAG contrast, and export palettes.

### How does the WCAG contrast calculation handle transparency?

Standard WCAG 2.1 relative luminance formulas are defined specifically for opaque colors against opaque backgrounds. When calculating contrast ratios, any alpha channel is ignored and colors are evaluated as fully opaque.

### What export formats are supported for color palettes?

You can export your swatch history as CSS custom properties (`--swatch-1: #hex`), GIMP Palette files (`.gpl` compatible with GIMP and Inkscape), a JSON array whose entries carry the hex string plus the raw 0-255 channel values, or a plain list of HEX values.

### Are my color swatches uploaded or saved to a server?

No. All color conversions, contrast computations, and history storage happen entirely on your device using client-side JavaScript and `localStorage`. Nothing is ever sent to a server.

## Related tools

- [Image Inspector](https://bytescope.dev/en/image-inspector.md) — Pick colors, read pixel coordinates and analyze images with a magnifying loupe.
- [Redact Screenshot](https://bytescope.dev/en/redact-screenshot.md) — Black out text, blur names, pixelate faces and hide secrets in screenshots.