How to make a macOS Color Picker App

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 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.

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

Writing in Apple Script Editor: Writing the script for the macOS Color Picker app - choose color in the open 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”.

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

Next up, App icon

You’ll notice that the app has a default Script 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:https://www.macosicongallery.com/, 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.

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.

Conclusion

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.