I now use Figma for most of my UX projects. If you are like me and missing the option to pick any colour off your screen while designing this tip is for you. It works for MacOS users only and can be used while working in any application. There are other ways to achieve the same results but this one is on the cheap site 🙂

It is based on a nifty little script my colleague showed me. This post is in two parts – a short version and a long version explaining the pitfalls and how to set it up step by step.

Tl;DR:
Use the below AppleScript to automatically copy the colour under your cursor using Digital Colour Meter:

on run {input, parameters}
	
	tell application "Digital Color Meter" to activate
	tell application "System Events"
		click menu item "Copy Colour as Text" of ((process "Digital Color Meter")'s (menu bar 1)'s (menu bar item "Colour")'s (menu "Colour"))
		set visible of process "Digital Color Meter" to false
	end tell
	
	return input
end run

The long version:

Some of you may have already noticed that the above script version features British Spelling. So, if you are on the other side of the pond: ⚠️ Change Colour —> Color or the script will not work!


Next step is to set up Digital Colour Meter, located in Applications/Utilities (⌘ + Shift + U while in Finder)
Launch it and go to: View—> Display Values —> as Hexadecimal this will help when pasting in Figma

🎨 The next step to consider is colour. And it is important step. On the main window you can select how the values are displayed. I suggest “Display in sRGB” or “Display native values”. That will depend on how you work and how accurate is the colour profile you are using.

I suggest you test and see what works best for you.

The next steps explain how to set up the script and assign it a shortcut combination of your choice using nothing more than what comes with MacOS. If you prefer you can use Keyboard Maestro, Butler or Better Touch Tool as options that come to mind.

📁 If you want, you can download the ready Workflow for both UK and US language and assign it a shortcut in System Preferences. All details on the complete creation and set-up process are 👇

---------------------------------------

Open Script Editor, paste the above AppleScript and save the file in a convenient place.

Start Automator and create a new Quick Action

From the Library on the left select “Run AppleScript”

From the drop down at the top of the script labelled: ‘Workflow receives current” select: “no input”

Drag and drop the script file you created in the initial step

Save your work in Automator.

Now we will have to assign a keyboard shortcut to the Quick Action that we just created in Automator.

Go to  —> System Preferences —> Keyboard —> Shortcut —> Services —> “Whatever name you gave your Quick Action” in this example it is "Colour Picker"

🎉 This completes the process. The first time you invoke your new workflow gem you will be nagged by MacOS to give permissions. Like the following. After that you need to authenticate every new application from which you invoke the script. MacOS will ask you so, no need to worry. It is a bit of a pain but nothing to worry about.

If you feel the steps are too much you can try ColorWell. I purchased the app a few weeks ago and can only say positive things about it. Very useful with many great features.

Enjoy