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 免费无需注册

Color Picker Pro

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

正在加载工具…

关于此工具

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.

使用方法

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.

关于此工具

使用方法

常见问题