How to use Inbuilt Google Chrome Color Picker without extension?

In this post, we will show you how to use the built-in Google Chrome Color Picker without extension. Color picker is a handy tool for picking specific colors from a color palette or spectrum. While there are multiple color-picker tools and extensions available that help you identify specific color codes, you can use Chrome’s Inbuilt Color Picker to grab the color that catches your attention.

Chrome’s color picker is essentially an eyedropper tool that lets users select a color from anywhere on the screen and use it in their designs. It is not a standalone tool, but part of the Chrome DevTools (tools that enable web developers to analyze and debug websites and web applications). However, end-users may access the tool to find out the hex, RGBA, or HSLA value of colors they spot online.

Note: Since the built-in color picker is part of the Chrome WebTools, you can’t use it outside the webpage that uses it.

How to use Inbuilt Google Chrome Color Picker without extension?

In the following section, we will give you an in-depth overview of using the Inbuilt Google Chrome Color Picker.

1] Launch Chrome’s Color Picker

To launch the color picker, you need to open Chrome’s DevTools first. To do so, right-click on the image or part of the webpage that contains the color you’re interested in, and select Inspect. The Inspect option helps users find hidden information about the web page, including JavaScript/Media files, HEX/RGB color codes, etc. You can also use the Ctrl + Shift + I keyboard shortcut to bring up the DevTools panel.

The panel will appear from the bottom of the webpage. On the right side of the DevTools panel, you should see the Styles tab by default (switch to the Styles tab if something else is selected). This tab shows you the CSS code of the webpage. Scroll through the code while looking for the color box labeled as background-color, color, or something similar. You can see many of them. Click on any of these boxes to view the hidden color picker in Chrome.

2] Use Chrome’s Color Picker

On the color picker tool popup, you will see an eyedropper icon. Click on it to activate the tool.

Your mouse pointer will turn into a big circle containing a grid of squares. Take the pointer to the area on the webpage where the desired color is located. The eyedropper basically allows you to view the exact shade you’re interested in by zooming in the screen to pixel level.

Stop the pointer when the shade comes inside the square which is in the center of the circle (having thick outside borders). Make a left mouse click to see the color code in the color pickup popup. By default, the tool displays the hexadecimal code (HEX) of the color.

To change the format of the color values, you may use the up/down arrow icon next to the color code. Chrome’s color picker allows you to see the HEX code, RGBA values, HSLA values, HWBA values, ICHA values, and other values associated with the chosen color.

Note: The eyedropper acts as a toggle, so you can click its icon to enable or disable the tool.

3] Key Features of Chrome’s Color Picker

Here are a few key features of Chrome’s built-in color picker tool:

Color Gradient: On top of the color picker popup, there’s a gradient area that helps you navigate through similar shades of the selected color. Just take your cursor over the gradient and click on the desired shade. The color’s hex code (or other values) will be updated accordingly.
Hue: Just below the gradient area, there’s a slider that allows you to adjust the hue. When you change the hue, the selected color and its hex value change accordingly. You may further use the mouse pointer to pick a different shade from the gradient area.
Opacity: Below the Hue slider, there’s an Opacity slider. you may use it to change the opacity of the selected color.
Copy to Clipboard: Next to the eyedropper icon, there’s a circle showing the selected shade. You can copy the color’s RGB values (into the clipboard) simply by clicking on this circle.
Color Palette: At the bottom of the color picker popup, there’s a color palette. In fact, there are multiple color palettes to choose from (Material, Custom, CSS Variables, Page colors). Use the up/down arrow icons next to the palette to see all other palettes. These palettes show different colors available on the web page. If any of these palettes show the desired color, you can make a selection from here as well.

That’s all about it! I hope you find this useful.

Read: Chrome Development Tools Tips and Tricks

How do I enable color picker in Chrome?

Right-click on the webpage and select Inspect. On the right side of the DevTools panel, navigate to a colored-square box under the Styles tab. Click in the box to view Chrome’s inbuilt color picker tool. Select the eyedropper to pick colors from the webpage.

Why is my color picker not working on Chrome?

Make sure you click on the color preview square, instead of the RGB values shown next to the square. Next, make sure the eyedropper is selected in the color picker popup (the eyedropper turns blue when it is active). If the issue persists, try changing the docking position of the DevTools panel (dock the panel to the bottom of the webpage if it is docked to the right side of the screen and vice versa).