如何让我的Cocoa应用程序精确绘制设计师在草图中指定的颜色?

如何让我的Cocoa应用程序精确绘制设计师在草图中指定的颜色?,cocoa,appkit,nscolorspace,Cocoa,Appkit,Nscolorspace,我的设计师指定了要绘制的颜色。当我尝试在Cocoa应用程序中绘制该颜色时,得到的结果颜色明显不同于Sketch.app显示的参考图像 我制作了一个小的Cocoa应用程序,可以绘制自定义视图。下面是代码中有趣的部分。请注意,我正在SRGB空间中初始化颜色 class View: NSView { override func drawRect(dirtyRect: NSRect) { let components : [CGFloat] = [156.0/255.0, 0,

我的设计师指定了要绘制的颜色。当我尝试在Cocoa应用程序中绘制该颜色时,得到的结果颜色明显不同于Sketch.app显示的参考图像

我制作了一个小的Cocoa应用程序,可以绘制自定义视图。下面是代码中有趣的部分。请注意,我正在SRGB空间中初始化颜色

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)
    }    
}
这是它画的。(不要提及光标的部分。我删除了窗口阴影,以便与其他窗口并排查看。)

以下是草图文件部分:

总而言之,这里有一个并排的草图文件和自定义视图,以及显示鼠标光标下颜色值的Xscope loupe

将鼠标悬停在草图文件上时,我看到以下内容:

将鼠标悬停在我的自定义视图上时,我看到以下内容:

您可以看到,Xscope读取的黑色鼠标光标下像素的颜色值明显不同。在我的Retina Macbook Pro显示屏上,这些颜色看起来也有很大的不同,不过有趣的是,在截图PNG中没有那么大的不同

然而,到目前为止,这一切都是通过默认显示设置和颜色配置文件“彩色LCD”(硬件是带有内置显示器的Retina Macbook Pro)完成的。当我在OSX设置应用程序中将显示配置文件手动更改为“sRGB IEC61966-2.1”,然后使用Xscope再次采样颜色时,您可以看到这些采样值:

采样自定义视图时:

最有趣的是,您可以看到Xscope在我的自定义视图上采样的值与指定的值完全匹配,并且颜色在视觉上也是正确的。但当然,我不能让我的用户更改他们的显示配置文件


我的问题:如何使我的自定义视图颜色与草图中的颜色(用于目视检查和使用Xscope loupe采样时)与默认的彩色LCD显示配置文件完全匹配?

我自己刚刚解决了这个问题。这是我的流程。刚刚在Retina Macbook Pro上测试过

  • 打开草图
  • 开放式数字色度计(安装在OSX上)
  • 切换到“以通用RGB显示”
  • 在菜单中,确保“查看->显示值->为十进制”
  • 将鼠标悬停在草图中艺术品的颜色上,并记下值(例如0、150、200)
  • 在Cocoa中使用该值:

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

    这应该是可行的,因为“通用RGB”是一个与设备无关的空间,相当于Cocoa中的“校准”颜色空间

    我不一定认为Sketch.app在保存导入图像文件的颜色配置文件方面很出色。我假设图像文件有一个嵌入的颜色配置文件。Preview.app可能更可靠。根据设计者创建文件的方式,色样可能位于其显示器的颜色配置文件中,而这不一定会在另一个显示器上忠实再现。如果他们指定他们列出的RGB值在sRGB颜色空间中,那么就使用这些值。值得一提的是,#9c00fe将这些RGB值编码为web颜色表示法,即明确的sRGB。设计师只需在草图中绘制一个方框,然后输入颜色作为填充值。我的工作是让这两种颜色在我的屏幕上匹配(这样设计师和我们的用户在他们的屏幕上会看到正确的颜色)。设计师是如何选择颜色的?他们使用了标准的颜色选择器窗口吗?在该窗口中,在允许输入/查看RGB值的选项卡上,有一个选择颜色空间的小控件。如果他们不小心选择一个特定的颜色空间并与你沟通,那么恐怕他们的选择几乎是无用的。与他们列出的RGB值相同。如果你可以让他们在你观察的时候重现这个过程,你也许可以弄清楚那些RGB值来自什么颜色空间。或者将它们转换为所需的颜色空间。设计师使用草图集成的颜色选择器选择颜色。素描中没有颜色管理:它似乎在SRGB空间中工作。我还用颜色代码创建了一个CSS样式。不同的浏览器呈现出不同的效果:在上面的示例中,Chrome的行为类似于Sketch,而Safari的行为类似于我的测试应用程序。我希望我自己的应用程序能够与Chrome/Sketch模型配合使用。只有在与设计人员使用的系统相同的系统上打开文档时,这才有效。如果没有,那么你的Mac电脑在设计时没有显示出与设计师相同的颜色,这种情况是没有希望的。设计师必须使用使用并保留颜色配置文件的工作流,而草图没有(上次我选中)。如果要从图像中采样,则在显示图像时必须使用尊重所附颜色配置文件的程序。@Kenthomass是的,这是绝对正确的,也是一个很好的观点。我的工作流程只保证将开发人员在草图中看到的内容完美地转换为开发人员希望在Cocoa中看到的内容。