The summary of the problem is that the default setting on my 2017 iMac 18,3 for "display profile" is "iMac", but that causes the colors rendered on web pages to be different than the specified CSS color.

The origin of the problem comes from my attempts to use Photoshop Elements to change colors in an image to be used on my website. I use the Enhance > Adjust Color > Replace Color tool with the Replacement Result box to set an exact color replacement. When viewing the image on the web page, I discover with the PE eyedropper, that the color is off from what I had intended. For example, I set the CSS color to be #800000. But the eyedropper shows the color on the page to be actually rendered as #74140c.

Worse, changes between Chrome and Firefox, with different changes in the different browsers.

After some vexing experimentation and web searching, I believe the problem is is caused by the default "Display profile" in System Preferences > Display > Color is one called "iMac".

  • If I change this to "sRGB IEC61966-2.1", then the colors shown in the eyedropper now match the CSS colors. That profile is often referenced as the "International Standard Profile".
  • A workaround to the issue I am having is to use that display profile instead of the "iMac" default, so that I get more color-accurate results.

In trying to understand what is happening, I have searched on the topic of color profiles, and many articles come up, but all with the slant of matching colors for different printers and creation of images using different software, but nothing on the rendering of web pages, and specifically the interaction between specification of CSS colors and the resulting changes on my system.

Where can I learn how to upload images to a web server so the end result controls for proper color accuracy?

  • I’ve tried to streamline this to focus a bit more on the core ask - how do you control when you upload an image to a web server that it displays properly. You might need to specify precisely how you are uploading - perhaps picking something concrete like square space. Also, you might want to upload a specific file to github so we could download and inspect precisely your image and metadata. This might be more about the files and how the web server is transforming it as opposed to the diasplay profile. Basically, why try to undo a mess in your local profile that was caused on the server. – bmike Jul 28 '18 at 18:27

You must log in to answer this question.

Browse other questions tagged .