Colour space matching iOS - ios

I have a purple color from a design that has a hex value of #ae359f.
I convert this hex into a UIColor, load it on the simulator and take a screenshot.
I open both the design and the screenshot in photoshop, and use the eyedropper and they both have the same hex value of #ae359f, however, they are visibly different colours.
Must be a colorspace issue - which I've read about a few times and still don't really get it. If its on the same device why the f can't #ae359f be the same everywhere! Who's fault is this.
So, the question is... how can i make UIColor look like AdobeRGB values - i can do it in interface builder I think...

Color Management is not supported on iOS in this graphics stack. Quartz et al will treat your colors as sRGB.
You could introduce a conversion routine for AdobeRGB -> sRGB, but the easy way is to just provide colors in sRGB values.
There's a little disclaimer at the end of the reference.
COLOR SPACES AND IOS
iOS does not support ColorSync, so all assets should be provided in the native device color space: sRGB.
More info in this Tech Note: https://developer.apple.com/library/ios/technotes/tn2313/_index.html

Related

Color gamut in Xcode 8

Today I have installed Xcode 8(beta) and exploring Storyboards. Here we can now set background and tintColor for different traits. That's good news.
But here with trait collection(for example any height X any width) there is another selection of gamuts
Here is the screenshot
As I have searched for gamut, I found that it is related with color.
I have tried with different combination of gamuts but I am unable to see any difference.
The documentation is also not helpful.
The question is how the developers get the benefit of this feature?
Developers can get benefit from it because it gives a much greater control over your app's color profile. You can explicitly assign a color to display depending on the device's gamut.
A solid understanding of gamut is key here. Devices will distort "untagged" colors, that is, colors outside of their gamut. The P3 gamut has a more extensive range of display colors than the sRGB gamut. This graph should give you a good idea of exactly how much more extensive it is:
So if you create your designs on a monitor with a P3 gamut, say a Cinema Display, your colors may display differently on a device with sRGB gamut. However, it's entirely possible there is no change in the color if you pick a color that is within both gamut.

What is the default color space for UIColor?

I can not find an article or a document describing which color space should be used for RGB values when initialising an instance from UIColor class.
The article Getting the right colors in your ios app says we should use Generic RGB. On the other hand, I have found several posts saying that we should definitely use sRGB on iOS.
It seems the default color space is sRGB as written here in CGColorSpace Reference
There is a new color space called "Display P3" used in the iPad Pro and iPhone 7. The profile in the existing image resources has to be converted to the Display P3. For Digital Color Meter app the P3 profile has to be selected in order to get "Display P3" RGB values. See the screenshot.
TL;DR
iOS uses Extended sRGB as its default.
Detailed Explanation
This can easily be verified via the debugger in Xcode:
put a breakpoint anywhere in your code,
when lldb comes up, type po UIColor.red,
the above command will return UIExtendedSRGBColorSpace 1 0 0 1 as of iOS 11, Xcode 9.2.
This color space can use the same sRGB values without a color change but at the same time permits RGB values to go negative as well as larger than 1.0 to express colors outside the sRGB color space (i.e. the extended sRGB color space).
There is a WWDC video, Working with Wide Color, from 2016 that explains this phenomenon nicely (go to 8:35).
So if you use sRGB colors in your app you should be good to go even for e-sRGB displays. Of course, if you need one of those specific colors outside the sRGB gamut, you will need to use the e-sRGB color space.
I wrote a blog post that explains this in detail:
http://www.vsanthanam.com/writing/2017/7/6/colors-in-ios-ensuring-consistency-between-designs-interface-builder-and-uicolor
Essentially, while Sketch uses a custom color picker that assumes sRGB color components, Xcode's color pick does not.
UIColor's most common factory method +colorWithRed:green:blue:alpha: assumes the sRGB Color Space (Extended sRGB if linked with iOS 10.x), but it also has another factory method, colorWithDisplayP3Red:green:blue:alpha: which will take in your Display P3 color space RGBA components, but stores them internally as translated values with a reference to the sRGB color space.
As always, take a look at Apple's documentation on UIColor for more info:
https://developer.apple.com/documentation/uikit/uicolor?changes=latest_minor
Interestingly enough, AppKit's UIColor counterpart, NSColor, supports way more flexibility with more available factory methods (including one designed with a custom color space specifically to mimic UIColor's +colorWithRed:green:blue:alpha: behavior). I'm not sure why UIColor is more limited.

CMYK vs sRGB - which one is better

Guys i have 2 images one with CMYK color model and other with sRGB.. I would like to find out which color model is better to use while dealing with image processing like resizing, cropping, color filling etc..
Thanks in advance guys.. !
CMYK color space is used for print, (s)RGB is used for screens (web, monitors, tvs etc). If one were to open a CMYK document in a viewer/program that doesn't support the color profile (which is not uncommon, since CMYK isn't as widely supported as RBG) the colors would appear to be extremely over-saturated. If you are altering the images for use on the web, or in an application, I would highly recommend that you use some variant of RGB.
In short, neither is really better than the other in general, it all depends on where you will be using the images (apples and oranges, comes to mind). CMYK is better for print, and (s)RGB is better for screens.
UPDATE in response to OP's comment:
Just to be clear (forgive me if you already know this) color space/profiles do not affect the resolution of an image, they only affect how the colors are handled/encoded. Resolution is only affected by file dimensions, DPI/PPI (dots/pixels per inch) and compression.
UPDATE 2 in response to OP's comment:
I'm not familiar with "Imagemagick", but in general, I can tell you that I've converted thousands of documents to RGB from CMYK (and vise versa) and never noticed any degradation in quality, when the file is viewed in a program that supports the color profile. The only exception is when converting to CMYK FROM RGB, it is possible to lose a wee bit of vibrancy (due to the fact that CMYK is a smaller color space. Like I said before, if by "quality" you mean "resolution" the color profile won't effect it, the image won't suddenly lose clarity, when switching color profiles. Let me know if you have any other questions.
Neither is "better" for these purposes. In general you should use the color space/model that best aligns with your output device, like CMYK for paper and sRGB for screen, but for manipulations (such as resize, crop) they are the same.
the best is sRGB because is larger and the color are better preserved. AdobeRGB is even better. But remember that if you want to distribute you graphic image you have to know what kind of device will be used to print/view. You may use also a AdobeRGB but when you print it, you'll be sad, because many colors of AdobeRGB cannot be seen on a paper.
Cheers

Wrong color in Interface Builder

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.
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:
Open "System Preferences"
Go to "Displays"
Go to "Color"
Select "Generic RGB Profile"
Make your screenshot
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?
This is the guide that works, just follow these steps and you can set UIColor programatically and have them match colors from a screenshot.

Which color space the iOS devices is used?

When I use the MAC Digital Color Meter to detect the RGB color of the screen, the RGB values can be shown in sRGB, Adobe RGB, original RGBs spaces, etc. And they are slightly different.
I want to use these values in the iOS Xcode platform, and use UIColor class to represent them, which color space should I choose in the Digital Color Meter?
Thanks.
iPhones definitely use sRGB. See this note on the page for CGColorSpace Reference:
https://developer.apple.com/documentation/uikit/uicolor?language=objc#1968626
iOS itself only supports device-dependent color spaces. I've heard that sRGB or Adobe RGB is closest to the iPhone/iPad display.
iPhone uses sRGB color space.
But for safety reasons, I suggest you use CGColorSpaceCreateDeviceRGB() to generate the color space instead of kCGColorSpaceSRGB

Resources