The One with the Color Picker in Chrome DevTools

Photo by Markus Spiske on Unsplash | https://unsplash.com/photos/hqCEQTc5gZA

I was today years old when I learned that there is a color picker available within Chrome DevTools.

I was making tweaks to the homepage of my website. I use Bootstrap with some custom styling which was making for some weird spacing on larger screen sizes. I was debugging where the extra height was coming from by adding obtrusive background colors to all div elements.

Usually, I inspect an element and double-click it’s hex value in the styles panel to manually make a change. By mistake, I clicked the small color square next to the hex value and—whoa—a wild color picker has appeared!

Example of using Chrome DevTools to change a hex value
An example of using Chrome DevTools to change the hex value of a CSS property value

Pretty cool right?

In playing around with the tool some more, I see that you can use an eyedropper to pick out new colors, toggle the color values from RGA, hex, and hsla and even pick colors from the material design color palette.

This is great news for someone like me who wants needs to debug in the browser or wants to test new colors without opening up a text editor.

Here’s Google’s documentation on the tool and other CSS Reference features.

Chrome DevTools | CSS Reference

The One About Twitter Tech Chats

Photo by Slava Bowman on Unsplash

I enjoy participating in Twitter Chats.

Sometimes, I forget when my faves are, or, forget to flag new ones to check out later.

So, to help keep them all in one place (and to discover more) I created a Twitter Tech Chat repo on Github with a list of some of the tech-related Twitter chats on my radar.

This repo will evolve over time, but for now, it works.

If there’s a tech chat you regularly tune into that’s not on the list, open a pull request and get it added.


Photo by Slava Bowman on Unsplash