What is the EyeDropper and which browsers support it?

The EyeDropper API lets you click anywhere on your screen to pick a colour. It is supported in Chrome, Edge, and Opera. Firefox and Safari do not yet support it.

What colour formats does the tool output?

HEX (#rrggbb), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)), HWB (hwb(h w% b%)), OKLCH (oklch(l c h)), and a CSS custom property (--color: value).

How does the named colour search work?

Type any CSS colour name (e.g. 'rebeccapurple', 'tomato') into the search box. Matching named colours appear as swatches and clicking one sets the active colour.

Is my colour history saved?

Colour history is stored in the browser's localStorage so it persists across page reloads. You can clear the history at any time with the Clear History button.

Design Free No signup

Color Picker Pro

Advanced color picker with eyedropper, history, and 6 format outputs

Loading tool…

About this tool

A professional-grade color picker that goes far beyond a simple hex input. Use the browser's native EyeDropper API to sample any colour on your screen. Search for named CSS colours by name. Build a personal colour history that persists in your session. Copy the current colour in six formats instantly: HEX, RGB, HSL, HWB, OKLCH, and CSS custom property. Perfect for designers, developers, and accessibility reviewers.

How to use

1 Use the colour wheel/swatch to pick a colour, or type a value directly into any format input.
2 Click 'Pick from Screen' to use the EyeDropper and sample any colour on your display (Chrome/Edge only).
3 Search for CSS named colours by typing in the search box.
4 Click any format badge to copy that colour value to your clipboard.
5 Previously picked colours appear in the history strip at the bottom; click any swatch to restore it.

Frequently Asked Questions

Related tools

Color Converter (HEX, RGB, HSL)

Convert colors between HEX, RGB, HSL, HSV, and CMYK — with live preview.

Eye Dropper / Screen Color Picker

Pick any color from your screen and instantly see it in HEX, RGB, HSL, and CMYK formats.

Color Palette from Image

Extract dominant colors from any image using k-means clustering with CSS, Tailwind, Figma, and ASE export.

Color Contrast Checker

Check WCAG 2.1 contrast ratios for foreground/background color pairs and get pass/fail results instantly.