Screen Color Picker

The EyeDropper API is a modern browser API that allows web applications to sample colors from anywhere on the user's screen. When activated, the browser enters a special color-sampling mode where the cursor transforms into an eyedropper tool. Users can click any pixel on their screen — even outside the browser window — and the API returns the exact sRGB hexadecimal color value. This API is part of the W3C specification and is designed with security in mind, requiring an explicit user gesture (click) to activate, preventing unauthorized screen sampling.

Using this tool is straightforward: 1) Click the "Pick Color from Screen" button. 2) Your cursor will change to an eyedropper icon. 3) Move the eyedropper over any pixel on your screen — it could be an image, a website, a design file, or any application. A magnified preview helps you target the exact pixel. 4) Click to select the color. The selected color appears instantly in the preview area along with its HEX, RGB, and HSL values. You can click any color value card to copy it to your clipboard. All picked colors are saved in your history for later reference.

The EyeDropper API is currently supported in Chromium-based browsers: Google Chrome 95+, Microsoft Edge 95+, Opera 81+, and other Chromium derivatives. Firefox and Safari do not yet support this API. If your browser doesn't support EyeDropper, this tool automatically provides a fallback <input type="color"> color picker, allowing you to still select colors using your operating system's native color picker dialog. The fallback option appears automatically when needed.

Yes, the EyeDropper API is safe and privacy-respecting. It requires an explicit user gesture (a click) to activate — it cannot be triggered programmatically without user interaction. The API only returns the color value of the pixel the user clicks on; it does not capture screenshots, read screen content, or access any personal data. Additionally, the API requires a secure context (HTTPS or localhost), ensuring that color sampling only occurs in trusted environments. Your privacy is fully protected.

HEX (Hexadecimal) is a 6-character code representing RGB values in base-16 (e.g., #FF5733). It's the most common format used in web design and CSS. RGB (Red, Green, Blue) expresses colors as three decimal values from 0–255 (e.g., rgb(255, 87, 51)), representing the intensity of each color channel. HSL (Hue, Saturation, Lightness) describes colors more intuitively: Hue is the color wheel angle (0–360°), Saturation is color intensity (0–100%), and Lightness is brightness (0–100%). HSL is often preferred by designers because it's easier to adjust shades and tints. This tool provides all three formats for your convenience.

Simply click on any color value card (HEX, RGB, or HSL) and the value will be automatically copied to your clipboard. A toast notification will appear at the bottom of the screen confirming the copy. You can also see a subtle copy icon appear when hovering over each card. This one-click copy feature makes it easy to transfer color values directly into your design tools, CSS code, or documentation without manual typing.

The EyeDropper API has limited support on mobile browsers. While Chrome for Android supports it, Safari on iOS and most other mobile browsers do not. On unsupported mobile browsers, this tool automatically provides a fallback using the native <input type="color"> element, which opens your device's system color picker. While not as seamless as the desktop eyedropper experience, you can still pick colors effectively on mobile. For the best experience, we recommend using a Chromium-based browser on desktop.

Your color history is stored locally in your browser using localStorage. This means your picked colors remain on your device and are never transmitted to any server. You can clear the history at any time by clicking the "Clear" button. The history persists across browser sessions (even after closing and reopening the browser) until you manually clear it or clear your browser's local storage. Up to 24 colors are retained, with older entries being removed when the limit is reached.

A screen color picker is invaluable for web designers, graphic designers, UI/UX designers, and front-end developers. Common use cases include: extracting brand colors from existing websites or logos, matching colors across different design elements, sampling colors from inspiration images, creating consistent color palettes, debugging CSS color issues, and quickly grabbing color values for prototypes. The EyeDropper API makes this process seamless by allowing you to sample colors from anywhere on your screen without needing to take screenshots or use external applications.

While browser DevTools include a color picker, they are limited to elements within the webpage being inspected. This tool can sample colors from anywhere on your screen — including other applications, the desktop, images in other windows, or browser UI elements. Unlike extensions, this tool requires no installation, works across all Chromium browsers, and respects your privacy with no data collection. The built-in color history, multi-format display (HEX/RGB/HSL), and one-click copy features provide a complete workflow that neither DevTools nor basic extensions offer.