Video Transcript
Hi, this is Gary with MacMost.com. On this episode let's take a look at the digital color meter utility on your Mac.
The digital color meter is a little app that comes with your Mac. You'll find it in your Applications folder under Utilities, and there it is, or you can just search for it, like I do, with Spotlight.
When you run it you just get this little window here. It really doesn't seem to do too much. It just will show you what color is underneath the cursor.
So, for instance, let's bring up Safari here. Say you are looking at a webpage, like MacMost page here. You want to use up color. Say you are working in PhotoShop or some other imaging tool and you want to grab a color that you see, like say this red that is being used here on this text, and you want to find out exactly what color that is.
You bring up the Digital Color Meter. Notice that whatever the cursor is over I see in an enlarged version of it in Digital Color Meter. So I go over here and I can look at this letter right there. I can see exactly what pixel I'm looking at and it gives me the values. R, G, B, red, green and blue values for that specific pixel.
Now that is only somewhat useful because most people don't use R, G, B values for things. I find that if you go into View and change Display Values to hexadecimal then you get R, G, B but you get these hexadecimal values which you will recognize if you do any kind of web development or work in PhotoShop or anything you can see the color here would be 94 2F 35 for instance. That is a lot more useful than seeing the colors as numbers.
You can also change the aperture size. So instead of wanting to get to say a single pixel you can change it and grab a group of pixels and see what kind the average color is between that group. You can see the big swatch here, this part, actually gives you the single color that matches everything that is there. So you can kind of get a general idea of like all these together, to the eye, look like this one individual color here. You can adjust it to a pretty large size as well or you can go back down to a single pixel.
If you find a color you like you don't have to just rely on remembering it or writing it down. There are two ways to copy it. If you look here you can do Copy Color as Text or Copy Color as Image. Now you don't ever want to use the menu here because your cursor is going to move. You want to remember the shortcuts; Shift Command C and Option Command C.
So let's try Shift Command C, grabbing this red here. Shift, Command, and C will copy it. Now I'm going to go over to TextEdit here and I'm going to paste. You can see it pasted it there. Now it is pasting this as a hexadecimal because I changed the display to hexadecimal. If I still had it set to the decimal values then you would get three numbers here instead. This is far more useful and I can paste this directly into a lot of image editing programs that allow me to change the color of the fill or the line or whatever. Very useful for that.
Let's try the other one. Let's try using the Option, Command, and C or right here Copy Color as Image. We'll do that and let's see what we get. Now I'm going to get an image here so I can paste that into TextEdit but it is not as useful. I'm going to go into Pixelmator here and I'm going to paste. You can see that it pastes this rectangle here that is a solid color rectangle. So this can also be useful for a variety of different things. Stretching this over a background or just being able to grab it using the Eyedropper tool in different image editing apps.
There are a lot of other cool options. For instance the ability to Lock Position and also view a bunch of different things like Lock X and Y. So I can lock the position. Let's try that. If I get a color I want I can do Command L and now you can see I move and it doesn't move with me. So it is a good way to capture that. Then I can just do Command L and it unlocks it. So you can capture that.
Or I can do Command X and now I can move up and down on a row here but I won't be able to move left or right. I can switch that to Command Y and it is locking both. I can turn off Command X and now I can move this way and turn off Command Y and now I can move around like that.
You also have the ability to look at things in a slightly different color parameters here. I'm not an artist so I don't really use these. I stick with the native values to find out what the color really is set to by the code or in the image itself.
One last little thing I want to point out is this Show Mouse Location function. It has nothing to do with color but it gives you the X and Y coordinates of the location of the mouse. This is useful for developers for a lot of different reasons. To be able to exactly locate something on the screen and its position there.
The digital color meter is a little app that comes with your Mac. You'll find it in your Applications folder under Utilities, and there it is, or you can just search for it, like I do, with Spotlight.
When you run it you just get this little window here. It really doesn't seem to do too much. It just will show you what color is underneath the cursor.
So, for instance, let's bring up Safari here. Say you are looking at a webpage, like MacMost page here. You want to use up color. Say you are working in PhotoShop or some other imaging tool and you want to grab a color that you see, like say this red that is being used here on this text, and you want to find out exactly what color that is.
You bring up the Digital Color Meter. Notice that whatever the cursor is over I see in an enlarged version of it in Digital Color Meter. So I go over here and I can look at this letter right there. I can see exactly what pixel I'm looking at and it gives me the values. R, G, B, red, green and blue values for that specific pixel.
Now that is only somewhat useful because most people don't use R, G, B values for things. I find that if you go into View and change Display Values to hexadecimal then you get R, G, B but you get these hexadecimal values which you will recognize if you do any kind of web development or work in PhotoShop or anything you can see the color here would be 94 2F 35 for instance. That is a lot more useful than seeing the colors as numbers.
You can also change the aperture size. So instead of wanting to get to say a single pixel you can change it and grab a group of pixels and see what kind the average color is between that group. You can see the big swatch here, this part, actually gives you the single color that matches everything that is there. So you can kind of get a general idea of like all these together, to the eye, look like this one individual color here. You can adjust it to a pretty large size as well or you can go back down to a single pixel.
If you find a color you like you don't have to just rely on remembering it or writing it down. There are two ways to copy it. If you look here you can do Copy Color as Text or Copy Color as Image. Now you don't ever want to use the menu here because your cursor is going to move. You want to remember the shortcuts; Shift Command C and Option Command C.
So let's try Shift Command C, grabbing this red here. Shift, Command, and C will copy it. Now I'm going to go over to TextEdit here and I'm going to paste. You can see it pasted it there. Now it is pasting this as a hexadecimal because I changed the display to hexadecimal. If I still had it set to the decimal values then you would get three numbers here instead. This is far more useful and I can paste this directly into a lot of image editing programs that allow me to change the color of the fill or the line or whatever. Very useful for that.
Let's try the other one. Let's try using the Option, Command, and C or right here Copy Color as Image. We'll do that and let's see what we get. Now I'm going to get an image here so I can paste that into TextEdit but it is not as useful. I'm going to go into Pixelmator here and I'm going to paste. You can see that it pastes this rectangle here that is a solid color rectangle. So this can also be useful for a variety of different things. Stretching this over a background or just being able to grab it using the Eyedropper tool in different image editing apps.
There are a lot of other cool options. For instance the ability to Lock Position and also view a bunch of different things like Lock X and Y. So I can lock the position. Let's try that. If I get a color I want I can do Command L and now you can see I move and it doesn't move with me. So it is a good way to capture that. Then I can just do Command L and it unlocks it. So you can capture that.
Or I can do Command X and now I can move up and down on a row here but I won't be able to move left or right. I can switch that to Command Y and it is locking both. I can turn off Command X and now I can move this way and turn off Command Y and now I can move around like that.
You also have the ability to look at things in a slightly different color parameters here. I'm not an artist so I don't really use these. I stick with the native values to find out what the color really is set to by the code or in the image itself.
One last little thing I want to point out is this Show Mouse Location function. It has nothing to do with color but it gives you the X and Y coordinates of the location of the mouse. This is useful for developers for a lot of different reasons. To be able to exactly locate something on the screen and its position there.
So it turns out that you CAN teach an old dog new tricks. I’ve been a Mac user for more than 8 years, have had a need for something like this many times, but didn’t know it existed until today. Thanks!
Me too!!
Me three!
This is such a good tool for web dev too. hex colours are so useful
I looked at it in the past but it seemed beyond my needs and understanding. Didn’t know about Hex codes at the time. Now I do. What a brilliant little tool. arrigato Gary-san.
What a great bit off information, I’m a 70 year old artist and still learning new tricks!!! Thanks Gary