46

Overview

The background color of my iPhone app in the simulator (iMac) looks different from the color on the device (iPhone 3GS).

EDIT (following section has been added)

The following are all different:

  1. story board color (xib file)
  2. simulator color
  3. device color

I suppose I should go with how it looks on the device.

Questions

  1. Is this is a common problem other developers face and is there a way to match the colors (systematic procedure) ?
  2. will the color look different on different versions of iPhone (3gs / 4 / 4s) or all the color ?
  3. Am I missing something, is there any specific color profile I should use ?
  4. Is there something like a rule of thumb where RGB values vary by a certain percentage ?
  5. In iPhone 4 and 4S, do the color match the simulator ? ( I don't have a iPhone4 and 4S, so I am not sure.)
pkamb
  • 33,281
  • 23
  • 160
  • 191
user1046037
  • 16,755
  • 12
  • 92
  • 138
  • 3
    A screenshot would definitely help here. How different are we talking about? – jtbandes Apr 06 '12 at 05:49
  • 2
    The device uses gorilla glass...and your monitor most likely doesn't. This will subtly affect the way the human eye perceives color due to light wave distortion. Always go with how it looks on the device. It is not likely to look different between devices, unless one of them is not functioning correctly. – borrrden Apr 06 '12 at 05:51
  • thanks borrden, yes i like to go with the device color but i don't know how to match that colors – user1046037 Apr 06 '12 at 05:57
  • 1
    See my question (and answer): https://stackoverflow.com/q/47721708/235297 When I assign the "Apple RGB" profile to the screenshot in Photoshop, I get correct colors. – Ortwin Gentz Dec 12 '17 at 16:09

9 Answers9

20

Credit goes to @jtbandes for suggesting to send screenshots which led to the solution

I am just answering the question for completeness.

Steps I followed:

  1. Take a screenshot of image in storyboard
  2. Take a screenshot of image in device (use mail / photo stream back to your mac)
  3. Use color picker (part of mac OS color palette) to pick the same spot on both the screenshots
  4. Note down the RGB values (available on the mac OS color palette) of spots chosen in step 3
  5. compare both the RGB values and see the difference
  6. add the RGB offset to match the color.

My RGB offset (not be followed blindly)

based on my experience, i added the following RGB values to get the color I wanted, it is only rough and worked for me:

  • Red +12
  • Green +19
  • Blue +16

Different angles (best to keep it horizontal)

Holding the phone in different angles also gives different shades, keeping it horizontal did give the color

user1046037
  • 16,755
  • 12
  • 92
  • 138
  • 2
    What you do is actually called Color management: http://en.wikipedia.org/wiki/Color_management – MrTJ Apr 06 '12 at 08:33
  • thanks @MrTJ, my understanding is that iPhone doesn't use color profiles and therefore i followed the steps mentioned above, if there is a better approach i would be great to know. thanks – user1046037 Apr 06 '12 at 13:21
  • Great post. I am simultaneously grateful for your offsets and disappointed they are needed at all. To the naked eye though the offers are perfect. Finally my default.png gracefully transitions to the app's menu background. – Ternary Nov 18 '14 at 21:28
  • According to this question (which I feel doesn't warrant the dupe flag as it illicit a better answer, IMO), the issue is likely that you were using sRGB colorspace on the color picker, and the UIColor() resulted in a color in the Generic RGB colorspace. (I know the docs indicate UIColor() uses device RGB, but in my testing, UIColors matched up exactly when setting the color picker to Generic RGB, not Device RGB.) See: http://stackoverflow.com/questions/28037691/hex-colors-in-ios-are-not-accurate – Mason G. Zhwiti Feb 19 '15 at 23:22
11

As others have pointed out, this is an issue of Color Spaces.

Two tasks need to be performed:

  1. Get the source color using the sRGB color space.
  2. Set the color in Interface Builder, using the sRGB color space.

Task 1

You can use Apple's Digital Color Meter app to sample the required color, using the Display in sRGB option, but the output is very limited.

Another option is to use an app like SipIt (available free on the App Store, last I checked). Make sure you are sampling in the correct color space by performing:

Preferences -> General -> Color Profiles -> sRGB

You can also set your output format (e.g. hex string).

enter image description here Task 2

In Interface Builder, open the Color window, choose the the second pane, choose "RGB Sliders". Then click on the cog icon to choose the sRGB color profile.

enter image description here

Once done, paste your color value in to the Hex Color # field

You're done! Your colors should now match.

I am not affiliated with SipIt in any way. But I've been using it for a few years and it is very handy. I'd recommend it to any designer.

Womble
  • 4,607
  • 2
  • 31
  • 45
  • Using Sip as well, matching Color Spaces between Sip and Xcode helped to get same color for hex field in Xcode color picker. +1 for that :). BUT colors in Xcode and Sketch still do not match :( – Sergii N. Sep 07 '17 at 14:41
  • Is there any way to make Storyboard remember my preferences: sRGB? I don't want to choose this option every single time I set a custom color! – Roman Nov 24 '21 at 05:17
7

The current (as of 3/17/14) CGColorSpace reference includes the following text, which says that sRGB is the native device color space for iOS.

Color Spaces and iOS: iOS does not support ColorSync, so all assets should be provided in the native device color space: sRGB.

Szymon
  • 42,577
  • 16
  • 96
  • 114
John
  • 71
  • 1
  • 1
  • 1
    Please provide the link to the quoted reference to make your answer better. – Szymon Mar 17 '14 at 23:50
  • @Szymon https://developer.apple.com/library/ios/Documentation/GraphicsImaging/Reference/CGColorSpace/index.html – GuramK Sep 27 '14 at 19:45
5

It's about color spaces.

Make sure you are picking the color from an sRGBcolor space, and replicating its RGBA values on Interface Builder by selecting sRGB IEC61966-2.1 from the dropdown menu.

If you pick a color in one color space, and generate it in a different color space, it will look different, in spite of having replicated the same RGBA values.

Also, have in mind that when you generate a color through code, using UIColor(red:green:blue:alpha:), it's generated on the sRGB color space by default. That's why it's so convenient to use this one (instead of Adobe RGB, P3, or any other). Besides, sRGB is the standard that's most used in the industry currently.

Fun fact: That UIColor constructor I mentioned above creates colors in the sRGB space since Xcode8. Before, that function used to create them within the Generic RGB space instead. That's why it might cause confusions too.

Here is a resource that extends on the topic: https://medium.com/@volbap/working-efficiently-with-colors-in-xcode-bc4c58b16f9a

Pablo V.
  • 51
  • 1
  • 4
1

iPhone does use color space management so if you want a more "scientific" solution you can create your own color space for example with CGColorSpaceCreateCalibratedRGB. It's on Core graphics level though.

MrTJ
  • 13,064
  • 4
  • 41
  • 63
  • thanks @MrTJ pardon my ignorance, I am using images (texture), does that work with images as well ? – user1046037 Apr 06 '12 at 15:30
  • 1
    Yes, you can set the color space for any rendering context including the screen. Then your color space will be applied to whatever you draw to that rendering context. See https://developer.apple.com/library/mac/#documentation/graphicsimaging/conceptual/drawingwithquartz2d/dq_color/dq_color.html (especially the last chapter) and http://developer.apple.com/library/mac/#qa/qa1396/_index.html – MrTJ Apr 10 '12 at 08:45
  • While the API does exist, it doesn't seem to actually have any effect.  Creating a `CGColor` using `CGColorSpaceCreateCalibratedRGB()` and then drawing it into a DeviceRGB context results in the exact same color value.  (It might be a hold over from OS X, or include for the sake of future-proofing.) – Slipp D. Thompson Oct 05 '15 at 04:11
1

The better way to convert the RGB values to sRGB is using "Digital Color Meter" tool in mac, simply check the "Display in sRGB"

Digital Color Meter

then use the sRGB values in your code instead of RGB native values

enter image description here

using this tool you can find out generic RGB color and set it directly to xcode as RGB values

MohyG
  • 1,335
  • 13
  • 25
1

One more simple solution when working with image files in your app. Firstly, set your color space in Xcode to sRGB IEC61966-2.1 and apply your colors. Then, before you import any pictures to your app, match your images to sRGB IEC61966-2.1 profile using ColorSync Utility on Mac. Worked perfectly for me and my background now perfectly matches my imported images. Hope this helps someone.

Dusan Juranovic
  • 157
  • 2
  • 12
0

I had a similar problem, especially with the greens in my project. My issue turned out to be that some of the assets I had were created in illustrator, and the color was set to CMYK instead of RGB. I'm not sure if this was your issue or not, but it might be helpful for those who stumble onto this question in the future. I changed the illustrator "Document color mode" to RGB and all is well.

user3102878
  • 1
0

You can use this webPage for different decks of colors in Xcode. for example Generic and Device Colors are different a little bit.

S At
  • 422
  • 5
  • 15