Essential Web Development Software: DigitalColor Meter

January 26, 2009 — 3 Comments

 

DigitalColor Meter is handy for sampling on-screen colour

DigitalColor Meter is handy for sampling on-screen colour

Installed with every Mac, DigitalColor Meter gives you accurate readings of on-screen colours: you can inspect individual pixels, and copy and paste RGB values. When used with Safari or Firefox and a great text editor, it’s a lightweight but powerful tool. Here’s an overview…

 

  • Find it in /Applications/Utilities/
  • For using with HTML and CSS,  set the colour type to “RGB as Hex Value, 8-bit”
  • Command+Shift+c to copy the current colour as text – perfect for pasting straight into a .css file, alternatively, click and drag from the swatch area to copy the current colour as text (switch this on in preferences first)
  • Command+Shift+h to hold the current colour
  • Set the magnification factor to maximum and the aperture size to minimum for pixel-perfect sampling. Handy for ‘borrowing’ font colours from other sites!
  • Reduce the magnification factor and increase the aperture size for getting an averaged colour – say, when you’re working with gradients or photos
  • When DigitalColor Meter is the active app, you can use the arrow keys to move the aperture in one-pixel increments
  • You can also save the current hovered area as a .tiff file, or copy it to the clipboard. 
  • Set the window to float and keep it in the bottom right of the screen, so it’s always there at a glance. 

One last point: on Tiger at least, if you switch users to a user who has DigitalColor Meter running it will crash. But that’s an annoyance at worst…

By Jay Docherty

Posts

3 responses to Essential Web Development Software: DigitalColor Meter

  1. well written post…thank you

  2. Does anyone have any suggestions on how to remove the quotes and extra spaces inserted into the copied color values? I would love to use the rgb value and paste it directly into an Adobe app, but the copied string values are too long. ex: (“AA AA AA”).

    What I would like is a simple (AAAAAA). No extra spaces or quotes. Any suggestions would be greatly appreciated.

  3. Hmm, that’s interesting… On my mac, running Tiger, Cmd Shift C copies a value like “#B2693A” to the clipboard. A click + drag from the swatch area copies a value like #B2693A (in other words, no quotes) to the clipboard.

    Given a value like “AA AA AA”, I’d do this: copy it to the clipboard, then run a shell script that filters it and pipes it back to the keyboard, then simply paste it where you want it. Here’s an example script:

    #!/bin/sh
    pbpaste | sed s/\”//g | sed s/\ //g | pbcopy

    …you need to save that as a shell script and make it executable, and you need to invoke it somehow; I’d suggest a keystroke utility for that, Quicksilver or something like that.

    And if the value was “#aaaaaa” like the ones I see, use a script that does this instead:

    #!/bin/sh
    pbpaste | sed s/\”//g | sed s/#//g | pbcopy

    …hope that helps. I’m going to set this up on my mac too as typing in those hex values is annoying!

Leave a Reply

Text formatting is available via select HTML.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

*