How to make a macOS Color Picker App

April 17, 2022

When you’re designing a presentation deck, logo, app, poster, you always want to select the right color. Color is one of the hardest parts of the design process thanks to Color Theory. In this tutorial, we will explore how to create a macOS Color Picker app from scratch.

So as you design, you start looking for inspiration. I embrak on search journey in Dribbble, Behance, Pinterest and even a simple google search. Just like me, you tend to identify a color appropriate for the project through those inspirations. Now you ask yourself, "How do I get the color codes aka the syntax of color values and how color it is represented in code?"

macOS Color Picker

The Challenge

There are so many options of getting the color codes. We all want to copy and paste them and move forward with our projects. There are two main ways of getting those color codes, as a Mac user:

  1. You can get apps from the App Store to do that job for you, but most of them require payment (which is great because someone has taken time to solve this problem for us).
  2. There are chrome extensions which you can download and trigger them to capture what you have inside your browser window. Sadly, if you had downloaded the image that you wanted to pick the color from, it becomes impossible to use your Chrome extension now. In this article, we will address this challenge by creating a macOS Color Picker app that provides a convenient and free solution for extracting color codes.

Creating the actual app: Step-by-step guide to creating a macOS Color Picker app

To help resolve this, we are going to create this app, with no installation necessary for you. We’ll be using Script Editor app Apple Script Editor icon already installed in your system. It creates powerful scripts, tools, and even apps. It is included in Mac OSX 10.5 and later.

Creating the actual app

Firstly, launch it using Spotlight (typically cmd+space) and type Script Editor. You can also find it at its permanent home in the Applications > Utilities directory.

Apple Spotlight

Next, with the Script Editor open Apple Script Editor icon on your Mac, select the Application folder location then click New Document. This will make our script look and function like a regular App.

Create new document in macOS applications folder

Writing in Apple Script Editor: Writing the script for the macOS Color Picker app - choose color in the open editor Apple Script Editor icon.

Writing in Apple Script Editor

Then go ahead and save the script cmd+S and enter a name for the app, I named it Color Picker and put inside the same Application folder.

Lastly, click the File Format pop-up menu, then choose Application. Then click “Save”.

Name app in Apple Script Editor

So whenever you need to get an item's color, just launch your Color using Spotlight or add it to the Dock menu.

Launch custom macOS color picker app

Next up, App icon

You’ll notice that the app has a default Script icon Apple Script Editor icon. Let’s add a nice icon for this application through:

  1. Thanks to our friend Arun who's a super designer that I interviewed for the Design x Us blog, you can get macOS aesthetic icons from the macOS Icon Gallery resource.
    1. You can explore the resource until you identify the icon that works best for you, right click and save as image OR
    2. Go to google search, copy and paste this "color" site:, press enter, and select which images works for you.
  2. Alternatively, download this .png file →

Now since that's done, to add the icon to the app, right-click the app and select Get Info. This will open the file info, including when it was created, what kind it is, etc. Drag our .png file onto the small icon on the top left, and voila! Our app now has a custom icon.

Add icon to custom macOS app

Pick colors

You should now be able to launch your custom app by pulling up the Spotlight (cmd+space) and then typing the word Color Picker. This intuitive and efficient method allows you to access the macOS Color Picker app instantly, simplifying your color selection process.

Launch custom macOS color picker app


By following these steps, you can now create your own customizable macOS Color Picker app to streamline your design process. Start using the Color Picker app today and simplify your design workflow.

Get in touch

If you have any thoughts, feedback, or questions about creating a macOS Color Picker app, feel free to reach out to me. I would love to hear your insights and experiences with color selection in design projects.

Related Articles