32

The problem: I set a color in Interface Builder, setting the channels RGB, then I do a screenshot of the working window, open it in Photoshop and check color by color picker, which I have set in Interface Builder. The result - the RGB values ​​are different from the ones I set.

Video: http://www.youtube.com/watch?v=ASLfnYHPbqM

Most abnormal begins with the 45th second, when I tried to use the color picker of the Interface Builder. It shows the RGB values ​​are different from those that I have in him the same and installed), but the values ​​of сolor picker IB coincide with the values ​​of color picker Photoshop.

Peter O.
  • 32,158
  • 14
  • 82
  • 96
user2020909
  • 321
  • 1
  • 4
  • 4
  • 3
    It's because of color profiling, and it's a pain in the ass. – Jørgen R Jan 29 '13 at 08:45
  • 1
    Read this http://stackoverflow.com/questions/10039641/ios-color-on-xcode-simulator-is-different-from-the-color-on-device – Jørgen R Jan 29 '13 at 08:47
  • @jurgemaister Color profiling is not pain in the ass. Color profiling is so that when you set a color on your system, the color looks the same on the screen of a user, which may have very different color characteristics than your screen. Most people give a damn what the exact RGB values are, they care a lot more, that every user sees the same color on his screen, regardless which RGB values are necessary to achieve that. If every user was using a calibrated screen, then indeed every user would see pretty much the same color on his screen, albeit RGB values must be different for that. – Mecki Jan 29 '13 at 10:41
  • 2
    @Mecki You are absolutely right. It's probably the *lack* of color profiling that's a pain in the ass. My point is that Xcode handles colors really badly, and it doesn't really help that OS X and iOS handles colors differently. If displaying colors correctly to the user is important, you can't really get around color profiles. But if your main concern is to make those f**king background colors match, it's just plain painful. – Jørgen R Jan 29 '13 at 10:46
  • @jurgemaister Mixing colors set problematically (and Interface Builder counts here, too) with colors from images you created in Photoshop is a problem, but the problem is Photoshop here, which insists on working in its own color spaces, instead of using the one of your monitor. On the same monitor, in the same color space, the same RGB values always look the same, so all that would be necessary to make a lot of tasks easier is a Photoshop, that works within the color space of your monitor, like all applications without own color space management do. – Mecki Jan 29 '13 at 11:16

2 Answers2

53

Apple thinks it is much more important that colors look the same everywhere than that colors have the same RGB values everywhere. See, the same RGB values will not look the same on different screens, because every screen has different display characteristics.

So when you take a screenshot, Apple does not just store a RGB value for every pixel in the image, they also store the display characteristics of your monitor inside the image file. What is that good for? If someone else opens your screenshot, the system can look at the monitor characteristics of the person who created it, compare those to the monitor characteristics of the monitor of the person that wants to watch it, and can then calculate how it must adopt the RGB values in the image so that the image looks the same on the current monitor. If it was just displaying the RGB values without doing any of this, the image colors may look wrong (in some cases only slightly, in some cases some more, and if the user has a very bad monitor, in some cases even radically wrong).

So the system send different RGB values to the graphics adapter, because RGB colors by themselves do not really describe a color. RGB values together with a monitor profile do describe a color and not the RGB values are important, the color is important. If I make something red, I want it to be the same shade of red on every monitor. I don't want it to be a darker red on one monitor, a lighter red on another monitor, and a red that is almost pink on a third monitor.

The problem with Photoshop is that it has its own build-in color correction mechanism. Photoshop usually works in sRGB (standard RGB color space) or Adobe RGB (an extended color space Adobe invented). When you load an image that is not within the desired color space, Photoshop will transform the color space of the image and every color space transform causes the RGB values to change. Please note that the images displayed within Photoshop are still color corrected according to your current monitor color characteristics, it's just the RGB values you manipulate within Photoshop that are in another color space and when stored back to file, Photoshop will either transform the values back or it will keep them and embed a new color profile into the image file.

The times where RGB alone has been used to describe colors are over for many years already. Today RGB is rather meaningless on its own, only when combined with a color profile it becomes really meaningful in describing an actual color.

If you want a screenshot without a real color profile embedded, do the following:

  1. Open "System Preferences"
  2. Go to "Displays"
  3. Go to "Color"
  4. Select "Generic RGB Profile"
  5. Make your screenshot
  6. Change your profile back

It may be necessary to quit Xcode first before you change the profile (and restart it after you changed it back), since I'm not sure if changing the profile has immediate effect. It certainly has immediate effect how things are displayed on your monitor, but if you want to choose a color in Xcode by selecting specific RGB values, I'm not sure if a profile change will have immediate effect here as well (you can give it a try without restarting, if that does not work, you must repeat it with restarting).

This may still cause incorrect colors in Photoshop though, since Photoshop may still convert the colors to sRGB or Adobe RGB. So instead of selecting "Generic RGB Profile", you may want to select the "sRGB" profile (depending on your OS X version, may also be named "sRGB IEC61966-2.1"). This way the image is already in sRGB color space. You only have to convince Photoshop to keep it that way (and not converting it to Adobe RGB) and then you will really see the same RGB values in Xcode and Photoshop.

Note how changing the color profile makes your display look quite differently? You think the color change is dramatically? Trust me, that is nothing compared to how different monitors may sometimes change the colors. Maybe you can now understand why color correction is so important. So the question is, why are the RGB values so important to you in the first place? Does it really matters, that RGB values are the same, as long as the displayed color is the same?

Mecki
  • 125,244
  • 33
  • 244
  • 253
  • 8
    Thank you, this is the only solution on the web that works. The key is to quit Xcode before changing your display to "Generic RGB Profile". Then when you choose "Save for Web & Devices", uncheck the "Convert to sRGB" box. Then in Xcode, click the color space popup in the color picker and choose "Generic RGB", then enter the red, green and blue values from Photoshop, NOT THE HEX VALUE as this reverts back to the sRGB color space for some reason (be careful not to tab to the hex field either, as that also changes the space to sRGB). – Zack Morris Dec 04 '14 at 20:52
  • 1
    Wow +1, now I can get colours set in the interface builder to match hex values that I set in code. – Chris Harrison Feb 06 '15 at 08:34
  • Also important to read this: https://developer.apple.com/library/ios/technotes/tn2313/_index.html#//apple_ref/doc/uid/DTS40014694-CH1-TARGETEDCOLORMGMT – Xcode is working in the sRGB space since it uses Targeted Color Management for iOS. As a result, I get the least amount of confusion and color differences if I switch my monitor also to the sRGB space. At least in that space Xcode and the Simulator match. – David K. Hess Nov 12 '15 at 16:41
15

This is the guide that works, just follow these steps and you can set UIColor programatically and have them match colors from a screenshot.

enter image description here

KML
  • 2,302
  • 5
  • 26
  • 47