How do I quickly select a color from a web page using Google Chrome?
A little while ago, my colleague Tony Fong wrote about editing colors on a WordPress website via CSS. This really useful information, and I thought I’d make employing it a little easier by advertising a tool that Google built into its Chrome browser: the color picker.
Say you’re redesigning your website. Perhaps you want to consolidate your color scheme, so it incorporates fewer colors. Or test switching your website’s accent color with its link color. Or maybe you want to get the hex codes for the colors of a company’s logo, but don’t have access to them yourself. Google Chrome’s color picker enables you to do all of these things.
Google Chrome’s color picker works similarly to most eyedropper tools in graphics editing programs like Adobe Photoshop, GIMP, and even Microsoft Paint. Once activated, the color picker takes whatever color the user selects (by clicking in the work area) and makes it the primary color for the work palette. In Google Chrome, the color picker replaces whatever color a CSS element has with whatever color the user selects.
To use the color picker, right-click the page from which you want to get the color information. Select “Inspect Element” to bring up the Developer Tools frames. In the “Styles” tab, various CSS data appears, including color codes– and color swatches. Click one of the color swatches, and then move the cursor back into the primary browser window. The cursor changes to a magnified grid view of the elements the cursor is over. Each one of those squares is like a color swatch– containing color information that Google Chrome will import to the color swatch in the “Styles” tab you initially clicked on.
Test it out! Click on any colored element. You should see that color replace the color swatch in the “Styles” tab, and two things happen as a result. First, the new color’s hex code is now listed next to the swatch. Second, the new color styles the element that the color swatch is tied to.
This is a fast, no-cost/high-reward way to test switching up colors on a web page– immediate visual feedback. Unfortunately, the color picker only selects colors from the web page being inspected. So you can’t use this between different tabs or windows. But you can use the color picker to retrieve the color’s hex code, and then import that to the page you want to modify… using the Developer Tools window, of course.
I’m a big fan of low-cost/high-reward tactics and tips. If you have any more, clue me in at firstname.lastname@example.org.