Easier Colors

Thibaut Sailly shared some interesting thoughts today on the value of using CSS preprocessors like LESS and SASS. One item that stuck out to me was his comment about using the system-wide color picker on OS X:

[...] Referencing colors by "blueGreen_4" is more efficient than "fourth blue from the right in the system palette I set you up last week".

This reminded me that many UX designers, visual designers, and developers I've worked with are unaware of the color palettes tab in the system color picker. Using it can save a lot of time if you work solo and a lot of headaches if you work in a team.

Most people are familiar with the default view of the color picker. There is a color wheel. Beneath it is an area for saving color swatches for re-use.

Screen Shot 2012-10-08 at 12.59.55 PM.png

However, as Thibaut mentions, trying to pick out "the fourth blue from the right" in the swatches area at the bottom is difficult and tedious. One of the color picker's useful tricks is the ability to create palettes with named colors. These days, I spend most of my time here:

Screen Shot 2012-10-08 at 12.15.23 PM.png

Not only can you create your own palette and name the colors, but you can quickly switch between different palettes:

Screen Shot 2012-10-08 at 12.15.12 PM.png

Even better, you can send these palettes to other people. Create a new palette and you'll find it saved in ~/Library/Colors/. Send all the palettes you've created to your team and you'll never have to count those tiny swatches at the bottom of the color picker again.

Anyone needing detailed instructions on how to work with this part of the color picker should reference Robin Wood's instructions.