htmlgoogle-chromegoogle-chrome-devtoolscolor-picker

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


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.


Solution

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