Question

Use the color picker in Chrome

Answer 1

How to use the integrated color picker in Chrome
1st step:
2nd step:
3rd step:
4th step:
5th step:
quick start Guide

---

You don't always need an add-on: A color picker is already integrated in Google Chrome - albeit a bit hidden..

Image: <span> Kenneth Summers / Shutterstock.com </span>

With the help of a color picker, the color values ​​of a selected point on a website can be recorded. The values ​​can be displayed in Chrome as RGB, HEX or HSL format, so you are guaranteed to find the perfect color for your own design. There are now countless add-ons that add a color picker in Google Chrome . This is not even necessary: ​​The color selection function is already integrated somewhat hidden in the so-called dev tools.

How to use the integrated color picker in Chrome

Take a look at our step-by-step instructions or read the quick start guide .

1st step:

To use Google Chrome's integrated color picker, first open a website whose colors you want to select. Now press F12 to open Dev-Tools. Here you select " Styles " below .

2nd step:

Then enter the term " color " in the " Filter " input field . You will now automatically be shown all the color values ​​on the website.

3rd step:

Now click on the square next to any color. In our example it would be the field next to "transparent". Google's integrated color picker then opens. Make sure that the pipette appears blue - the color picker is also activated.

4th step:

Move the color picker on the website over a color of your choice and press the left mouse button to display the color values ​​in the color picker. You can use the zoom function to identify and define the desired color in greater detail. By default, the HEX value for the color is displayed.

5th step:

Do you need the RGB value of the color for your design? Then click on the selection arrows next to the HEX value to switch to RGB or HSL values. You can then copy the desired values ​​and use them for your project.

quick start Guide

1. First, open a webpage whose colors you want to choose.
2. Then open Google's Dev-Tools with the [F12] key .
3. Now select " Styles " below .
4. Enter the search term " color " in the " Filter " field .
5. In the next step, click on a square next to any color to open the color picker.
6. With the color picker you can now select the desired color on the website with a left mouse click.
7. The HEX values ​​of the color are then automatically displayed in the picker.
8. You can use the arrows to display both the RGB values and the HSL values ​​of the color.

---