How do I get my Cocoa app to draw exactly the color specified by my designer in Sketch?

Question

My designer has specified a color to draw. When I try to draw that color in a Cocoa app, I get a resulting color that’s visibly different from the reference image as displayed by Sketch.app.

I made a small Cocoa app that draws a custom view. Here’s the interesting part of the code. Note that I am initializing the color in 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’s what it draws. (Nevermind the part about the cursor. And I removed the window shadow so it would be easier to review this side by side with other windows.)

And here’s the Sketch file portion:

Putting it all together, here’s a side by side of the Sketch file and the custom view, as well as Xscope loupe displaying the color value under the mouse cursor.

When hovering over Sketch file, I see this:

When hovering over my custom view, I see this:

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 look significantly different on my Retina Macbook Pro display, though interestingly, not so different in the captured screenshot PNG.

HOWEVER: so far, this was all done with default display settings and color profile “Color LCD” (the hardware is Retina Macbook Pro with its built-in display). When I manually change the display profile to “sRGB IEC61966-2.1” in OSX Settings app, and then sample the colors again with Xscope, you can see these sampled values:

And when sampling the custom view:

Most interestingly, you can see that the values sampled by Xscope on my custom view exactly match the specified values, and the color is also visually correct. But of course, I can’t make my users change their display profile.

My question: how do I make my custom view color exactly match the color in Sketch (both for visual inspection and when sampled with the Xscope loupe) with the default Color LCD display profile?

Answer 1

Just worked through this issue myself. Here's my process. Just tested on a Retina Macbook Pro.

1. Open Sketch.
2. Open Digital Color Meter (installed on OSX)
3. Switch to 'Display in Generic RGB'
4. In menu, ensure that 'View -> Display Values -> As Decimal`
5. Mouse over your color of the artwork in sketch and note the values (e.g. 0, 150, 200)

Use that 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, as 'Generic RGB' is a device independent space equivalent to the 'calibrated' color space in Cocoa.