Colour management for apps that aren't aware of colour spaces

[st3f]

I'm doing some animation in an app (Keyshape) that, as far as I can tell, knows nothing about colour spaces. Because it's a simple little app, I'm doing much of the effects work (e.g. spin blur ) in Pixelmator Pro and bringing the elements together in Keyshape.

What I've been doing so far is completely ignoring colour profiles. I've been using the default Pixelmator Pro colour space of sRGB and exporting .png files using File > Export from Pixelmator Pro. I'm assuming that these files will have an sRGB profile embedded and that when I import them into Keyshape, it will ignore any colour space information and just use the RGBA info in the file.

Am I risking the colours drifting with this workflow? And is there some better way of working?

Any help and advice appreciated.

-Stef.

[Andrius]

I think this all depends on the way Keyshape works, to be honest. So let's put it to the test...

I exported a PNG image containing a blue (Hex: 0270C9) square from Pixelmator Pro using the regular Export function. I added this as an object in Keyshape. Then I created a square in Keyshape and set its fill color to 0270C9. The two squares appeared to be the same color, but I needed to make sure. So, I exported the composition as a PNG and used the Pixelmator Pro color picker to pick the color of the squares. Both squares were the same color: 0270C9.

So, based on the above test, you should be fine.

However, on a fundamental level, any app that deals with colors should have some sort of basic color management because colors in the RGB system are relative, rather than absolute. So you need a reference point or one will be chosen for you. Without color management, the reference point used on a system level would be the monitor profile, which is an sRGB-like color space. But still, that seems a bit of a laissez-faire attitude for an app dealing with colors to take.

To dig into what's going on here, I also tried exporting just a blue (0270C9) shape in Keyshape and noticed (via the Get Info window) that the exported PNG has an sRGB color profile. So, since the app is designed for web use, I think it does use the web-standard sRGB profile and has some sort of internal color management.

[st3f]

Thanks for the deep dive, Andrius. That was much appreciated. I've a lot to learn about colour spaces. Knowing that I can get the colour profile of a .png from Get Info is a useful bit of knowledge that I learnt today. Noticing that screenshots have a profile of 'Color LCD' is another.

Thanks again.

- Stef

[st3f]

I've also learnt the difference between a colour profile and a colour space but I won't correct the above text.
(For those as ignorant as I am , RGB and CMYK are colour spaces, sRGB and DCI-P3 are colour profiles.

(edit. Further reading tells me that it's not even as clear-cut as that.)

[Andrius]

I've also learnt the difference between a colour profile and a colour space but I won't correct the above text.
(For those as ignorant as I am , RGB and CMYK are colour spaces, sRGB and DCI-P3 are colour profiles.

(edit. Further reading tells me that it's not even as clear-cut as that.)

Yeah, not quite. I often use the terms color space and color profile interchangeably, but the difference is this: a color space is a specific organization of colors, such as sRGB, Adobe RGB, or Euroscale Coated v2 (a CMYK color space). A color profile is a file that contains information about that specific color space. So your Mac has an sRGB color profile installed which tells the system about the colors in the sRGB color space. In this case, the term 'color profile' is kind of a metonym for 'color space'.

RGB and CMYK are color models. More specifically, RGB is an additive color model, while CMYK is a subtractive color model. That means, in RGB, colors are created by adding together wavelengths of light. I.e. you start out with darkness and the more colors you add (the more red, green, and blue), the closer to white you get. In a subtractive color model, you start out with white and, by adding pigments which absorb certain wavelengths, you 'subtract' color from light to create darkness. So, the more cyan, magenta, and yellow you add, the closer you get to black. The black ink is there to make things a little more efficient and stop you wasting a ton of ink.

I've always wanted to write a little tutorial on this topic, now might be a good time to do so...

[st3f]

I've always wanted to write a little tutorial on this topic...

That would be really useful. Thanks.