The Macintosh OS X Color Picker

When you choose to change colors in most programs while using OS X on the Macintosh, you get the OS X color picker.

In most applications, like Mail or TextEdit, it pops up when you choose Show Colors from the menu, or tap Shift/Command/C. For some you have to specify that you want to use the System Color Picker in the Prefs for the program. Others have some kind of key combination that lets you access it.

Still, there are some people who have a hard time getting it to show up at all. If you are one of those, there's help for you at the end of the tutorial.

This built-in System Color Picker is a very slick tool, but it seems a lot of people don't really know how to use it, because there's not any documentation to speak of. Which is a shame, since it's fantastic and extremely useful. So, here you go!

The Mac OS X Color Picker, showing HSB Sliders.

Across the top, as everyone knows, are a series of icons.

The first one opens a Color Wheel that allows you to pick the hue and saturation from the wheel, and the value from a slider on the side. This is pretty standard stuff, and a lot like the pickers you can find other places.

The second opens the Sliders portion of the picker, where you will find sliders for all the normal color picking schemes; Gray Scale, RGB, CYMK, and HSB. Once again, no big whoop.

The next one, though, starts to get into the really handy properties of the Mac picker. This is the Lists picker. There are several canned lists included with the OS, including Web Safe Colors, which is nice.

But the real beauty of the thing is that you can make your own lists! Need a consistent set of colors for your design team? Make 'em here, distribute them to everyone, and they'll all have them right in their Picker, with no mistakes. Found the perfect color for Gold, and want to have it available in all your 3D programs? Put it in a list here, and open it everywhere. There are myriad possibilities, as I'm sure you can see.

Start a New List by using the List menu at the top.

To start your own list, choose New from the List menu under the swatch window. A new list will be opened, containing only the color currently in the large swatch at the top of the window.

Rename the list using the same menu.

You can name it by clicking on the menu again, and choosing Rename.... A window will open; just type the name you want into the text field.

Add colors by using the Color menu at the bottom of the window. New will add the color currently in the Swatch to the list.

Add colors by getting a color using any method, so the large swatch is filled. Then pick New from the Color menu below the list window.

Select the color, and use the Color menu to give it a meaningful name.

The new color will appear in the list, automatically named for the List and given a number.

Give the color whatever name you want by selecting it in the list, then choosing Rename... from the Color menu at the bottom.

All the colors show when the Search field is unsued.

Once you have a list, you can easily find colors in it by typing part of the name into the Search field below the List window.

As you type, the color lists changes, so only colors that use those letters are shown.

As you type, the list will change to show only the colors with those letters in the name. When you see the one you want, stop typing, and choose it!

Pick a color, then go to the Web Safe Color list to automatically choose the closest Web Safe Equivalent.

Besides all that, if you pick a color using another method, and then choose a list, it will automatically take you to the closest match in the list. So you can pick a perfect shade of teal, go to the Web Safe Colors list, and it will open to show you that 66CCCC is the closest web safe match. Click on that swatch, and you have the Web Safe Closest Equivalent to your color.

You can also remove selected colors using the Color menu, or whole lists using the List menu.

Put any picture you have into the Images Palette.

The fourth icon opens the Image Palettes. The Spectrum palette is loaded by default, but you aren't limited to it. You can open any picture you have, and use it as a palette, by choosing New From File... from the Palette menu below the picture.

Once you have one, you can pick any color from within it, just by clicking. Or you can drag and watch the colors change. A tiny white square will show you exactly where you are.

You can also paste a picture from the clipboard here (New from Pasteboard,) Rename images, Remove them, and so on.

Click on the picture, then reszie a few times, to blur the image.

An interesting thing about this particular method; if you click anywhere in the image to pick a color, then resize the palette a few times, it will cause the picture to blur, giving you gradations between the colors that you didn't have before, as seen here.

You can also copy the pictures (Copy in the Palette menu) and paste them into any other program, or right back into the color picker. So if you get just the right amount of blurring by resizing, you can copy, and then paste the new picture in as blurred. (Otherwise, when you open the color picker in another program (or another session of the same program) the picture will be sharp again.)

Finally, there's the famous Crayon picker. Which is cute, but that's about it.

However, that's just the beginning of what the picker can do.

The Magnifying Glass; An Eyedropper on Steroids!

Below the icons is a Magnifying Glass, which behaves like an eyedropper on steroids! Click on it, then move your cursor. It magnifies the pixels below it, and allows you to pick the color of any pixel, anywhere on your screen, no matter what program is responsible for the window containing that pixel.

So you can grab a color from anything at all - a .pdf file your boss sent you, a picture you are working on, a photograph you just took - and find the closest Web Safe color, or put it into your own document, or simply use it to match type colors perfectly. Just like that!

Open the Swatch Drawer by dragging on the lines below it.

You can also save whatever colors you are working on by just dragging them to the Swatch Drawer at the bottom of the picker.

Open or close the drawer by dragging on the two horizontal white lines below it.

Store colors in the drawer by dragging them from the Top Swatch.

Then just click on the large color swatch at the top, and drag. As you do, your cursor will turn into a small swatch. Put the color wherever you like in the drawer by releasing the mouse button.

Once you have your colors there, you can rearrange them by dragging them around. As you drag, a duplicate will appear. Drop it wherever you want. If you drop it onto another color, it will replace it.

Delete swatches by dragging a white swatch over them.

Make them "go away" by dragging an empty (white) swatch onto the color.

You can save up to 300 of these temporary swatches, to retain your colors while working, or to carry from one program to another. Any app that can use the System picker will have access to all the swatches, lists, etc. (Open the Window and the Drawer to the maximum size to see all 300 swatch slots.)

All the Lists and Image Palettes are stored in your Home > Library > Colors folder.

All the lists and picture palettes are stored in your Home>Library>Colors folder as .clr and .tiff files; so you can share them with other people in your group, with your friends, or on the Web.

You can add additional palettes, like Painter's Picker from Old Jewel Software.

As if all of that wasn't enough, you can also download additional color picking methods, like Old Jewel Software's Painter's Picker. All you have to do is drag it into your Home>Library>ColorPickers folder, and you can automatically pick a bunch of color schemes, and do all sorts of other things that expand the already large capabilities of the color picker. Like grab a color with the Magnifying Glass, and automatically be given the other three colors that form the Golden Complimentary color scheme, in the Web Safe color range. Check it out! (And don't forget to pay the small shareware fee, if you decide to keep it installed.)

Or Chromatic Bytes color picker, Shades, which lets you pick from a range of related shades, keeping either the Hue, Saturation, or Brightness constant. You determine the size of the steps, and the number of chips that are shown in the Shades grid (the latter is on a drop down menu.) The colors are all HSB, but if you hold your mouse over any chip, you get a Tool Tip that tells you the RGB values, too, in case you need those. In addition, if you happen to be working with a program that supports it, you can choose the transparency, as well! (That's what you see in the screen shot above, working with NoteTaker.) This one is perfect for those situations where you need several exact matches for a color just a few shades different from one you keep in your Swatch Drawer. Using this tool, you don't have to save another swatch; just use the same color from the grid! You can try it for a month before you decide to get it; but it's less than $20 (at the time of this writing) if you do decide to buy.

If you do a lot of web development, you can't go wrong with Hex Color Picker from waffle software. This little gem not only gives you the Hex code for any color you pick in other ways, but it can go the other direction, and give you the color for a Hex you type in, using either six digits, or the 3 digit shorthand format. You can also choose from several options, such as using uppercase hexadecimal digits, recogizing HTML color names (such as "red", "orange", "blue" etc.,) generating calibrated colors, and automatically checking for updates.

 

If you have one you like, let me know, and I'll add it to this list, and credit you with the discovery!

Hex Color Picker

If you do a lot of web development, you can't go wrong with Hex Color Picker from waffle software. This little gem not only gives you the Hex code for any color you pick in other ways, but it can go the other direction, and give you the color for a Hex you type in, using either six digits, or the 3 digit shorthand format. You can also choose from several options, such as using uppercase hexadecimal digits, recogizing HTML color names (such as "red", "orange", "blue" etc.,) generating calibrated colors, and automatically checking for updates.

This one is free to download, but they do ask that you contribute a dollar or so if you like it, and want to help them develop more things.

Mondriauum Color Picker

If you're a fan of Adobe® kuler, you'll love Mondrianum 2 from Lithoglyph. It puts kuler right in your Color Picker, so it's always close at hand!

You can choose to look at the newest colors, the most popular, the highest rated, or a random selection from one of three time periods. If you see a set you like, you can go to the kuler site and see that set online, save it as a List (described above) or, in a purely fun choice, set it as your wallpaper! (You can't actually choose one of the colors until you save it as a color list, and the list will have only those five colors in it; but you can open it on the web, and use the magnifying glass to sample the color if you really don't want to make the list, for some reason.)

This one is free as well, but when you use it the first time, it will very politely ask if you'd like to see the software they make for the iPhone.

Tangerine Picker

Finally, if you really need a full service color management solution, there's Tangerine. It includes a color picker, as shown above, but it's so much more than just that.

This one includes Actions for many popular applications, lets you drag a color chip into code (and generates the correct code for that programming lanugage, as you do so,) lets you limit palettes to specific color spaces, and keeps track of the modifications you've made to a color, so you can see where you were (and go back there, if you need to.) If you're interested, check it out at the Tangerine website.

You have to pay for this one; but it's not expensive if you need its capabilities. ($40 US at the time of this writing.)

Inaccesible Color Pickers

One caveat about using the add on Color Pickers. For some reason, Photoshop won't use them if they are not visible in the Icon Bar. In other words, if they appear in the fly out menu to the right of the picker, as shown above, they will not work. (They might not even display properly. The second one in the menu above is the Hex Color Picker, not Shades.)

To fix this, just increase the size of the color picker (drag the bottom right corner) until the icon for the one you want is showing. Then you will be able to use it normally.

Script Editor window, with Script (choose color) showing

If you're having a hard time getting the Color Picker to show up for you, it turns out that there's a really easy Scripting solution. (Honestly. It's just a single line.)

To use it, just open Script Editor (it might be in Applications > Utilities, or in Applications > Applescript). When the program opens, type 'choose color' (without the quotation marks) into the window, as shown above. Save As.. choose Application from the list, and you'll have an application that you can click to bring up the Mac OS X Color Picker at any time.

Color Picker application in the Dock

If that's making your eyeballs glaze over, you can download a zipped file of that application by clicking here, complete with a custom icon that I've made for it.

And that's it! I hope this helps you to use the Mac OS X Color Picker to its fullest, and simplifies your work!

If you have a question, write to me and ask it!

Everything on this site is copyright © Robin Wood; all rights reserved. Please do not use anything without permission. To get permission, write to me, and explain what you intend to use it for.