Is there an eyedropper tool in Google Chrome DevTools?

Question

I want to get a color from a website using Google Chrome's DevTools.

I know that you can get the color code if it's set in the CSS, but I want to get a color from for example an image.

Is this possible with google Chrome's DevTools?

Answer 1

Using EyeDropper API

1. Option + ⌘ + J (macOS) or Shift + CTRL + J (Windows/Linux).
2. await new EyeDropper().open();
3. Hover over the color you want and tap on it
4. The hex value will be Printed into the console.

Source

Answer 2

1. Inspect a node in the DOM Tree.

   

2. Click its color property to open the Color Picker. Add a color property to the node if it doesn't have one.

   

3. Hover your mouse over the viewport.

   

4. Click when you're hovering over the color that you want to sample.