There are many applications out there to help you sample, pick, and convert colors to hex code numbers for use in HTML and CSS (for example, white is
). In fact, earlier this year we covered
Hex Color Picker 1.4, which extends your Mac’s built-in Color Picker to provide just such functionality. With that plug-in, you can convert any color visible in the Color Picker into a hex number. But what if you’re trying to match a color on your screen so you can duplicate that exact shade on a Web site?
; payment requested) is a nifty little utility that can help. It’s designed to do one thing—sample a color on your screen and automatically copy that color’s hex code to the Clipboard—and it does that thing very well.
Launch Pipette for the first time, and you are presented with a small window that contains three elements: an eyedropper icon, a text field, and a white, square canvas. Click on the eyedropper icon and drag the resulting cursor to any point visible on your screen. Let go of the mouse button, and the text field will automatically display the hex number representing the color of the specific pixel beneath the cursor. That hex code is also copied to the Clipboard for pasting elsewhere.
You know you’re sampling the correct pixel because the miniature canvas in the Pipette window displays a magnification of the area around the pixel you’ve chosen. Didn’t quite get the right pixel? Click the surrounding pixels in the magnified canvas area to choose the right one.
Your Mac also has another built-in utility to help with color picking, the little-known DigitalColor Meter (in /Applications/Utilities), but it doesn’t work as simply or easily as Pipette’s petite window. For example, DigitalColor Meter requires you to hold down three keys while using your mouse just to sample a color. With Pipette, you simply click, drag, and let go—you’re ready to paste the hex code into the application of your choice. Pipette’s window is also easier to use—and not lose—under a crowd of other windows.
If you have more-sophisticated color-matching needs, you’ll be better off with DigitalColor Meter or another more-advanced utility. But if you just need to quickly match onscreen colors in the course of your Web design work, Pipette keeps it simple.