About the Screen Color Picker
Our Screen Color Picker uses the EyeDropper browser API when available so you can sample a colour from the screen, then view HEX, RGB, and HSL values. Unsupported browsers can still use the manual colour selector.
Screen Color Picker
Pick colors from anywhere on your screen and copy the HEX or RGB value instantly.
100% Local Processing
How to pick and convert a screen colour
- On a supported browser, choose the screen picker and allow the browser prompt if one appears.
- Point at the colour you want and select it, or use the manual colour control as a fallback.
- Copy the displayed HEX, RGB, or HSL value into your design or CSS workflow.
Examples and worked results
One colour in three formats
Input
#3366CCResult
RGB: rgb(51, 102, 204); HSL: hsl(220, 60%, 50%)The conversion uses the sRGB HEX value returned by the picker or selected manually.
Browser API and fallback picker
The screen-picking action uses the EyeDropper API when the browser exposes it. Chromium-based browsers such as current Chrome and Edge support this API, while other browsers can still use the standard colour input to inspect a manually selected colour.
Common use cases
- Matching a colour from a design reference
- Turning a visual sample into CSS values
- Comparing HEX, RGB, and HSL representations
Important notes and limitations
- Screen picking depends on browser support and permission prompts.
- Values represent sRGB colours and do not capture print profiles, HDR workflows, or every display characteristic.
Frequently Asked Questions
Does this work on all browsers?
The EyeDropper API used for full-screen picking is currently supported on Chromium-based browsers (like Chrome and Edge). On unsupported browsers, we provide a standard color selector.
Can I pick colors outside the browser window?
Yes! On supported browsers, the EyeDropper can extract colors anywhere on your monitor.