Google chrome developer tool, how to pick color from any website I visted

t31321 picture t31321 · Feb 25, 2015 · Viewed 35.2k times · Source

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

How can I use chrome developer tool 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

dsharew picture dsharew · Feb 26, 2015

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.

enter image description here

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.

enter image description here

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).

color-pick-from-image

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