How To
How to Use ColorPick Eyedropper Chrome Extension in 4 steps

- June 16, 2022
- Updated: July 2, 2025 at 3:38 AM

Whether you’re making a website or creating artwork in an app like Photoshop, you might come across colors online you want to use. However, finding out exactly what those colors are is difficult unless you’re a developer. Fortunately, you can download the ColorPick Eyedropper Chrome extension to make the process easy.
This extension can tell you the RGB and hex code of virtually any color you see on the web. It takes as little as hovering over an object to find its color. Your other option is to go through the DevTools in Chrome to find the color codes in the CSS code of a website, which, as you can guess, is complex.
So how can you discover color codes using the ColorPick Eyedropper extension? Here are the steps.
Pin the Extension
To make it easier to use the extension, pin it to the menu bar on top next to the address bar. Simply click on the puzzle icon, and you’ll see a list of installed extensions. Click the pin icon next to the ColorPick Eyedropper extension. It will turn blue, and you’ll see the extension in the menu bar.
Picking a Color
Picking a color using the extension is pretty easy. First, click on the extension icon from the menu. It takes a second for the snap mode to turn on with a plus-sign cursor that you can move around.
Just move the cursor on the object with a color you want to pick. When you click on it, a small box will appear with the hex code and RGB numbers for that particular color.
You can copy them to the clipboard if you want to use them. You can then use the number to select the color in tools like MS Paint or Adobe Photoshop.
Get Colors from Color History
Besides clicking on objects to pick their colors, you can also get those colors again in history. The extension maintains the history of colors you have picked. Here’s how you can do that:
- Click on the extension icon and click on the ‘Settings’ icon (wheel).
- A new window will open. Click on ‘History.’
- Here, you’ll see boxes of colors. Just click on them to add to ‘Palette.’
- Copy the code from the Palette list.
Change Settings for the ColorPick Eyedropper Extension
You can also configure settings for the extension. Click on the Settings icon after clicking on the extension icon. A new window will open where you can find all the basic and advanced settings.
You can select if you want the hexadecimal, RGB, or HSL to show on clicking on an object. Similarly, you can de-select any of the three you don’t want to be shown.
In advanced settings, you can make different selections like:
- Use PNG quality when available
- Use CSS value for RGB/HSL
- Lower case hexadecimal values
- Reverse history (show oldest first)
- Show Split Color Preview
Once you have made the selections, click on Save Options.
You may also like
- News
More and more people are looking for information with AI… but they hardly click on the results
Read more
- News
John Boyega wants to star in the ultimate 'Star Wars' parody, and he has his reasons
Read more
- News
This movie is Sergio Leone's great hidden gem and you can watch it streaming right now
Read more
- News
Battlefield 6 wants to be as realistic as possible, but a single skin has managed to destroy the goodwill of the community
Read more
- News
They promised us season 2 of one of the best series of the last five years. Sadly, it may never arrive
Read more
- News
'Wizards of Waverly Place' came to Disney by chance. Almost 20 years later, it still has new episodes
Read more