# Color Picker & Eyedropper

> Pick any color from your screen using the browser's native EyeDropper API, or enter colors manually. View and copy color values in HEX, RGB, HSL formats instantly.

**Category:** Dev
**Keywords:** color picker, eyedropper, hex, rgb, hsl, color code, screen color, color format, color converter, color value, pick color, web color
**URL:** https://complete.tools/color-picker-eyedropper

## Supported color formats

Every picked or entered color is shown in three standard formats:

- **HEX** — The 6-digit hexadecimal code used in CSS and design tools (e.g., #3B82F6)
- **RGB** — Red, green, and blue channel values from 0 to 255 (e.g., rgb(59, 130, 246))
- **HSL** — Hue (0-360 degrees), saturation, and lightness percentages (e.g., hsl(217, 91%, 60%))

Each format has a one-click copy button so you can paste values directly into code or design software.

## How the EyeDropper API works

The EyeDropper API is a browser-native feature that temporarily turns your cursor into a color-sampling crosshair. Click anywhere on screen to capture the exact color of that pixel. The API is supported in Chromium-based browsers (Chrome, Edge, Opera, Arc). Firefox and Safari do not yet support it, but you can still enter colors manually.

## Who should use this

- **Web developers** — Quickly grab exact colors from mockups, live sites, or design specs
- **Designers** — Sample colors from reference images, competitor websites, or brand assets
- **Content creators** — Match colors across social media graphics, presentations, and documents
- **Anyone** — Identify and copy any color you see on screen in seconds

## How to use

1. Click "Pick Color from Screen" to activate the eyedropper cursor
2. Click on any pixel anywhere on your screen to capture its color
3. Or type a hex color code directly into the input field
4. View the color preview and its HEX, RGB, and HSL values
5. Click the copy button next to any format to copy it to your clipboard
6. Previously picked colors appear in the history row for quick re-selection

---

*Generated from [complete.tools/color-picker-eyedropper](https://complete.tools/color-picker-eyedropper)*