How can I pick color from any website I visit using Chrome DevTools?

Question

When I visit websites I want to save interesting colors I found on them.

How can I use Chrome DevTools to pick color code from the page I am currently seeing?

NB: I dont want to use third party plugins like chrome extension plugins.

Answer 1

You can pick color from any element using google chrome

1. Picking color from HTML element:
If the color is on simple html elements like button, text, span etc you can inspect the element and copy its color, as mentioned on the comment.

2. Picking color from image:
If the color is on an image or background image, or background-color of nested html elements, you can use the ff strategy.

2.1. Start by inspecting simple element anywhere from the page that could show the color picker box.

2.2. Then after clicking the above color picker box, goto the image or background image you want to pick color from(when you do this you will notice the cursor changing from pointer to chrome-color-picker icon).

As matter of fact you can use solution 2 even for case 1.

Answer 2

You can also use the eyedropper tool now in DevTools too http://paul.kinlan.me/eyedropper-chrome-dev-tools/