Hopeless Geek

So we’re in about the third year of Mac OS X now and there’s one thing I’ve not done in this entire time: actually looked at that “other” standard palette: the color palette. I’ve used it to pick colors for various things and gone through the tabs to use the different methods, but I’ve not actually looked at the panel (like I did the font panel) since it came out. Big mistake. Huge. This thing is awesome.

!(right)http://www.codepoetry.net/myimages/color-big-palette-thumb.jpg 205×253!

The first mistake I made was that I never made it bigger. This changes everything. Much like the Font panel, all the features of the Color panel become both easier to use and more apparent when it’s made larger, especially when using the color wheel. When you make the color wheel this big you can more easily see the grades of color between the primaries and, thus, find the color you really want. (Because, of course, the more pixels the color wheel shows on-screen literally means the more choices you have to pick from.)

Hardly the only way to find a color, however. The next tab holds another secret-in-plain-view that I seem to have only caught when staring straight at it looking for cool things to do. When handling grays it’s very common to just want to use one of the “quarter grays” such as 25% or 75% black. As such, there they are in plain view, right under the control. Five little boxes with 100%, 75%, 50%, 25%, and 0% black waiting for me to click on them.

!(right)http://www.codepoetry.net/myimages/color-grayscale.png 354×79!

Sometimes, though, it’s hard to find a color in the color wheel that exactly matches another color you’re staring right at in another graphic (say, to match the color of text to the color of a jacket someone is wearing) so there’s two more ways to snag a color.

!(left)http://www.codepoetry.net/myimages/color-picker.jpg 55×68!

The first is the very easy-to-use picker tool. Click on it and you’ll get a magnifying glass to drag around the screen and find the exact pixel that contains the color you want. It’s very handy for when you pass a web page or see a graphic and notice a color you’d like to use on something in the future (with sixteen million available colors (not including alpha), discovery is often the hardest part).

!(right)http://www.codepoetry.net/myimages/color-custom-image-1.jpg 177×557!

The second way of capturing a color is the Palette view. By default, there’s a spectrum image loaded into it that covers all colors except for saturation differences (3D graphs tend not to go well into 2D spaces). Well, if you’re matching colors, drop your reference image in there or add it via the menu at the bottom. It takes images from the clipboard or via a graphic file on disk (standard system-importable files work (PDF, JPEG, GIF, PNG, etc.)).

!http://www.codepoetry.net/myimages/color-custom-image-2-thumb.jpg 203×233!

If dragging, keep the program with the color palette frontmost, keep a Finder window visible, and in one motion drag a file from the exposed Finder window to the Palette view. The Finder will not activate.

Of course, finding the right color is one thing, but remembering it is a whole new game. Web designers tend to get rather good at remembering the CSS color code for their most common colors (#eee is my light gray and when I want a nice blue #69C usually works well; you can darken it to #369 for shading and such). Remembering the exact place to click in a color wheel or the exact slider positions or values in the next pane, well, that’s more difficult. I would guess that many, if not most people have noticed the color swatches on the bottom of the window by now and have filled in several of them, noting their utility, especially since they are available in all Mac OS X programs. This is a very handy way of keeping frequently-used colors available and just clicking on them to select them.

!http://www.codepoetry.net/myimages/color-swatches-1.png 409×56!

Of course over time one can easily fill out the swatch space that’s allotted by default, so did you notice the (misused) split-view “button” below it?

!http://www.codepoetry.net/myimages/color-swatches-2.png 410×143!

!(right)http://www.codepoetry.net/myimages/color-list-menu-new.png 115×164!

If you think in terms of colors, this is an excellent solution. For people like me, however, who think in terms of names, this is sub-optimal. What would really be nice is to be able to name my colors. Surely you’ve seen the color lists in the color palette that give you some standard colors and the web colors and (for developers) the system widget colors, but you can also make your own in that very same palette. After creating your list simply find a color you like and select it (such that the large “selected” swatch at the top shows it) and then find your list and go to the bottom “Color” menu and pick “New” to add it. There’s also a “Rename” in there in the case that “ListName-1” is not a memorable color name, which I don’t expect it will be.

!(right)http://www.codepoetry.net/myimages/color-list.png 108×60!

Color lists and custom palettes are stored in your Library folder in a “Colors” sub-folder. So if you make a long list of useful colors, or colors specific to a project or the like, send the file to someone and they can install it and be right where you are. If the person you’re sending a color list to isn’t keen on editing things in the Library folder, have the person choose “Open…” from the list menu and pick the file you sent. The Color palette will automagically copy and add the list to itself.

!(right)http://www.codepoetry.net/myimages/color-list-search.png 227×228!

Over time, however, you’ll have added dozens, if not hundreds of colors to your list. If you decide not to break out a second list there’s still a solution for handling it: search. Right next to the “Color” menu is a search field that will do an as-you-type search of your color list. Very handy, indeed.

More quick tips:

• Color wells are droppable. If you have several wells on-screen and want to assign colors quickly, you don’t have to click on each to “attach” the Color palette. Find the color and drag from the “selected” swatch to the color well.
• Text is droppable as well. Select some text and drop a color on it.
• Once you’ve selected text or clicked on a color well, you’re “attached” to it so start clicking and dragging things around in the palette to see the changes happen live.
• The bottom storage swatches are like hundreds of color clipboards because color settings persist from application to application. Find the color you want in your graphics program, drag it to a swatch, and then go to your design program and use it as a color.
• Get in the habit of capturing every color you like into a swatch or list. When the time comes to have “good” colors available you’ll have a long list of eye-friendly ones.
• Align colors that go well together in the swatch grid’s columns so that you have matching sets for when inspiration hits. Using columns rather than rows lets you store more sets.
• Put a color palette file in /Library/Colors/ or /Network/Library/Colors/ and make it available to more than just yourself. Great for project sets.

Behold, the power of Command-Shift-C!

!(right)http://www.codepoetry.net/myimages/color-excolor.png 132×46!
From the comments, exColor shows the hex values for the color in its color well, for the web designers that want to use all this fun on their sites. Mmmm.

And, yes indeedy-do, there’s a full hexadecimal color picker plugin for the Color panel. Sweet.

Average: Select ratingCancel ratingPoorOkayGoodGreatAwesome