Working on frontend code often requires copying colors, either from the reference designs, website or images. I'm doing it quite often. However, on Mac OS you don't have an omnipresent color picker as one might use in Photoshop. A tool which give you such a take it everywhere color picker is sip[1]. I love using sip, it's a great product. On the other hand it has many features I don't use and prefer not having less apps instead of one more.

So as the trial period for sip was about to ran out again, I set out to build a color picker mechanism myself using my always beloved open source friend Hammerspoon[2]. Skimming through the API it looked possible and I got it to work quite quickly.

Getting the current position of the mouse, take a small screenshot around that position, read the pixels color values and copy it to the clipboard.

Absurdly, however, the picked color value is off to the value I get from sip and other tools. The screenshot on the right shows the values from my Hammerspoon script, sip, a website and Affinity Designer[3]. This offset was not linear, so I wasn't able to fix it by offsetting it by a constant. I tried several days to fix this issue and debug it without success.

I ended up buying a licence for sip. Nevertheless, I would like to know where I got wrong. My current hunch is related to the systems color profiles.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e17c7570-ee3e-4b38-85df-e76837fcab8b/Screenshot_2020-06-16_at_23.05.35.png

You can find my hammerspoon code as gist here: https://gist.github.com/Pczek/049fc12fb49f2e9a469f9624153193ab


[1] https://sipapp.io/ [2] https://www.hammerspoon.org/ [3] https://affinity.serif.com/