Sometimes when creating visual content it’s important to match colors exactly, but how do you do that if you didn’t create the original image? The answer is to get a color code – either hex or RGB – that makes the color unique. That code can be used to match the color in other locations. Even if you are familiar with these terms, it can be difficult to guess these codes, even if you have a key to compare to. If you have a Mac, there is a built-in tool to help. And sure, expensive image manipulation tools include an “eyedropper” feature that can identify the color, but what about the rest of us on a PC using free or low-cost tools, or those who want to match colors outside of image editing software? Luckily, there are free color matching tools that can help. Today I will highlight a browser extension for matching colors when the internet is involved, as well as a downloadable tool that can match any color you see on your screen.
ColorPick
ColorPick is a browser extension that is available for Chrome, Firefox, and Edge browsers. After it is installed, it will appear as an icon in your toolbar. To capture the code for a color displayed in your browser, click the ColorPick icon and then hover over the color to reveal the hex and RGB codes.
If you are interested in step-by-step directions, Tech-Talk has written a great article with a video and screenshots outlining all of the steps using the Chrome browser. Operation of the tool works the same no matter which browser you are using.
Instant Eyedropper
There are some situations in which a browser tool will be unable to capture the color you want to copy. For instance, if you have an existing image saved on your computer that you want to pull a color from, the browser tool won’t help. This comes up often for me as a web editor. Library staff will give me an image associated with an event or service, and I need to make it a clickable image for the website. Without added text, it can be unclear whether the image is clickable. But I want to make sure any text I add blends seamlessly with the existing image. This is the perfect use case for Instant Eyedropper. It should be noted, however, that this tool will only supply hex codes.
Instant Eyedropper is available in both portable and installed varieties. To start the program, open it from your portable drive or the start menu. After you do, the Instant Eyedropper icon will appear in your taskbar:
If you don’t see the icon, try clicking the arrow to reveal hidden icons. You can drag the icon down to the taskbar to make sure it stays visible.
Click the icon in the taskbar to activate the eyedropper, and your mouse cursor will become crosshairs. Hover over a pixel with the desired color to reveal the hex code. The display magnifies the coverage area to allow for the most accurate selection:
Notice that the area appears to be white, but white would show hex code FFFFFF. This tool is sensitive enough to pick up even the subtlest shade differences. Click to copy the code when it is perfectly placed. After you click to copy the code, your cursor will return to its normal shape and deactivate the eyedropper. Use any pasting method to transfer the code to its destination.
Please note that some apps will not support the copy/paste action. In that case, simply copy the displayed hex code and enter it manually in its destination.
Conclusion
There are a number of free eyedropper tools, and we have only highlighted two of the most popular. If you have a favorite tool or a question about the tools discussed here, let us know in the comments.