How to Use Google Chrome’s Color Picker

Google Chrome comes with Chrome DevTools, which is a collection of tools for web development. Out of all the tools accessible, the built-in color picker in Chrome is very useful. But, how do you access it? How do you use it? What are the features provided with the tool?

How to Use Google Chrome's Color Picker

In this article, we will explore this tool and its features.

How to launch Chrome’s Color Picker?

You can access the color picker chrome tool with a keyboard shortcut or a GUI (Graphical User Interface). Press Ctrl + Shift + I keys  to get DevTools and then go to color picker. If you are using a Mac , you need to press Command + Option + I  .

Using the mouse, you need to do a right click and then click Inspect to navigate through DevTools.

How to Use Google Chrome's Color Picker

You can also set Chrome DevTools to automatically open with every new tab. So you can quickly access the color picker for every tab on your browser. To achieve that, you need to launch a new instance of Chrome using the command line while passing the following flag:


This is what it looks like when launching chrome with DevTools automatically opening via terminal on Linux:

google-chrome-stable –auto-open-devtools-for-tabs

How to use the Color Picker color picker on Chrome

After launching DevTools, you’ll have to navigate your way to access the tools needed to define the colors on the website or design you want to work on.

How to Use Google Chrome's Color Picker

By default, you will be able to see the active Style section at the bottom of DevTools, as shown in the screenshot.

How to Use Google Chrome's Color Picker

If you chose something else, make sure to click Style to access the site’s CSS code. Here you need to scroll down to the available CSS code and find the color box labeled as background or color below the body. This is the color picker you are looking for.

How to Use Google Chrome's Color Picker

Just click on the color box, it will give you more options, as shown in the screenshot below.

How to Use Google Chrome's Color Picker

Here you will find the hex code or RGB value of the color and have the ability to select other CSS elements to explore and test the design on the site.

Features in Color Picker on Chrome

Chrome’s built-in color picker gives you a variety of information beyond the hex code to determine the color. Here’s what you can expect from it. Some of the key features include:

Palette ( Color palettes) :  Rather than rotating through many shades, you get some pre-defined color palettes to apply some quick choices.

How to Use Google Chrome's Color Picker

Color format ( Format Color ): You have the ability to move from hex to value RGBA and HSLA color values both.

How to Use Google Chrome's Color Picker

Eyedropper  : When you access the color picker, you can browse the web page and select any element to get the hex code of that color. You can click the color picker switch to turn it on or off.

How to Use Google Chrome's Color Picker

You have more options to adjust the color and get the exact color of your choice.

  • Copy to Clipboard (copy to clipboard ): You can copy the color codes are identified quickly clipboard.
  • Color gradients ( Gradient ): You can adjust the shades of color and rotate through the ability to combine colors to your liking.
  • Opacity control ( control opacity ): You can adjust the transparency level to make it look certainty or minimum.
  • Background color picker (background color picker ): To select a background color matching for perfect contrast.
  • Contrast ratio (contrast ratio ): Adjust or repair the contrast to display text or element.

Note:  Color Picker is not limited to Google Chrome but can be used on any Chrome based web browser like Brave.

How to use the Color Picker on Chrome with Google Slides

You can navigate to access the color picker if you do a right click in the header of the Google Slides website. Although Google Slides does not provide a built-in color picker, this should be enough.

How to Use Google Chrome's Color Picker

If you are not comfortable using DevTools with Google Slides, you can also try some chrome extensions for the job.

Chrome extension as an alternative to the color picker

While extensions can be useful, it should be noted that they are not actively updated or maintained. Considering they require access to your browser data, you should use caution when installing any extensions, even those recommended here.

However, there are two popular extensions that you might want to try:

# 1. ColorZilla

How to Use Google Chrome's Color Picker

The ColorZilla extension provides all the necessary functionality you get with chrome’s built-in color picker. As a bonus, you also have the ability to check the history of the last color selected. So this should be useful for any use case, not just with Google Slides.


# 2. ColorPick Eyedropper

How to Use Google Chrome's Color Picker

If you are having trouble with the eyedropper tool using DevTools, you can try ColorPick Eyedropper to get an eyedropper tool without accessing web tools.

When you select a color, it will show the RGB value and the option to create a palette. Similar to the extension above, you can also check the history of the colors of your choice.


Last words

The Chrome DevTools Color Picker is a useful tool. You don’t need a professional tool to help you identify colors and associated codes or values. Chrome’s built-in tools make it easy, without the need for third-party extensions.

From graphic designer to web developer building a website template, everyone will find it useful. Of course, you can also choose to use the available third-party extensions. However, unless you need to, we recommend exploring all the features with DevTools.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button