I need to get the RGB for a pixel that is in an image. Under Windows this is easy but is there a way to do this on Mac OS X?
17 Answers
There is a utility (in Applications/Utilities) called Digital Color Meter, which shows the color code of whatever you're hovering at the moment. It's a bit more lightweight than Preview. There are also shortcuts for copying the color value as a string (⇧+⌘+C) or image (⌥+⌘+C).
-
4
-
1thank you very much. this is a really very nice tool than ms paint! i bought my first mac and sold windows only 2 weeks ago. and i miss windows for windows was easy to use for me. i hope there are a lot of better things which i dont know yet on mac.– js_Commented Jun 29, 2011 at 16:39
-
can i modify(for example, make it brighter or more grayish) picked color with Digital Color Meter?– js_Commented Jun 29, 2011 at 17:40
-
@js_ FYI, when you mention "make it brighter" or "more grayish" you want to use a HSL color model. Here's an online tool: hslpicker.com where you can type in the rgb values from your Digital Color Meter and then adjust Saturation ("greyness") and lightness.– ghoppeCommented Jun 29, 2011 at 22:33
-
5If you're looking for HEX codes for web work e.g.
#e5e5e5
, it can be found underView
->Display Values
in the Digital Color Meter.– psclCommented May 25, 2018 at 7:39
I usually use DigitalColor Meter (in Utilities). As long as it's open, it gives you the RGB values of the pixel below your mouse cursor.
-
3The only drawback is that the new Lion Digital Color Meter won't give you hex values. The one in Snow Leopard did.– user9290Commented Sep 19, 2011 at 19:41
-
15@Wheat you can change it to show hex under
View
→Show values as
→hexadecimal
Commented Nov 10, 2011 at 13:12 -
1@koiyu Yes, but you can't set that as the default AFAIK. Really bugs me! Commented Jul 8, 2012 at 22:15
-
1Anyone know what the difference is between "native" values and "generic" RGB? They are different. I noticed that if I use native colors, they look different on the iOS simulator. Generic seems to be closer.– n13Commented Jul 30, 2015 at 12:42
-
@user9290 It's just hidden now, not gone. See how to get hex values here: apple.stackexchange.com/a/30834/123184 Commented Oct 26, 2018 at 8:33
The Digital Color Meter in /Applications/Utilities/ is the best choice.
Color panel - picker
This picker is almost everywhere if you look carefully.
Look closely at font controls and you will likely see wording like Format -> Font -> Show Colors
, or Format -> Show colors
. (The shortcut is usually ⇧⌘C). You will get the small color panel shown above, where you can click the "magnifying lens" and you can grab the color from anywhere in the screen. for example: TextEdit, Pages, Mail etc... This is a clipboard to save colors, but doesn't report hex values, CIE values or the ITU-R Y'PbPr/Y'CbCr values for the chosen color.
Everywhere when you can show the font panel (usually ⌘T), you can click the "Text color" icon in the font panel and you will get again the "Color panel" (with picker).
You can for example when entering text into textbox here, right click for bring up contextual menu, and go to "Font -> Show colors" directly from the Safari... This works in every application where you can change fonts.
In every application where you can change the color for anything with color field, you can click the border of "color field" and you will get the color panel again. For example Terminal.app -> Preferences -> Settings (color fields for text and Cursor colors)
You can download a some cool color-helper dasboard widgets, like: colourmod or ColorTheory.
You can download a plugin into color panel for hexadecimal color values.
If you find yourself needing the DCM often, you might look at using Automator.app to create a global "Service" that launches the Digital Color Meter.app. Now you are a few clicks away and can additionally bind this new service to a global hotkey in the System Preferences. The result: running DCM from anywhere, anytime, on a custom key command.
Here are several more things - but lastly: you can also run Windows in VirualBox and use the MsPaint method. /joking/ - be cool. :) :)
-
thank you for your answer and edit. i wanna pick a color from screen, modify it, and know its rgb value or color code. the wigets looks nice. but first i wanna try the combination of DCM and color panel to do that. but when i open DCM window, the color panel window disappear. so i cant know rgb value of the color which i picked and modified with color panel. what should i do? by the way, i dont know how to use automator.– js_Commented Jun 29, 2011 at 17:34
-
And yet neither of these actually work; the colors they sample are too dark. If I sample a color, change the thing to be the report color, and sample it again, the color changes. No filters or anything on the "image" -- I wrote a custom app which literally does nothing but paint the window with the exact RGB value specified. And the change isn't small, either; it's noticeably darker.– anonCommented Nov 21, 2018 at 18:06
-
@NicHartley Actually, all of the above works. If you got changed colors between two sampling, your display isn't calibrated or has the default color profile. Try Step-by-step: 1.) System preferences -> Displays -> Color(TAB), 2.) Choose: sRGB iEC61... 3.) open Textedit set some text to specified color let say
250,150,50
(with sliders) 4.) sample the color and you should get again250,150,50
. The same applies for theDigital Color Meter
app. Set the popup todisplay in sRGB
- and it will show also the same numbers. So, both of the above works, just need use the same color profile. :)– clt60Commented Nov 22, 2018 at 22:55 -
I picked a color. I set a box to be that color. I sampled the box. I set the box to be that precise (slightly darker) color. I sampled the box again, and got a third, still darker, color. I even tried with a few builtin, Apple-brand apps, in case they're doing their toxic vendor lock-in stuff again, and I got the exact same results. All on the default, built-in display that came attached to the Macbook. The same thing happened with both methods. If you call that "working", sure, I guess it works.– anonCommented Nov 22, 2018 at 23:11
-
@NicHartley Honestly, do not understand fully your comment, but as you can see in the attached screenshot, the sampled colors has the same rgb values set manually (250,150,50) and later in the samplings. Could you write some "how to reproduce" the "don't work"? (Like as I added the correct way of setting for sampling). Simply, you can't mix together different color profiles. So, setting some RGB values (let say) in the adobe profile must result an different color (different RGB values) in the sRGB profile. See my previous comment and the screenshot - how to set the sRGB for your display.– clt60Commented Nov 25, 2018 at 18:46
Use the built-in app /Applications/Utilities/DigitalColor Meter
. Place your mouse pointer over the pixel you want the color of, and DigitalColor Meter will show the RGB values.
You can use macOS' built-in Digital Color Meter, however there is a very important caveat:
If you simply use the default settings naively, the values it displays are probably not the values you are looking for. (This can be an issue for most color dropper tools).
By default, the Digital Color Meter displays the "Native Values", which sounds like the original RGB values, but it's not. "Native Values" actually means the values after they've been converted to the Color Profile for the current display. (The Color Profile in use is displayed at the bottom of the Digital Color Meter window.) This is usually going to be a specific Color Profile for your display. For example, my Macbook Pro is set to the "Color LCD" profile.
Solution
To get the exact original RGB values before conversion, you need to temporarily change your System Preferences > Displays > Color > Display Profile
to sRGB
(which is the most common Color Space, so use sRGB
unless you know otherwise). Then the Digital Color Meter's Native Values will give you the exact original RGB values that you are looking for.
Another alternative method for web pages is to use the browser inspector and look for the css color value directly.
Details
You can easily test this for yourself. Go to a web page that lists CSS web colors and their RGB values. Open the Digital Color Meter and set it to Native Values. Scan down the list of colors and compare the Digital Color Meter values with the original values. Probably most of them will not match exactly. (If they all match perfectly, then you probably have set your display to use the sRGB profile).
What's happening is that the dropper can only capture the value after it's been converted to the display's Color Profile.
You can change Digital Color Meter to "Display in sRGB", but that will not always give you the exact original values. That is because it is double converting from original sRGB to display's Color Profile, then back to sRGB. Sometimes there will be rounding error and it will be off by a tiny bit.
The only way to guarantee the exact original is to temporarily change your display to sRGB, because then there will be no conversion at all.
For further reading, here is an excellent article.
Example
Here is an example using DCM on ForestGreen rgb(34, 139, 34)
. In the first DCM screenshot, you can see that the values are all off, because it is showing the "Native Values" for "Color LCD" profile. In the second DCM screenshot, I've changed it to "Display in sRGB", but one of the values is still off due to double conversion rounding error. In the third DCM screenshot, notice that I've changed my Display to use sRGB color space. Finally it gives the exact original values.
The second row shows what happens if I naively took the wrong rgb(40, 138, 41)
values and used them. Although you can't really see the difference through human eyes, it's off. And if you repeated the process, you would keep drifting further off.
-
Re "If they all match perfectly, then you probably have set your display to use the sRGB profile"; nope they all match but mine is showing Color LCD too i.sstatic.net/LCWc0.png (macbook original)– PacerierCommented May 3, 2021 at 13:25
-
On Firefox. Though on Chrome it is showing 40, 138, 42 instead of 34, 139, 34.– PacerierCommented May 3, 2021 at 13:32
I prefer RCWebColorPicker extiesion, check it here: http://www.rubicode.com/Software/RCWebColorPicker/
-
Benefits: easy to copy/paste in or out, smart enough to handle the 3-char form (e.g. turning 39C into the above 3399CC), and accepts lower or upper case. I've been using it for ages, and it still works fine in Mavericks. Commented Dec 22, 2014 at 23:46
This has now gone out of business first renamed to Hues then out of business http://giantcomet.com/hues/
I quite like the completely-free app Spot Color. It uses the Mac's built-in color pickers and allows you to grab the color and then use the various sliders and color models to modify it, as you asked about in your followup comment.
Since it uses the Mac's color pickers it means you can also use any of the various additional color pickers out on the web, such as:
Just Color Picker
It is a free app in the app store.
https://itunes.apple.com/pl/app/just-color-picker/id886547068?l=pl&mt=12
It does the job for web developers! Just press "Alt + X" to freeze the value under your mouse. By default, it picks the value as hex decimal code, like #F7F8F9 for instance.
Very simple and straight to the point. Love it.
ColorSnapper is the best. $4.99 on the Mac App Store.
Just take a look at the demo video and you'll see what I mean.
Try Just Color Picker from annystudio.com http://annystudio.com/software/colorpicker/
Great app! I have it on both Windows and Mac - works like a charm..
If you need a lighter option to DigitalColor Meter you can check out Point&Paste. It's a free open-source tool that allows you to just place the cursor on the color you want and copy it to the clipboard with a key-binding of your choice.
I use this online color picker: https://pickcoloronline.com
It's easy to use and I don't have to download any external software. However one disadvantage is that it's not working with Safari. It only works in Chrome.
-
2I rather think having to download Chrome to make it work classes as having to use 3rd party software. You have contradicted yourself. Commented Apr 20, 2023 at 21:40
-
I understand your thoughts. However for me and many other users, Chrome is already the default browser of my choice. In this case I don't have to download anything and this is what I love about the tool. Commented Apr 23, 2023 at 9:25
My current go to tool for this is xScope App by The Iconfactory
It's better for my needs than the built in tool or my previous choice for augmenting the Apple native solution, Digital Color Picker plug in to extend the Mac OS X color palette.
Specifically, xScope extends to iPadOS, iOS, WatchOS and has many many other features I need in addition to peeping the color values (like looking at a digital design for various colorblindness and accessibility situations). It's used by photographers and designers I respect and has served me well for many years. No affiliation other than a happy paying customer.
-
-
It’s unsupported, so it may not be better than meter. What is meter? @Pacerier– bmike ♦Commented May 3, 2021 at 13:39
-
-
I've added xScope app which goes far past the Apple utility @Pacerier Thanks so much for pointing out the answer in need of better explanation and options.– bmike ♦Commented Apr 20, 2023 at 21:25
I use GraphicConverter. It has an optional (turns on or off in settings) RGB readout in the window frame that follows the cursor. It also has a tool represented by an eye-dropper that copies the color value into the foreground color setting. The eye-dropper, however, averages the colors of the pixels around the point clicked. But the radius can be adjusted from ten pixels to one (and one would mean just the pixel clicked on).
GraphicConverter can be bought from the app store, but has some limitations. You can avoid those limitations by getting it directly from the developer. But you can also convert to the full version if you got it from Apple.
-
Could you add a link to the download page or something similar?– ThinkrCommented Apr 21, 2023 at 5:49
Here is an HTML document with the named colors...
-
I find the Wikipedia page on Web Colors much more useful for obtaining CSS/X11 color names than this answer's linked page. Also useful is this W3Schools.com page. Commented Jul 25, 2014 at 17:22
There is an App called Preview
pre-installed where you can get the colors from.
-
1thank you for your information but i couldnt find the way to get the colors with Preview. which command on menu should i execute?– js_Commented Jun 29, 2011 at 16:13
-
Preview offers a very roundabout way to copy a color, but it still doesn't show hex values. The best it can do without a plug in is turn on annotate, make an annotation on any file that's open in the document, then choose color, then click on the magnifying glass. It like many programs call the API for a color picker / palette manager.– bmike ♦Commented Jun 29, 2011 at 16:38
-