#COLOR PICKER TOOL HOW TO#

That’s it! Voilà, you have the color picker on your browser ready to help you. Just click on the color box it should give you more options, as shown in the screenshot below.

This is the color picker you were looking for. Here, you need to scroll down through the CSS code available and look for a color box labeled as background or color under the body section. If you have something else selected, make sure to click on “ Style” to access the CSS code of the web page. Once you launch the DevTools, you will have to navigate your way to access the tools needed to identify the color on a web page or a design that you want to work on.īy default, you should be able to see the “ Style” section active at the bottom of the DevTools, as shown in the screenshot.

#COLOR PICKER TOOL HOW TO#

This is what it looks like when launching chrome with auto-open DevTools via the terminal on Linux: google-chrome-stable -auto-open-devtools-for-tabs How to Use Color Picker on Chrome? To achieve that, you need to launch a fresh instance of Chrome using the command line while passing the following flag: -auto-open-devtools-for-tabs So, you can quickly access the color picker for every tab on your browser. You can also set Chrome DevTools to auto-open with every new tab. Using the mouse, you need to perform a right-click and then click on “ Inspect” to navigate through the DevTools. If you are using a mac, you need to press, Command + Option + I.

Press Ctrl + Shift + I when using the keyboard to get the DevTools and then head to the color picker. You can access the color picker chrome tool using a keyboard shortcut or GUI (Graphical User Interface). In this article, we shall explore this tool and its features. Among all the tools accessible, the color picker available in Chrome comes in handy.īut, how do you access it? How do you use it? What are the features offered along with the tool? Google Chrome comes baked in with Chrome DevTools, which is a collection of web developer tools.

Color picker tool