If you’ve ever needed to pick a color from your screen, you’ve probably used some kind of color picker app.
But in this post, I’ll show you how to use the browser’s built-in color picker to grab any color on your screen, even outside the browser.
▶️ Seeing is believing. So what about a video instead?
Browser Color Picker
First, open Chrome, Edge, or any Chromium browser.
Open the DevTools, then go to the Elements tab and find a CSS color value and click the colored square next to the color value.
Click the Eye Dropper icon in the Color Picker dropdown. Now your cursor changes into the Eye Dropper tool.
Move your mouse around and pick a color from inside the browser window or anywhere else on the screen, even another monitor.
As far as I know, only Chromium (Chrome, Edge, Brave, etc) and WebKit (Safari) based browsers support picking colors outside the browser window.
When it comes to Gecko-based browsers such as Firefox, you can only pick colors within the browser window.
Happy building 💜
Let me know what you think about this article in the comments section below.
If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.