How do I create NSColor instances that exactly match those in a Photoshop UI mockup?

Question

My UI designer gives me great UI mockups created in Photoshop. I want to exactly match the colors in the mockup, but every time I create a color using the -colorWithCalibratedRed:green:blue:alpha: method of NSColor, the colors do not match.

I have tried sampling the colors from the Photoshop mockup using the Pixie app in /Developer/Applications/Graphics Tools/ and it copies an NSColor definition to the clipboard, but these colors are not correct when I build and run the app.

If I use the values that the Photoshop color picker provides, they are not correct either.

I suspect this must be something to do with the fact that I'm sampling a calibrated color from the screen and so the values are incorrect, but I am not sure how to work around this.

If I use -colorWithDeviceRed:green:blue:alpha: and pass through the values it looks correct, but then the color is not consistent on other systems.

Is there a way to do this reliably?

Answer 1

Have you tried turning color management off in Photoshop? With color management enabled, the actual RGB pixel values displayed and the ones reported by Photoshop may not be the same.

Answer 2

Thanks, I just tried creating a test PSD with pure RGB values and I also created a simple app with a view that displays [NSColor redColor], [NSColor greenColor] and [NSColor blueColor].

When I sample the PSD (opened in Photoshop or Preview), Pixie shows me pure values (e.g R:255 G:0 B:0 for red) but when I sample my app it shows non-pure colors e.g (R:253 G:2 B:30) for the [NSColor redColor]. I get the same result if I use [NSColor colorWithCalibratedRed:1.0 green:1.0 blue:1.0 alpha:1.0] instead of [NSColor redColor].

Answer 3

There's no such thing as a "pure" RGB color that's consistent from one display to the next. Unless you're working in a standardized color space, the numbers that show up for a color on one display will probably render slightly differently on another.

Have your designer convert your mock-ups to a standard color space such as sRGB. Then you can use the methods on NSColor that take not just component values but the color space the components are in; this will get you colors that should look similar on any display.

In other words, a color swatch made from (R, G, B) = (1.0, 1.0, 1.0) in Photoshop using sRGB should look virtually identical to a color swatch drawn using a color you get this way:

NSColorSpace *sRGB = [NSColorSpace sRGBColorSpace];

CGFloat components[3] = { 1.0, 1.0, 1.0 };
NSColor *sRGBRed = [NSColor colorWithColorSpace:sRGB components:&components count:3];

Note though that +[NSColorSpace sRGBColorSpace] is only available on Mac OS X 10.5 Leopard and above. If you still need to run on Tiger, you could write a little utility app that runs on 10.5 and converts the canonical sRGB colors to the calibrated RGB space:

NSColor *calibratedColor = [sRGBRed colorUsingColorSpaceName:NSCalibratedRGBColorSpace];

Regardless of whether you use sRGB or the calibrated space, once you have a set of colors, you could put them in an NSColorList that you write to a file and then load from your application's resources at runtime.