How to copy colors on macOS with System Color Picker

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:

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.

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.

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

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.

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

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.

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.