The Macintosh OS X Color Picker

To start your own Palette, choose New from the Tools button just to the right of the list name. (It has an image of a cogwheel, and an arrow on it, to show that it's a drop down menu that has Tools behind it.)

A new palette will be opened, containing only the color currently in the large swatch at the top of the window. By default, they will both be called "Untitled," with a number. For instance "Untitled 1" for the list, and "Untitled 1 1" for the color.

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

Add colors by getting a color using any method, so that your color shows in the large swatch at the top of the panel.

Then click the + (plus) button below the list of colors in your palette.

The new color will appear in the list, with the list name followed by a number.

You can also just drag colors from the small swatch area, in the bottom of the panel, into the Palette. They, too, will be given the default name (Palette and number.) There is more about those swatches later in the tutorial.

You can give the color whatever name you want by simply double clicking on the name in the Palette, and typing into the field.

Clicking once on the name selects it, and replaces the large swatch at the top with that color.

Clicking on the name of a selected swatch makes the name field editable.

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

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!

This isn't important when you have a small Palette, where you can scroll through the colors in a moment. But with longer Palettes, it becomes a real time-saver.

If you need to find the closest match in the list to a color you have somewhere else, just choose that color, using whatever method you want. (The Magnifying Glass, mentioned below, is great for this!)

Then, simply open the desired Palette, and it will automatically take you to the closest match.

So, you can pick a shade of teal from an image, go to the Web Safe Colors Palette, 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 use in your work.

To remove a color, just click on it to select it, and then click the - (minus) button, at the bottom of the Palette.

The color will vanish, and the next color in the list will be selected, filling the large swatch at the top.

If the color you removed was the final color, then the next color up, which is the new final color, will be selected instead.

Be careful, though, because this cannot be undone, and your color will instantly be gone.

This is one of the reasons that I recommend that you make a backup of your color lists. (There are instructions for backing up at the bottom of this Accordion.) You might also want to pull a copy of the color into one of the small swatches (see below) before you delete it. Just in case.

To remove an entire Palette List, choose Remove from the Tool button to the right of the Palette name.

You'll get one of the "Are you sure?" dialogs, that will ask if you really want to remove the whole color list.

Click Yes, and the Palette, and all its colors, will instantly vanish from the list, and also from the Library folder where it's stored (see below.) This cannot be undone, so be careful when you choose this command. (Backups are always good to have. Just saying.)

In addition to making your own Palettes from scratch, you can also open palettes that you get from other people, or download from the web.

To do so, simply choose Open... from the Tools button to the right of the Palette name.

A normal System browser will open, that will allow you to find any compatible (.clr) files on your computer, and open them as a Palette List.

This will also put a copy of that file into the Library, as shown above. If you delete the Palette, it will remove it from the Library, but won't touch the other copy, wherever it happens to be stored. (Assuming that you have it stored someplace other than the Library, of course.)

If you would like to try this out, you can download a .clr file to experiment with.

New Color Palettes you make are stored in your Home / Library / Colors folder, as .clr files.

To make a Backup of your Palettes, just hold down the Option key, and drag them to any secure location you would like, to place a Copy there.

If you Remove a Palette, it will vanish from the Library, but it won't affect any backups stored elsewhere, of course. So make them. Make two, they're small.

Of course, if you manually drag any .clr files into this folder, they will show up in the Palette list. If you need to open a bunch of them, this can be much easier than doing it all from the Picker.

Sadly, it seems at this point that there's no easy way to arrange the order of colors in the list.

However, that doesn't mean it can't be done; it's just not elegant or simple. Which means that you really need to plan it out first, because you don't want to be doing very much of this.

To copy colors to the bottom of the list, select the color you want to move, and drag it away from where it started, releasing it while still over the list window. It will be added, with the default name, to the bottom. (No, there's no way to insert it anywhere else; or if there is, I don't know it. If you do, please write and tell me how!)

Then, double click on the name of the original color, and Copy it to your clipboard. (Command C) Once you have done this, remove that named color. (- button)You can't have two colors with the same name in the list.

Finally, double click on the color that should have that name, and Paste it into the field. (Command V) You have now moved a color to the bottom of the list, which is the only place you can move it.

Continue, until they are in the order you desire. In the illustration, since I want Deep Yellow to come after Pale Yellow, and then Peach, and finally Sugar Pink, I would first move Peach to the bottom, and then Sugar Pink, so it would come below Peach. Then I'd do the whole renaming bit, removing the misplaced copies of the colors as I went, and hoping that I didn't accidentally delete any that I hadn't copied yet. (Yes, do make a backup before you start this.)

Tedious, but possible, if you need to do it for some reason.

(It's far better to plan in the first place, though. I recommend arranging them in the small swatches, and then dragging them into the Palette List, so they are the order you want in the first place.)

Whenever you pick up a color with the Magnifying Glass, you'll find that the upper right hand corner is gray.

This indicates that the color is using the Device RGB Color Space. In simple terms, it got that color from the screen, not from any particular color space.

That little gray corner is warning you that this is likely not to be the color space you're working in, and it might not look at all like it looks like it will look, depending on the Color Space of the document where you try to use it. In other words, that color may appear very different, from one document to another, so watch it. (Sorry about the alliteration, but I just couldn't help myself.)

You might want to just choose a color space for it, and then it'll lose the gray corner, and be a real, predictable color.

To pick the Color Space you want to use, go to the Sliders pane of the Color Picker, and then click on the Color Space icon, at the top left, next to the Sliders Name. It's the colorful square with the tiny white down arrow on it.

That will open a menu that has a great many Color Space choices.

Which one you want will depend on what you are doing with the color. For instance, if you are using it in the Adobe Creative Suite, you'll want to use the same Color Space that you're using in the rest of the suite. That way, the color you see here in the Picker will match the color you have in your documents.

If you're mainly working for the Web, you might want to use the SRGB IEC61966 2.1 color space, which has a fairly small gamut that looks pretty much the same on most devices, and so on.

This is true no matter how you are getting your color, of course, not just with colors you pick up with the Magnifying Glass. So it's a good idea to set the Color Space before you start to pick colors.

(Yes, the color can visibly change, depending on the Color Space you pick. Try changing it, and watch the sliders move!)

Underneath the rest of the Color Picker panel is the Swatch Drawer.

You can open or close it, to expose the swatches or save desktop real estate, by using the tiny dot just under the drawer, in the middle of the panel. Drag down to open the drawer, of course, and up to close it.

To enlarge it horizontally, you need to enlarge the whole window by dragging on the bottom right corner. As you do, you'll reveal more and more little wells to store your working colors in. There are 300 of them, when it's fully expanded.

To save a color in the Swatch Drawer, simply drag it from anywhere else in the Color Picker into one of the squares in the drawer. It'll be saved in that spot, which is very handy.

This works, whether you're dragging it from the large swatch at the top, from a list, or from another spot in the drawer. You should be aware, though, that dragging from another spot in the Drawer doesn't copy the swatch; it moves it. It will disappear from the place where it was. If there was another swatch in the target square, it will be replaced by the one you are dragging. Once again, this cannot be undone, so be careful.

This makes it very easy to arrange your swatches; but it also makes it very easy to accidentally overwrite them, and you can't make a backup of this portion of the Color Picker. (At least, if you can, I have no idea how to do it. If you know how, please tell me!)

For this reason, I recommend that if you think you're going to need the swatches for more than a single work session, you make them into a Palette List, and use that as your backup.

To remove a color from the Swatch Drawer, simply replace it with another color.

If you want to clear it out, and leave a nice empty square, drag any empty (white) square onto it. The color you no longer need will be gone.

There is no undo, so be careful, and if you think you might want the same color again some time in the future, put it in a List before you remove it.

Since this is a Mac, you can color some things by simply dragging a color swatch out of the picker, and onto the object.

In my experiments, this mostly works with text, spread sheet cells, and so on.

If it's Rich Text, you have to highlight it first. If it's not, you can usually recolor the whole thing at once. Or you might wind up recoloring the background instead, depending on the application in question.

The good thing about it, if you can use it in your work, is that you don't need to select the color first, and have it fill the large swatch at the top. You can just drag it directly from a list, or from the small swatches at the bottom. So it makes it very quick, if you have a number of things to color.

It might not work for any of the programs you use, but it might, and I was told about it by a reader, so I'm including it here. It might be worth a bit of experimentation.

If you are an artist, and you work with color schemes and themes, you are going to love this one.

It's updated regularly, and the capabilities are nothing short of amazing. Choose your color space (RGB, CMYK or Web) choose your Color Wheel (artistic or standard) choose the kind of color scheme you're interested in (from singular to inverted golden analogous complementary; there are 31 choices on the menu.)

Then get exhaustive info on each color in that scheme using the i button, including the 8 closest web safe colors, complete with hexadecimal code, so you can skew it the way you want, the closest CMYK color, and RGB info, including the Color Space used. If you choose Device RGB, you get lots more, including the hexadecimal, that you can copy to your clipboard automatically.

Besides all this, you can pick shades, for saturation or brightness in 5% increments, you can draw the color wheel or not, or choose the background color for it, you can even automatically make Palette Lists, and see them right away.

The documentation is well written and very complete, there's a forum, and best of all, it's Shareware, and costs less than $20 US.

You can get a free trial, or go on to buy it. That's Painter's Picker 2.2 from Old Jewel Software.

Shades, from Chromatic Bytes, concentrates on close relatives of a color. You can choose how many swatches you see, either 9, in a 3x3 grid, or 25, 49, or 81 different shades at once.

You can also choose whether to vary the swatches by Brightness and Saturation, Hue and Brightness, or Hue and Saturation. And, of course, you can choose the step size for each of the parameters.

HSB sliders let you change the color of the central square, that all the others depend on.

Click on one of the Shades, and it fills the large color bar at the top of the pane; but it doesn't change the central square, so you can see a large swatch without disturbing your shades. If you want to see an even bigger sample, right click on any swatch, and the entire grid area will fill with that color for as long as you hold the mouse button down. Click on the large swatch bar at the top, and the central square changes to that color. (Which, of course, changes all the rest as well.)

Drag from the shades into the Swatches, to save colors.

Hover over a shade swatch to see info about that color.

There's Help and Support, and you can automatically check for updates.

You can get a free, unrestricted 30 day trial copy, or buy it for $18. That's Shades from Chromatic Bytes

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, recognizing HTML color names (such as "red", "orange", "blue" etc.,) generating calibrated colors, and automatically checking for updates.

Pick your color, click the Copy to Clipboard button, and paste it into your code (completely with the hash mark.) It doesn't get easier than this.

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. That's Hex Color Picker from waffle software.

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 Palette 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. That's Mondrianum 2 from Lithoglyph.

If you really need a full service color management solution, there's Tangerine. It both a color picker extension, as shown, and a free standing program.

This one includes Actions for many popular applications, lets you drag a color chip into code (and generates the correct code for that programming language, 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.) That's Tangerine.

Finally, there's Developer Picker, which is meant for Developers, and not really for general use.

It's a no frills way to get the numbers from an image as quickly and painlessly as possible. You just choose your style (NSColor, CGColorRef, UIColor, HTML, or CSS) grab your color, and click the button to copy the numbers, or copy the numbers along with a declaration. Then you paste them in, and go on with your work.

You can see the swatch at the top, and the color values at the bottom, to check against, and that's about all there is to it.

This one is a freebie, written by Wade Cosgrove, with an icon by Neven Mrgan (courtesy of Panic, Inc.) It's hosted at the Panic website (the people who brought you Transmit, Coda, CandyBar, and other fine products) but appears to be all Wade's. That's Developer Color Picker.

Oh, okay! It's just a one liner, after all. Honestly, anyone can do this one.

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.

And that's all there is to it!