Newguyeddie Posted November 2, 2022 Share Posted November 2, 2022 Hi there, first forum post of my entire life here I guess I really need a hand. I'll try and keep it brief. I'm using AF. Designer to export an image for my website. The background of my website is #FCFCFC. I'm trying to make an image with a background to match (#FCFCFC). When I go to export my image, the preview shows the corect color. Howver, on export, the image color changes. The exported .png comes out as #FDFDFD it doesn't match! :( My color profile is sRGB...2.1 Any help would be greatly appreciated. BG Color Check.afdesign Quote Link to comment Share on other sites More sharing options...
NotMyFault Posted November 2, 2022 Share Posted November 2, 2022 Cannot reproduce. Can you please share the exported png, and a screenshot of all export settings (including ‚more‘)? how do you check the color values? (Which App and tools)? Quote Mac mini M1 A2348 | Windows 10 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080 LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5 iPad Air Gen 5 (2022) A2589 Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps. Link to comment Share on other sites More sharing options...
firstdefence Posted November 2, 2022 Share Posted November 2, 2022 Out of curiosity what value do you get from this file? Exported using the downloaded afdesign file, with the standard png export settings no modifications applied under the more options, my iMac Digital Colour Meter app reads a value of RGB 252,252,252 which in hex is #FCFCFC Quote iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9 (Please refrain from licking the screen while using this forum) Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions Link to comment Share on other sites More sharing options...
Newguyeddie Posted November 2, 2022 Author Share Posted November 2, 2022 10 hours ago, NotMyFault said: Cannot reproduce. Can you please share the exported png, and a screenshot of all export settings (including ‚more‘)? how do you check the color values? (Which App and tools)? Hi NotMyFault thanks for the reply. I've attached a few files that will be helpful Exported .png Screenshot of the color value in AD (All looks good!) Screenshot of the export settings Screenshot of the website color differences Link to website here Re-attached the AD File (if it's handy) I'm using the chrome extension "Color Picker" but the difference in color is visible to the eye on my website here: https://8c6055.myshopify.com/ Color Match.afdesign Quote Link to comment Share on other sites More sharing options...
Newguyeddie Posted November 2, 2022 Author Share Posted November 2, 2022 10 hours ago, firstdefence said: Out of curiosity what value do you get from this file? Exported using the downloaded afdesign file, with the standard png export settings no modifications applied under the more options, my iMac Digital Colour Meter app reads a value of RGB 252,252,252 which in hex is #FCFCFC Thanks Firstdefence yes I notice this image is showing #FCFCFC... Strange. Maybe something is happening on upload. When I insert your image into my site I get the same issue. The image renders as #FDFDFD. Perhaps it's a Shopify issue... Quote Link to comment Share on other sites More sharing options...
Palatino Posted November 2, 2022 Share Posted November 2, 2022 Safari: #FCFCFC Vivaldi: #FDFDFD Quote Thanks to DeepL. Link to comment Share on other sites More sharing options...
lacerto Posted November 2, 2022 Share Posted November 2, 2022 This sounds like it could be related to issue where webp lossy encoding causes slight color changes when compressing png images: https://bugs.chromium.org/p/webp/issues/detail?id=340 Quote Link to comment Share on other sites More sharing options...
Newguyeddie Posted November 2, 2022 Author Share Posted November 2, 2022 23 minutes ago, lacerto said: This sounds like it could be related to issue where webp lossy encoding causes slight color changes when compressing png images: https://bugs.chromium.org/p/webp/issues/detail?id=340 Interesting, looks like that bug was resolved. Quote Link to comment Share on other sites More sharing options...
Peter M Dodge Posted November 2, 2022 Share Posted November 2, 2022 Compression in images will introduce colour issues, because the compression often "shorthands" the colour information within the file; webp as a container format is especially notorious for this. (Such as the bug linked above) Web colours are not a particularly reliable method of practical colour management; most browsers will render any web colours not in CSS differently. For web, you're better-suited working just in RGB directly and embedding the profile. Even then, some browsers will discard this profile. Unfortunately, the degree of precise colour management you'd have in print is not as viable online. lacerto 1 Quote Affinity Designer & Affinity Photo on Windows 10. I manage print from typesetting to preprint to final print & finishing at an Ottawa-area print shop. Have questions? Feel free to ask! Link to comment Share on other sites More sharing options...
Newguyeddie Posted November 2, 2022 Author Share Posted November 2, 2022 12 minutes ago, Peter M Dodge said: Compression in images will introduce colour issues, because the compression often "shorthands" the colour information within the file; webp as a container format is especially notorious for this. (Such as the bug linked above) Web colours are not a particularly reliable method of practical colour management; most browsers will render any web colours not in CSS differently. For web, you're better-suited working just in RGB directly and embedding the profile. Even then, some browsers will discard this profile. Unfortunately, the degree of precise colour management you'd have in print is not as viable online. Thanks Peter would that mean using a different colour profile? Quote Link to comment Share on other sites More sharing options...
Peter M Dodge Posted November 2, 2022 Share Posted November 2, 2022 (edited) What I'm meaning to say is that, even with an embedded profile, some browsers will disregard it if it "thinks" your monitor expects another one. For example, Safari on most but not all Apple devices will force it to Apple RGB. However, for best chances, make sure the ICC profile is set to your target one. Beyond that, you cannot control it if software disregards your set profile in favour of another. It's out of your hands at that point. Your specific issue seems to be some sort of conversion at your provider's end though; you might consider asking them if there is a way to override or discard it. To expand: What I think is happening here is that the web service you are using is re-encoding your image. When it is, it either is discarding colour information used by the profile (causing the browser/OS to use its defaults), or transcoding it to their own preferred profile. Edited November 2, 2022 by Peter M Dodge Quote Affinity Designer & Affinity Photo on Windows 10. I manage print from typesetting to preprint to final print & finishing at an Ottawa-area print shop. Have questions? Feel free to ask! Link to comment Share on other sites More sharing options...
Newguyeddie Posted November 2, 2022 Author Share Posted November 2, 2022 Thanks a lot Peter I think I've found my solution... Complaining to the Shopify theme developer I really appreciate all he help! firstdefence 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.