It’s hard to think that almost a year ago I was applying for a Nanodegree. I was not on the hunt for scholarships or looking to enroll in a bootcamp or nanodegree. I saw the opportunity on social media and almost did not apply. Afterall, I thought, I knew how to code—I had been learning to code for years! I was mostly self-taught but I was employed as an email developer. There were people with similar backgrounds as me who were struggling to find something—anything—in tech. I thought that I didn’t deserve the scholarship and this was before I even applied!
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.