Color Changes When Copy/Pasted

[Omi]

Hello!

The attached "Green Wave.afdesign" file contains two wave-shaped curves. One of the curves has a gradient applied to it. These curves were originally created in Adobe Illustrator.

For some reason, when I copy an RGB Hex color code that is applied to one of the gradient color nodes on the wave shape and apply that color to a separate shape, the color that appears on the other shape looks very different than how the same color appears on the wave shape. I've also attached a brief screen recording that shows this.

Would anyone be able + willing to please help me understand why this may be happening?

The Color Format is CMYK/8 and the Color Profile is U.S. Web Coated (SWOP) v2. It's my understanding that the original Adobe Illustrator file was also in CMYK.

Different Greens.mov

Green Wave.afdesign

[R C-R]

4 hours ago, Omi said:

For some reason, when I copy an RGB Hex color code that is applied to one of the gradient color nodes on the wave shape and apply that color to a separate shape, the color that appears on the other shape looks very different than how the same color appears on the wave shape.

Isn't the color the same as where the color stop node is on the wave shape? It won't be the same as anywhere else on the gradient applied to the wave shape, if that is what you expect.

[Hangman]

6 hours ago, Omi said:

For some reason, when I copy an RGB Hex color code that is applied to one of the gradient color nodes on the wave shape and apply that color to a separate shape, the color that appears on the other shape looks very different than how the same color appears on the wave shape.

Would anyone be able + willing to please help me understand why this may be happening?

@Omi, this is because the gradient on the wave shape created in Illustrator translates as a mask when the file is opened in Designer and when you look at the mask you will see at the point where you are referencing your RGB Hex Colour the mask is transparent (i.e., Black) so subsequently the colour you are actually referencing isn't the colour of the Node on the gradient but the colour of the green rectangle beneath the wave shape.

That underlying rectangle has an RGB Hex colour value of #45BB8B, so if you use that value and apply it to your shape you will see a colour match.

[Omi]

2 hours ago, R C-R said:

Isn't the color the same as where the color stop node is on the wave shape? It won't be the same as anywhere else on the gradient applied to the wave shape, if that is what you expect.

@R C-R, good question. I thought that might be the case, but I think @Hangman's answer below explains this particular situation. Thanks for your comment!

[Omi]

1 hour ago, Hangman said:

@Omi, this is because the gradient on the wave shape created in Illustrator translates as a mask when the file is opened in Designer and when you look at the mask you will see at the point where you are referencing your RGB Hex Colour the mask is transparent (i.e., Black) so subsequently the colour you are actually referencing isn't the colour of the Node on the gradient but the colour of the green rectangle beneath the wave shape.

That underlying rectangle has an RGB Hex colour value of #45BB8B, so if you use that value and apply it to your shape you will see a colour match.

@Hangman, thanks so much for explaining that to me. You hit the nail on the head, and I really appreciate you taking the time to help me understand this. 

I was confused by the gradient being in the form of a mask.

 

 

[Hangman]

@Omi, that’s no problem at all, happy I could help 🙃

[lepr]

On 2/11/2023 at 9:03 PM, Omi said:

@Hangman, thanks so much for explaining that to me. You hit the nail on the head, and I really appreciate you taking the time to help me understand this. 

I was confused by the gradient being in the form of a mask.

 

 

 

You haven't been given the correct explanation for the more saturated and warmer green being presented by the gradient node colour editor when you inspected the node.

It's true the mask is responsible for the gradient effect. The gradient fill has 5 nodes, all containing the same green CMYK [207, 62, 188, 21] definition, and so the fill itself is effectively a solid green and the mask acts as a transparency gradient, allowing blending with the underlying object's lighter green CMYK [175, 0, 155, 0]. All good so far.

The document has CMYK profile 'U.S. Web Coated (SWOP) v2'. When the app's default RGB profile (at the time of opening the CMYK document) is sRGB, the conversion of the aforementioned CMYK colour to RGB Hex should yield #298964. However, the node colour editor showed #2BB13D, which is a very different looking green in sRGB. A problem.

The explanation follows.

The gradient node colour editor initially opens in the mode that it was using when last closed.

When the node colour editor is opened and initially has the same mode as the node's stored colour definition, the value of the stored colour is shown, and switching the mode presents a correctly colour-managed converted value (without the stored definition being changed unless a slider is touched or a numerical value is edited).

When the node colour editor is opened and initially has a mode different to the node's stored colour definition, a simplistic non-colour managed conversion from the stored colour is presented, and switching the mode presents a value converted from that initially presented non-colour managed value (without the stored definition being changed unless a slider is touched or a numerical value is edited).

Your video shows the latter situation where colour management is absent in the initial conversion from stored value to presented value.

This has been a problem for years, probably since the beginning of Affinity, and it also afflicts the colour editor of FX.

 

Edited August 3, 2023 by lepr
removed % symbols that did not belong in the 8-bit CMYK values

[Omi]

23 minutes ago, ,,, said:

 

You haven't been given the correct explanation for the more saturated and warmer green being presented by the gradient node colour editor when you inspected the node.

It's true the mask is responsible for the gradient effect. The gradient fill has 5 nodes, all containing the same green CMYK [207%, 62%, 188%, 21%] definition, and so the fill itself is effectively a solid green and the mask acts as a transparency gradient, allowing blending with the underlying object's lighter green CMYK [175%, 0%, 155%, 0%]. All good so far.

The document has CMYK profile 'U.S. Web Coated (SWOP) v2'. When the app's default RGB profile (at the time of opening the CMYK document) is sRGB, the conversion of the aforementioned CMYK colour to RGB Hex should yield #298964. However, the node colour editor showed #2BB13D, which is a very different looking green in sRGB. A problem.

The explanation follows.

The gradient node colour editor initially opens in the mode that it was using when last closed.

When the node colour editor is opened and initially has the same mode as the node's stored colour definition, the value of the stored colour is shown, and switching the mode presents a correctly colour-managed converted value (without the stored definition being changed unless a slider is touched or a numerical value is edited).

When the node colour editor is opened and initially has a mode different to the node's stored colour definition, a simplistic non-colour managed conversion from the stored colour is presented, and switching the mode presents a value converted from that initially presented non-colour managed value (without the stored definition being changed unless a slider is touched or a numerical value is edited).

Your video shows the latter situation where colour management is absent in the initial conversion from stored value to presented value.

This has been a problem for years, probably since the beginning of Affinity, and it also afflicts the colour editor of FX.

 

@,,,, thank you very much for the taking the time to explain this to me. I really appreciate it!

Do you know of any workarounds to overcome this color conversion issue? It's all good either way.

[lepr]

29 minutes ago, Omi said:

@,,,, thank you very much for the taking the time to explain this to me. I really appreciate it!

You're welcome!

29 minutes ago, Omi said:

Do you know of any workarounds to overcome this color conversion issue? It's all good either way.

Notice that I wrote, "The gradient node colour editor initially opens in the mode that it was using when last closed."

If you know that a gradient node has a CMYK definition, then ensure the node colour editor opens in CMYK mode. If the node colour editor opens in another mode, then switch its mode to CMYK, close it and then re-open it. Then you can switch mode and get a colour-managed conversion of the colour value.

[Omi]

1 hour ago, ,,, said:

Notice that I wrote, "The gradient node colour editor initially opens in the mode that it was using when last closed."

If you know that a gradient node has a CMYK definition, then ensure the node colour editor opens in CMYK mode. If the node colour editor opens in another mode, then switch its mode to CMYK, close it and then re-open it. Then you can switch mode and get a colour-managed conversion of the colour value.

@,,,, thank you for pointing that out.

I feel a bit sheepish about this, but I'm actually not 100% clear on how to specify a color mode for the gradient node color editor.

Would you be willing to briefly explain how to do this?

[lepr]

4 minutes ago, Omi said:

@,,,, thank you for pointing that out.

I feel a bit sheepish about this, but I'm actually not 100% clear on how to specify a color mode for the gradient node color editor.

Would you be willing to briefly explain how to do this?

There is a selector for the mode immediately above the sliders in the node colour editor.

It's at arrow 4 in the click sequence shown below.

[Hangman]

@Omi, ideally, if you plan to work with the artwork in Affinity Designer, it would make sense to remove the reliance on the gradient masks completely as these are really not needed, they are just a hangover from how Affinity Designer has translated the Illustrator file.

As @,,, mentioned above, this is a CMYK document so all colours should be specified in CMYK. The elements are simple, again as @,,, mentions, you basically have two shapes using the same base CMYK green, i.e., CMYK (175, 0, 155, 0)... Note: these are 8-bit values, not percentages values.

With the upper shape selected, selecting the Fill tool will show you the position of the five nodes that form the gradient so you can simply drag and snap guides to these five points for reference.

You can then delete the mask for that layer and change its CMYK fill colour to the base green, CMYK (175, 0, 155, 0) drag out a new gradient between the first and last guides and add in the additional nodes by clicking on the gradient line to match the original node positions.

Then using the selector shown in @,,,'s post above apply CMYK colour values to each node. The two outer nodes both left and right use the same base green, it's only the centre node that uses the darker green value of CMYK (208, 62, 188, 21), This will then replicate the original gradient in Affinty Designer without the need for the mask.

The lower layer also has a mask inherited when translating the Illustrator file, it's only purpose is to square the right hand side of the lower layer so this mask can also be deleted and you can then simply move the bottom right hand node of the shape so it aligns with the top right node.

You are now left with a much 'cleaner' Affinity Designer file to work with.

[lepr]

29 minutes ago, Hangman said:

As @,,, mentioned above, this is a CMYK document so all colours should be specified in CMYK. The elements are simple, again as @,,, mentions, you basically have two shapes using the same base CMYK green, i.e., CMYK (175, 0, 155, 0)... Note: these are 8-bit values, not percentages values.

 

 

OK, I did say the document is CMYK.

However, I did not say the two shapes are "using the same base CMYK green". I said the back shape is a lighter green than the one darker green that is specified in all nodes of the gradient fill of the front shape.

 

 

[Hangman]

28 minutes ago, ,,, said:

However, I did not say the two shapes are "using the same base CMYK green". I said the back shape is a lighter green than the one darker green that is specified in all nodes of the gradient fill of the front shape.

My point here was really demonstrating the fact that if you were to remove the gradient mask from the upper shape with a view to creating your own gradient in Designer then based on the current position of the gradient nodes in the source file a sensible starting point is for both shapes to use the same base green since the gradient blends out at each end into the green of the underlying layer. This simply then leaves the single central node of the gradient using the darker green…

[Omi]

@,,, and @Hangman, you've both been incredibly generous with your help. Thanks to both of you, I now have a better understanding of colors, masks, and gradients within Affinity Designer.  Thanks again!

[Hangman]

6 minutes ago, Omi said:

@,,, and @Hangman, you've both been incredibly generous with your help. Thanks to both of you, I now have a better understanding of colors, masks, and gradients within Affinity Designer.  Thanks again!

Glad the combined help has been useful and I hope it helps you with this and future projects

[Omi]

Thanks, @Hangman! 

I actually have one more (beginner) question:
My CMYK color values only go up to 100, but I can see in the video you shared that you're able input CMYK (175, 0, 155, 0).

In my Affinity Designer, the CMYK color that corresponds with CMYK (175, 0, 155, 0) seems to be CMYK (69, 0, 61, 0).

Does this mean that my Affinity Designer is set to display CMYK colors as percentage values rather than 8-bit values? If so, can this be changed?

EDIT: I figured it out thanks to this forum post.

[Hangman]

@Omi, that's perfect, I'm glad you figured it out, yes, basically colour values for CMYK can be specified as either 8-bit (0 - 255) or as percentages (0% - 100%). For RGB colour you can also specify colour values in 16-bit (0 - 65,535).

[R C-R]

57 minutes ago, Omi said:

Does this mean that my Affinity Designer is set to display CMYK colors as percentage values rather than 8-bit values? If so, can this be changed?

If you have not yet figured out how to do this, in the Color panel, click on the 'hamburger' icon (looks like 3 lines) at the top right of the panel. In the menu that pops up, for CMYK you can choose between 8 bit & Percentage.

This menu also has other options you may want to use.