Advertisement

How To

How to Use ColorPick Eyedropper Chrome Extension in 4 steps

How to Use ColorPick Eyedropper Chrome Extension in 4 steps
Jeff Weishaupt

Jeff Weishaupt

  • Updated:

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.

ColorPick Eyedropper DOWNLOAD

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.

  1. Pin the Extension

    Pin the extension for quick use

    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.

  2. Picking a Color

    Pick a color to get the Hex and RGB code

    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.

  3. Get Colors from Color History

    Get Hex and RGB codes 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.
  4. Change Settings for the ColorPick Eyedropper Extension

    Customize the extension settings

    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.

Jeff Weishaupt

Jeff Weishaupt

Latest from Jeff Weishaupt

Editorial Guidelines