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