Hex Colours & Web Page Colours Appear Different

[Ali1]

Hi Guys

I have a question about Hex colour codes and why these are different when you try and replicate the same colour form a web page in Affinity Designer.

If I take a Hex colour code from a web page with the value of #C3A46E,  and use the same Hex code in Affinity (i.e. when drawing a shape), then the shade of the colour appears to come out darker in Affinity (see screenshot attached). I have also tried to use RGB codes instead, but appears to make no difference. When exporting I get the same result as seen on the screen (i.e. a darker show).

The question is why do Hex colour codes come out a darker shade in Designer? 

Please can you let me know if I am doing something wrong or should be doing something differently? Perhaps it's a setting relating to the colour pallet.

Thanks, Ali

[BofG]

First thing to know is that hex codes are RGB. The first two digits are R, second two G and last two B. They are just in hexadecimal, 00 = 0, FF = 255.

The web page will be rendering in sRGB, you need your Affinity document to be the same in order for the colour values to mean the same thing. This is also true of the output - it has to be exported in sRGB.

[Ali1]

Thanks for the response. To setup the sRGB, I am assuming that this setup in the colour profile when you create a new document? The option I selected was 'sRGB ITC61966-2.1' (see screenshot). I've just tried this and it appears to have resolved the issue.

Also - please can you confirm what colour format I should be using? Should this be RGB/8 or RGB/16?

Thanks

[BofG]

That's the correct profile, I ommited the "IEC 6... etc." due to laziness.

For best compatibility across browsers/devices I'd go with rgb/8. The number is the bit depth (bits per channel), generally unless you know for sure you need the higher bit depth then you don't need the higher bit depth.

[Old Bruce]

If I am going to be needing 8 bit RGB files I will do the design work in 16 bit RGB simply to avoid problems (most obvious is banding in gradients) with blending different layers. Then I export the final image to an 8 bit format. My preference is to work in 16 bits regardless of the final bit depth. 

[BofG]

On 8/1/2021 at 3:22 PM, Old Bruce said:

If I am going to be needing 8 bit RGB files I will do the design work in 16 bit RGB simply to avoid problems (most obvious is banding in gradients) with blending different layers. Then I export the final image to an 8 bit format. My preference is to work in 16 bits regardless of the final bit depth. 

Do you have a simple example of this? I can blend two gradients and see that the 16 bit file has less positerisation than doing the same in an 8 bit Affinity document, but when exporting both to an 8 bit file (jpeg or png) there is no difference in the output. From a technical standpoint I don't think it can make any difference, as you don't get any bits "for free" at the end of it all, although I would like to be proven wrong :)

[Old Bruce]

All I can say is that my experience is that if I use many layers, more than just 2, with different blend modes and opacities I get different results exporting from an 8 bit file to an 8 bit format and a 16 bit file to an 8 bit format.

[BofG]

1 hour ago, Old Bruce said:

All I can say is that my experience is that if I use many layers, more than just 2, with different blend modes and opacities I get different results exporting from an 8 bit file to an 8 bit format and a 16 bit file to an 8 bit format.

Thanks, I tried three layers and few odd blend modes and it's true - different results occur. I had expected any difference to simply be fidelity, which would then even out on export. The results I got using were very different, not sure if it's correct:

Both are three stacked rectangles, 100 to 36% K, bottom one reversed and then pin light and hard mix blend going up the stack. Top set is the 8bit, bottom set 16bit.