As an interface designer, my world consists of a lot of color. Finding, collecting, choosing and messing with lots and lots of pigments, hues and shades. On my 12-inch Powerbook, my weapon of choice was Colorzilla. Man, I loved Colorzilla. It was sexy. It was easy. It was fast.

Unfortunately, this sweet little Firefox extension didn’t seem to play nice on my shiny new Intel Mac. A couple months went by, and I tried to get by using Colorzilla via Parallels, or sometimes leaving Photoshop open to get the job done. It wasn’t great and it was slow and I hated it a little, but I wanted to be patient. After Firefox 2 came out and still no Colorzilla support for Intel Mac, I knew something had to be done. With a little research I discovered my answer can come from within OS X. With just a quick download and some Apple Script, I was pickin’ colors like crazy again without having to load a crap load of software. Here’s how I did it.

  • 1) Download the Lucky Software Hex Color Picker and install it. This will allow Apple’s built in color picker to display web developer friendly color values to use in your CSS files.

  • 2) Download my awesome Choose Color Apple Script I made thanks to this sweet MacOSXHints article. Don’t be fooled by it’s brevity. It took me hours to get it just right. Double click on the script and BOOM! Now you’re able to access the Color Picker from any application in OS X.

  • 3) If you want to make it even easier to access, put it in your library scripts folder and turn on your Script Menu. Just copy the script to /Library/Scripts/ and find the AppleScript Utility in the AppleScript folder inside Applications. Check off “Show Script Menu in menu bar” and you can now easily access colors from anywhere with a single click.

To learn more about how to take advantage of OS X’s built in Color Picker (like making swatches and such) definitely check out The Macintosh OS X Color Picker. Now, get out there and pick some colors!

HTML Form Builder
Kevin Hale

Easy Color Picking on the Mac by Kevin Hale

This entry was posted 4 years ago and was filed under Notebooks.
Comments are currently closed.

· 24 Comments! ·

  1. Fernando · 4 years ago

    Nice!

  2. Graham · 4 years ago

    You do know about the DigitalColor Meter under Applications —> Utilities, right?

  3. Kevin · 4 years ago

    Oh man, Digital Color Meter is pretty cool. I’ve already started using method above because I like having access to swatches from any application. Thanks for mentioning that.

  4. Julian Schrader · 4 years ago

    Thanks — I think that’s useful… But I’m using this HexColorPicker: http://wafflesoftware.net/hexpicker/

    It’s the same, isn’t it?

  5. Michael Bester · 4 years ago

    For me, XScope is the way to go. Not only does its Loupe tool magnify and allow you to copy any color on the screen, but it has a number of other tools - like a ruler overlay - that make designing and developing that much easier.

  6. Kevin · 4 years ago

    Michael, XScope is great, but I think a lot of people would prefer not to pay money for color picking.

    Julian, I tried HexColorPicker and preferred the simple interface but I noticed that the colors it was giving me didn’t match what was in my CSS file. I have no idea why. Maybe I did something wrong, but just to be safe I gave out what I knew worked for me.

  7. Dale Cruse · 4 years ago

    I use xScope as well. While there is a cost, the app does more than just pick colors.

  8. Jed Wood · 4 years ago

    I threw something together similar a couple years ago that I’ve been using ever since. With Quicksilver it’s even that much easier to bring it up from anywhere…

  9. Marty Stake · 4 years ago

    How about QuickPicker? http://home.wanadoo.nl/joost.markerink/quickpicker/

  10. Dominik Hahn · 4 years ago

    Doesn’t work for me. :(

    I double-click the ‘!Choose Color’ scriptfile and Mac OS tells me that it can’t open it because the file can’t be altered.

    Any chance you put the sourcecode online? Thanks! :)

  11. Nicolas · 4 years ago

    I always use Pixie: http://www.nattyware.com/pixie.html

  12. Lance Willett · 4 years ago

    @Nicolas: Pixie is great, but it’s a Windows app (not a Mac OS X program).

    Personally I love the ColorZilla extension and am really bummed that it isn’t compatible with Intel Macs… My vote goes to the DigitalColor Meter method (mentioned by Graham). Simple and easy!

  13. Phil · 4 years ago

    Ack! The second download is disappeared!

  14. Phil · 4 years ago

    Whoops! No, there it is… Relative link from the feed puked in Bloglines.

  15. Phil · 4 years ago

    Ok, got the zip. Now I’m having the same issue that Dominik Hahn had. When I double click it tries to edit in Script Editor. I’m new to macs - just bought an Intel MacBook… Must be an AppleScript pref. Not turned on or something? Any advice is welcome!

  16. Brutal · 4 years ago

    Same problem here. “Unable to read the file because the script is not editable (it was saved as read only)”

  17. William · 4 years ago

    I had the same problem opening the file, but got it working from the script menu:

    Drop it in /Library/Scripts, then tick ‘Show Script Menu in menu bar’ in /Applications/AppleScript/AppleScript Utility

    Select it from the script menu, the color picker pops up, the hex picker is the last icon on the right. (Use the spyglass to pick colours, took me a minute to figure that one :)

    Thanks Kevin

    p.s. the new design is fresh!

  18. rebecca · 4 years ago

    can I second the request for the source of that script? like others have mentioned, it attempts to open in Script Editor. I’d like it as an .app, so I can add my LaunchBar config will pick it up from my scripts folder.

  19. APM · 4 years ago

    Good, simple way to access color picker while in any application! Great script. However, the HexColorPicker’s big shortcoming is that it’s not much help if you want web-safe colors. The #rgb setting doesn’t select the closest color and force it to 3 digits, it simply says that “selected color can’t be represented in 3 digits.” The “Web Safe Colors” list in the color palettes view already does that (by giving you a 3-digit color in 6-digit format), and it’s included. However, if you’re not working within the 216 web-safe colors and need precise RGB values, I can see how HexColorPicker could be useful.

  20. William · 4 years ago

    Everyone needs a hug.

  21. Brad · 4 years ago

    I think http://kuler.adobe.com/ deserves a mention as well.

  22. Tracy · 4 years ago

    Incredibly frickin’ AWESOME! Having color at your fingertips at any given moment is heaven sent!!!! I was lookin’ around to see if anyone had made an app to where you could just control-click on a color ‘anywhere’ and have the hex value, and found your site and script, even better!! This is lovely! Thank You Sooooo Much!

  23. Rukavi · 4 years ago

    i couldn’t open the script because it’s a read only file

  24. Phil Crosby · 3 years ago

    Your mint download pepper isn’t working, so the script is unavailable.

    “Made it in Warning: Cannot modify header information - headers already sent by (output started at /home/2462/domains/particletree.com/html/mint/pepper/orderedlist/downloads/class.php:104) in /home/2462/domains/particletree.com/html/mint/pepper/orderedlist/downloads/download.php on line 32”