You Can Add a Color Picker to Your Browser

There are countless ways to pick a color from an image, from full image editors to Microsoft PowerToys. There’s now an easier method that works in Chrome, Microsoft Edge, and other web browsers.

Paul Kinlan, a developer advocate at Google, created a simple bookmarklet that opens a color picker in your browser, which you can then move across your screen. After you click, the color is displayed in a popup. It was built using the EyeDropper API, which first appeared in Chrome 95. It’s also functional in Microsoft Edge 95 or later, Opera 81 or later, and other recent Chromium-based browsers — Firefox and Safari don’t support it right now.

You can give it a try by opening Kinlan’s blog post and dragging the EyeDropper link to your bookmarks bar. After that, you’ll be able to access it at any time, assuming your bookmarks bar is visible (or you don’t mind the few extra clicks into the bookmarks menu).

There are other ways to grab a given color from an image, but this bookmarklet is a simple solution that doesn’t involve installing a browser extension with too many permissions. I also made a slightly-tweaked version that places the hex code in a text box for easier copy-and-paste.

Source: Paul Kinlan