X
Tech
Why you can trust ZDNET : ZDNET independently tests and researches products to bring you our best recommendations and advice. When you buy through our links, we may earn a commission. Our process

'ZDNET Recommends': What exactly does it mean?

ZDNET's recommendations are based on many hours of testing, research, and comparison shopping. We gather data from the best available sources, including vendor and retailer listings as well as other relevant and independent reviews sites. And we pore over customer reviews to find out what matters to real people who already own and use the products and services we’re assessing.

When you click through from our site to a retailer and buy a product or service, we may earn affiliate commissions. This helps support our work, but does not affect what we cover or how, and it does not affect the price you pay. Neither ZDNET nor the author are compensated for these independent reviews. Indeed, we follow strict guidelines that ensure our editorial content is never influenced by advertisers.

ZDNET's editorial team writes on behalf of you, our reader. Our goal is to deliver the most accurate information and the most knowledgeable advice possible in order to help you make smarter buying decisions on tech gear and a wide array of products and services. Our editors thoroughly review and fact-check every article to ensure that our content meets the highest standards. If we have made an error or published misleading information, we will correct or clarify the article. If you see inaccuracies in our content, please report the mistake via this form.

Close

How to copy colors on macOS with System Color Picker

We show you a Mac-based tool that tool helps you capture color codes by tapping a color anywhere on your Mac's screen.
Written by David Gewirtz, Senior Contributing Editor
screenshot-00001.jpg
David Gewirtz/Screenshot

Recently, my ZDNet colleague Lance Whitney wrote about how to copy colors with the Color Picker tool in PowerToys. PowerToys, of course, is a much-beloved Windows add-on. But if you're a Mac user, it turns out there's an equally useful tool available called System Color Picker, a free Mac App Store app by developer Sindre Sorhus. 

That's what we're going to talk about here.

Getting started with System Color Picker

Like all Mac App Store apps, installation is a breeze. Just point yourself at the app and press Get. I have mine installed, so it says Open instead.

When you first open System Color Picker, it presents a color picker window. We're going to ignore that and tweak a few settings first. Go up to the menu bar and select Preferences. 

You'll see this window:

screenshot-00003.jpg
David Gewirtz/Screenshot

Obviously, you can choose whatever you want, but I found I like these settings because it keeps the color picker on top of all the other windows and is accessible from the menu bar. Since it's something I use all the time, I far prefer that over the dock icon.

screenshot-00004.jpg
David Gewirtz/Screenshot

Now that System Color Picker is set up, it's time to pick some colors. All you need to do is choose Pick Color from under the droplet icon and then move your cursor over the color you want to pick up and click.

screenshot-00005.jpg
David Gewirtz/Screenshot

As you select colors, they get added to the Recently Picked Colors menu, which retains the last six colors you picked.

screenshot-00006.jpg
David Gewirtz/Screenshot

If you want to insert the color into your design, you have a bunch of options. These are all controlled by the Color tab of the System Color Picker Preferences tab.

screenshot-00007.jpg
David Gewirtz/Screenshot

As you can see, you can turn on and off a bunch of formatting options for how you want the code to be placed in your clipboard.

Because I do a lot of web development, I generally like capturing the hex code and formatting it without the hash mark. That's because I'm so used to typing # before my colors that I wind up with color codes like ##297fec in my code, which is not what I am looking for. Leaving out the hash mark also works well when specifying colors in Photoshop.

Also: How to resize your images quickly and easily

screenshot-00008.jpg
David Gewirtz/Screenshot

Finally, let's take a look at the selection window we saw when the app launched for the first time. You can bring this up anytime by selecting Toggle Window.

screenshot-00009.jpg
David Gewirtz/Screenshot

That gives you the full-featured color window common to most Mac design applications.

And there you go. You can do color selection from the Finder on macOS, just like Lance showed us for Windows.

Is this a tool you're likely to regularly use? It is for me. What other helpful little Mac utilities do you rely on? Let us know in the comments below.


You can follow my day-to-day project updates on social media. Be sure to follow me on Twitter at @DavidGewirtz, on Facebook at Facebook.com/DavidGewirtz, on Instagram at Instagram.com/DavidGewirtz, and on YouTube at YouTube.com/DavidGewirtzTV.

Editorial standards