How do I get a Cocoa application to paint exactly the color specified by my designer in Sketch?

Question

My designer indicated a color for painting. When I try to draw this color in a Cocoa application, I get a resulting color that is noticeably different from the reference image, as shown by Sketch.app.

I made a small Cocoa application that draws a custom view. Here is an interesting piece of code. Note that I am initializing the color in the SRGB space.

class View: NSView { override func drawRect(dirtyRect: NSRect) { let components : [CGFloat] = [156.0/255.0, 0, 254.0/255.0, 1] let color = NSColor.init(SRGBRed: components[0], green: components[1], blue: components[2], alpha: components[3]) color.setFill() NSRectFill(self.bounds) } } 

Here is what he draws. (The nevermind part is about the cursor. And I removed the shadow of the window, so it would be easier to see it side by side with other windows.)

And there is a fragment of a sketch file:

Putting it all together, it’s next to the Sketch file and user view, as well as the Xscope magnifier that displays the color value under the mouse cursor.

When hovering over a sketch file, I see the following:

When I hover over my user view, I see the following:

You can see that the color value of the pixel under the black mouse cursor, as read by Xscope, is significantly different. The colors also differ noticeably from my Retina Macbook Pro display, although it's interesting, but not so much different from the captured PNG image.

HOWEVER: until now, all this has been done with the default display settings and the Color LCD display color profile (hardware - Retina Macbook Pro with built-in display). When I manually change the display profile to "sRGB IEC61966-2.1" in the OSX Settings application and then repeat the colors again using Xscope, you can see these sample values:

And when fetching a custom view:

Most interestingly, you can see that the values ​​selected by Xscope in my user view exactly match the specified values, and the color is also visually correct. But, of course, I cannot force my users to change their display profile.

My question is: how do I customize the color of a custom view to match the color in Sketch (both for visual inspection and when fetching using Xscope magnifier) ​​with the default LCD color profile?

Answer 1

I just coped with this problem myself. Here is my process. Just tested on Retina Macbook Pro.

• Open sketch.
• Open digital color indicator (installed on OSX)
• Switch to "Show General RGB"
• In the menu, make sure that “View → Displayed values ​​→ as decimal”
• Hover over the color of the image in the sketch and pay attention to the values ​​(for example, 0, 150, 200).

Use this value in Cocoa:

 -(void)drawRect:(NSRect)dirtyRect { [[NSColor colorWithCalibratedRed:0/255.0 green:150/255.0 blue:200/255.0 alpha:1] set]; NSRectFill(self.bounds); } 

This should work, since “Generic RGB” is a device-independent space equivalent to Cocoa's “calibrated” color space.