Jump to content
You must now use your email address to sign in [click for more info] ×

Recommended Posts

I've been trying to use Affinity Designer on my latest web project and I've hit a snag that isn't a problem with Sketch or Photoshop.

 

I've got a document with art that uses a specific gold color (#f1b82d). It's my university's brand color. I need my art to have that exact color build in order to match all the other design elements of my site.

 

When I export the art as a PNG, the resulting file has a different color build and doesn't match. I think it has to do with color profiles being set, but when I uncheck that option in the export palette I get a different color shift. 

 

How can I export art as a PNG that has the exact color build as in the edit mode? 

 

I've attached some examples and my Affinity Designer document. 

 

I hope this is a simple thing I'm missing. Thanks!

post-30601-0-90822600-1463191060_thumb.png

post-30601-0-69657700-1463191062_thumb.png

social icons.afdesign

Link to comment
Share on other sites

  • Staff

Welcome to the forums MrBlank :D

 

When you exported your icons from AD did you tick the option to Embed the ICC profile? I would try again with this option ticked and the sRGB profile selected to see if that improves the colour in Chrome.

Link to comment
Share on other sites

TL;DR: 

 

Affinity Designer is exporting correctly. I need to have no color profile added and my colors match the hex values on my site. The shift was coming from Safari using my monitor's color profile at the OSX level. 

 

Long answer:

 

  • I tested exporting my image from AD, Sketch and Illustrator with no color profile added. 
  • All exported images rendered the same way in Chrome and Firefox.
  • Safari had a color shift that was the same for each exported image.
  • The color shift in Safari would change if I moved the window to another monitor!
  • When I changed my monitor's color profile (in OSX System Preferences) from "Thunderbolt Display" to "sRGB" Safari rendered the images with the proper hex value. 

 

In conclusion:

 

Safari is quickly becoming my least favorite browser to deal with. 

 

post-30601-0-12618800-1463599218_thumb.png

post-30601-0-34464400-1463599220_thumb.png

post-30601-0-12386500-1463599222_thumb.png

post-30601-0-63604500-1463599325_thumb.png

post-30601-0-52262100-1463599382_thumb.png

post-30601-0-37538700-1463599383_thumb.png

Link to comment
Share on other sites

MrBlank,

 

You may find Apple's Technical Note TN2220, Color Management in Safari, of interest. According to that, if you are not going to include color profiles with your images, for the most consistent results across all platforms & browser apps, you should be working in the sRGB color space.

 

Basically, there is never any guarantee that every browser will display everything as intended.

All 3 1.10.8, & all 3 V23.0 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.