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.