Everyone has used the OS X Color Picker. Whenever you’re working on something and need to choose a colour, this is what pops up. “Not this thing again!” A quick glance through the color picker and you wish you had more control. Well, its there, but perhaps you don’t realise it.
An introduction to the Color Picker
The Color Picker is a very versatile tool that uses up very little real estate and resources and is highly extendible using plugins. Using just the default Color Picker, I shall explore the various options available and how to juice them for what they’re worth.
As you can see, the tool appears to be very plain and useless. Going through the various tabs isn’t going to yield much either. However, the very first tab itself is fully functional and more than enough for most users.
The first thing you want to do is resize the picker. Making the wheel bigger not only lets you eyeball those colors better but will allow the mouse to select finer variations in the gradient. It’s just better.
Picking colours
Selecting colours is simple, but way different from Photoshop. In the picker, we select the Hue and Saturation in the wheel, while adjusting the tint in the vertical slider on the right. If you remember correctly, we select the saturation and brightness in the box in Photoshop, while sliding up different hues in the vertical slider.
Now, what if you want to pick a colour right from your desktop? One would usually invoke the Digital Color Meter or some other colour picking tool. But it’s right there in the Color Picker! Just click the magnifying glass button and you can then scout for colours anywhere on your workspace.
You can, of course, use the colour sliders in the next tab to choose your colours if you so choose. Another interesting way is to use the Image Palettes. You could have your color scheme made into a jpeg, which just needs to be dropped into the default “Spectrum”. Resize the colour palette to magnify your images. The best part is that those images stay there for good, so you only have to do this once.
Organising your colours
Next, you want to increase the swatches lined up at the bottom. Supporting up to a maximum of 160 swatches, these are really useful. Since the same Color Picker is available across all applications, the swatches are also accessible across applications. For instance, suppose you picked up a colour in Pages; you can immediately switch to Coda and use that same colour in your web design. I would recommend you line up your colours in vertical columns with the lightest shade up. To add a colour to the swatch, drag the large rectangle colour bar at the top to one of the swatches.
If we move to the third tab “Color Palettes”, you can either choose from the different palettes offered by default, or create one of your own. Adding colours involves either dragging them in from your swatches or manually selecting them in your Color Wheel and then dragging the colour from the big rectangle bar to the palette. Unfortunately, the picker names your colours in a boring ‘Unnamed #”, which needs to be manually renamed. Something like Indesign’s automatic way of adding HSB values to the color name would have been helpful.
However, after you do name the colours, it can be very helpful if you find the swatches too difficult to differentiate. For instance, you might want to store the colours of your company logo in the palette, with names assigned to each one. Doing this once will eliminate any hassles later on and ensure that you always use just that right shade.
Using your precious colours
The most obvious way is to select the text or object and then apply the colour to it. It works perfectly and as it should. However, remember that you are using a Mac, and on the Mac we take drag-and-drop to the extreme!
If it is a text box or a bunch of shapes you are dealing with, simply drag and drop your colours on those objects. This works on text boxes, pie charts, strokes, and fills, and pretty much anything else that can be coloured. Paragraph or free flowing text, however, needs to be selected before colours can be dropped on them.
And, lest we forget, there’s an opacity slider on most of those palettes.
Hexadecimal colour codes
This is one of the biggest deficiencies in the Color Palette. Crucial for web development, Hex digits are generally preferred over RGB values because they are easy to remember (at least a few important ones) and can produce quicker, accurate results.
Luckily, Color Picker is extensible using plugins. The most important one of the lot is the HexColorPicker plugin.
Download the plugin and then create a “ColorPickers” folder in your Library if you haven’t already. Dump the colorpicker file in there and restart all applications that would use the Color Picker.
Using the hex palette you can enter hex values and save them in your palette and even copy those values to the clipboard. It also recognises HTML colour names.
Other interesting plugins
There are a lot of other Color Picker plugins on the web. Some are free and others are paid. Most of them offer a free trial, so you can check ’em out before you go for it.
Mondrianum. If you’ve read this article so far, you must have been to Adobe’s Kuler website where you can choose from different community uploaded colour schemes. How cool would it be to have those colour schemes right in your applications! The data is downloaded live from the website onto your Color Picker and can be saved as a swatch or palette for later use. What’s more, it’s displayed using the slick Cover Flow interface! (Free)
Painters Picker. If you do anything painting related, this plugin will come in handy. It has some of the usual complimentary colours and some other complex calculations. ($25)
A Better Color Picker. The Shades Color Picker adds an additional pane to the standard Apple Color Picker. It is designed to help you choose colours by showing you grids of related colours. Shades uses Hue - Saturation - Brightness (HSB) colour coordinates which many people find more intuitive than Red - Green - Blue (RGB) colour coordinates. To use Shades, you choose a center colour, a step size, and a colour coordinate (one of H, S, or B) to hold constant. Shades then draws a grid of related colours. ($18).
Saving or sharing your colours
Note that within the Color Palette tab of the picker, you can load new colour sets but not save them. The simplest way is to copy over the colour set files from your ~/Library/Color folder. You can also delete any images you might have added to the Image Palette (which you can’t delete from there itself).
Launching the picker as its own App
Not all applications support the Color Picker. How, then, do you access your precious swatches? Well, it turns out (thanks to a tip on Mac OS X Hints) that you can run a simple AppleScript to launch the Picker right from your Dock.
Open up your Script Editor (Applications > Utilities > Script Editor), and type in
choose color
Save it as an Application (you can set an icon to it if you like and keep it wherever you would otherwise keep your Apps (hint: your Applications folder). Now you can pick colours from anywhere and use them directly as hex values in any app.
For your sake, I’ve wrapped the app in a zip along with a fancy icon so you don’t have to do any of the heavy lifting.
One more thing…
In Photoshop, the very first option in the preferences is the colour palette. Choosing Apple will bring up the Color Picker right in Photoshop if you want. This functionality is not available for Illustrator and InDesign which use a different system for colours.
