{"id":194352,"date":"2022-06-17T01:55:05","date_gmt":"2022-06-16T23:55:05","guid":{"rendered":"http:\/\/sftarticles.wpenginepowered.com\/en\/?p=194352"},"modified":"2025-07-01T20:38:45","modified_gmt":"2025-07-02T03:38:45","slug":"how-to-use-colorpick-eyedropper-for-chrome","status":"publish","type":"post","link":"https:\/\/cms-articles.softonic.io\/en\/how-to-use-colorpick-eyedropper-for-chrome\/","title":{"rendered":"How to Use ColorPick Eyedropper Chrome Extension in 4 steps"},"content":{"rendered":"\n

Whether you’re making a website or creating artwork in an app like Photoshop<\/a>, 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<\/strong> to make the process easy.<\/p>\n\n\n

\r\n
\r\n
\r\n
\r\n \"ColorPick\r\n <\/div>\r\n
\r\n ColorPick Eyedropper<\/span>\r\n DOWNLOAD<\/a>\r\n <\/div>\r\n
\r\n <\/path><\/path><\/text><\/svg>\r\n <\/div>\r\n <\/div>\r\n
\r\n <\/span>\r\n <\/div>\r\n
\r\n \r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n<\/div>\n\n\n\n

This extension can tell you the RGB and hex<\/strong> code<\/strong> 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<\/strong> of a website, which, as you can guess, is complex.<\/p>\n\n\n\n

So how can you discover color codes using the ColorPick Eyedropper extension? Here are the steps.<\/p>\n\n\n

  1. Pin the Extension<\/h2>\"Pin

    To make it easier to use the extension, pin it to the menu bar<\/strong> 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.<\/p>\n<\/div><\/li>

  2. Picking a Color<\/h2>\"Pick

    Picking a color<\/strong> 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.<\/p>\n

    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.<\/p>\n

    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.<\/p>\n<\/div><\/li>

  3. Get Colors from Color History<\/h2>\"Get

    Besides clicking on objects to pick their colors, you can also get those colors again in history<\/i>. The extension maintains the history of colors<\/strong> you have picked. Here\u2019s how you can do that:<\/p>\n

      \n
    • Click on the extension icon and click on the \u2018Settings\u2019 icon (wheel).<\/li>\n
    • A new window will open. Click on \u2018History.\u2019<\/li>\n
    • Here, you\u2019ll see boxes of colors. Just click on them to add to \u2018Palette.\u2019<\/li>\n
    • Copy the code from the Palette list.<\/li>\n<\/ul>\n<\/div><\/li>

    • Change Settings for the ColorPick Eyedropper Extension<\/h2>\"Customize

      You can also configure settings<\/strong> for the extension. Click on the Settings<\/i> icon after clicking on the extension icon. A new window will open where you can find all the basic and advanced settings.<\/p>\n

      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.<\/p>\n

      In advanced settings, you can make different selections like:<\/p>\n

        \n
      • Use PNG quality when available<\/li>\n
      • Use CSS value for RGB\/HSL<\/li>\n
      • Lower case hexadecimal values<\/li>\n
      • Reverse history (show oldest first)<\/li>\n
      • Show Split Color Preview<\/li>\n<\/ul>\n

        Once you have made the selections, click on Save Options<\/i>.<\/p>\n<\/div><\/li><\/ol><\/div>