Thursday, November 5, 2020

A Color Picker in Chrome DevTools

When you are working with CSS and specifically dealing with colors in HEX format it's very handy to be able to quickly find (or pick) a color value anywhere on your screen. There are tools for that, of course, namely, color picker browser extensions, that I used to have. Not anymore. Because, Chrome, that is my main browser, have a Color Picker built into the DevTools. How nice, eh?

Open the DevTools by clicking F12 (or use a menu) and in the Styles panel you can simply click on any color square and the Color Picker will open.

You can use a pipette tool on the left and while it's in the "ON" state and colored blue move it around the screen and click on any color and it will appear in the Color Picker with a HEX value.

No comments:

Post a Comment