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.
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?"
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:
You can get apps from the App Store to do that job for you but most of them you have to pay (which is great because someone has taken time to solve this problem for us).
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.
Creating the 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.
Write this script 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:
Thanks to our friend Arun who's a super designer that I interviewed for the Design x Us blog (coming soon), you can get macOS aesthetic icons from the macOS Icon Gallery resource.
You can explore the resource until you identify the icon that works best for you, right click and save as image OR
Go to google search, copy and paste this "color" site:https://www.macosicongallery.com/, press enter, and select which images works for you.
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.
You should now be able to launch your custom app by pulling up the Spotlight (cmd+space) and then typing the word Color Picker.