WordPress changes colors (sometimes)

  • WP 6.6.2 / Hueman Pro theme 1.4.24 / Real Media Library 4.22.25 (RML)

    I have problems with something in Worpress changing colors of uploaded images. Some say that the color space is the thing you should look at. And that WP doesn’t use Adobe RGB but sRGB. And you can’t trust color pickers. But the picker gives a good direction.

    I created an image with a red dot RGB 255/0/0 in Affinity Designer with following export formats:

    Used ColorPix to pick color on the screen.

    JPG Adobe RGB

    1. Local ACDSee 254/0/0
    2. Upload of file in RML
    3. Detail view in RML 251/26/0
    4. Setting image as logo in the header; done in the customizer of Hueman Pro theme
    5. Image is 251/26/0 in all views of the customizer and in the site preview
    6. Downloaded file to PC
    7. Again local ACDSee: 254/0/0, the same on all 14 different file sizes WP created

    PNG Adobe RGB

    1. Local ACDSee 255/0/0
    2. Upload of file in RML
    3. Detail view in RML 252/26/0 (though in the preview of RML it was still 255/0/0)
    4. Setting image as logo in the header; done in the customizer of Hueman Pro theme
    5. Image in the customizer is 255/0/0; in the site preview it changes to 252/26/0
    6. Downloaded file to PC
    7. Again local ACDSee: 255/0/0, the same on all 14 different file sizes WP created

    JPG sRGB IEC61966-2.1

    1. Local ACDSee 254/0/0
    2. Upload of file in RML
    3. Detail view in RML 215/22/0
    4. Setting image as logo in the header; done in the customizer of Hueman Pro theme
    5. Image is 215/22/0 in all views of the customizer and in the site preview
    6. Downloaded file to PC
    7. Again local ACDSee: 254/0/0, the same on all 14 different file sizes WP created

    PNG sRGB IEC61966-2.1

    1. Local ACDSee 255/0/0
    2. Upload of file in RML
    3. Detail view in RML 255/0/0
    4. Setting image as logo in the header; done in the customizer of Hueman Pro theme
    5. While the red dot is shown as 255/0/0 in the customizer, the red dot turns to 216/23/0 in the site preview.
    6. Downloaded file to PC
    7. Again local ACDSee: 255/0/0, the same on all 14 different file sizes WP created

    It seems that WP doesn’t really change the color of the images, but depending on the color space and file format, it shows colors differently. And in contrast to the website https://www.wpbeginner.com/wp-tutorials/how-to-fix-image-color-and-saturation-loss-in-wordpress/ the color is closer to reality with Adobe RGB than with sRGB.

    Does anyone know a solution to get something like this behaviour fixed? Why does WP work so unreliable when showing pictures on the website? Text and red backgrounds on the website defined as RGB 255/0/0 show in 255/0/0 and the logo with a red dot as key element looks completely different to it. Can be quite frustrating.

Viewing 10 replies - 1 through 10 (of 10 total)

  • Hello @dl1mgb

    The color shift you’re seeing is likely due to the color profile conversions during upload and display. WordPress doesn’t preserve embedded Adobe RGB color profiles and defaults to sRGB, causing color discrepancies. To minimize these shifts:

    [1]. Convert images to sRGB in your editing software before uploading, as sRGB is the web standard and more consistent across devices.
    [2]. Use the ImageMagick Engine plugin, which can help retain color accuracy during image processing.
    [3]. For precise color matching, you could add custom CSS for the logo area to match background colors to specific RGB values, ensuring visual consistency.

    Thread Starter dl1mgb

    (@dl1mgb)

    Many thanks for the quick response. As you may have already read in my post, I uploaded the files initially as sRGB files. And WP still has a problem with it. Maybe WP says it converts it to sRGB, but not to the IEC-thing, maybe another sRGB color space? But which one?

    Take a look at the image you uploaded in the Media Library after the upload. Not in the editor or in the frontend, but in the file that WordPress saved there when you saved it. If the color distortion already occurs there, it is due to the PHP image libraries that are used by WordPress when uploading and saving.

    If the image is already wrong there, contact your hoster so that they can set the PHP image libraries correctly. WordPress may also provide information on this under Tools > Site Health.

    If the above does not apply, it would be great if you could provide us with both the original file and the one you uploaded to WordPress. Then we could see what is wrong with it.

    Thread Starter dl1mgb

    (@dl1mgb)

    The file itself doesn’t change. It is the same color before upload to the media library and after download the saved files by WP. It is still the same color in the customizer on the left side of the screenshot I initially sent. It just turns to another color when shown on the website itself. In the customizer preview on the right side of the screenshot and on the final website.

    I can provide the images, just tell me how. I don’t know if this forum keeps the files when I upload them here or changes them too.

    Moderator Support Moderator

    (@moderator)

    Moderator note: https://make.www.ads-software.com/support/handbook/appendix/adding-screenshots-on-the-forums/

    Thread Starter dl1mgb

    (@dl1mgb)

    Screenshot is absolutely not the problem. I already managed it in my initial message ??

    It is about providing image files and keep their original data…

    The easiest way would be to upload the files to your site (once in WordPress, once via FTP) and then show the links here. Of course, you can also use any other service, but please note that image hosters in particular could also falsify images. In your case, the original would be very interesting to be able to evaluate it.

    Thread Starter dl1mgb

    (@dl1mgb)

    OK, here are the images I generated with Affinity Publisher and uploaded to WP through Real Media Library: https://dl1mgb.com/temp/wp/images_uploaded_to_wp.zip

    And these are the files I downloaded from WP through FTP: https://dl1mgb.com/temp/wp/images_downloaded_from_wp.zip

    I’ve been looking at it for a while now and honestly can’t see the difference. But maybe I’m not graphically gifted enough. Technically, however, I would say that the graphics are the same.

    I have also uploaded the graphics to my test system and can’t see any difference after the upload.

    If it is there for you, I still have the unanswered question of whether you see any anomalies under Tools > Site Health? Because PHP components would be responsible for the graphics generation (if it were to take place) and if they are set incorrectly, this could certainly lead to color differences.

    Thread Starter dl1mgb

    (@dl1mgb)

    What I forgot is to add the pictures directly downloaded from the website after they were included:

    https://dl1mgb.com/temp/wp/images_from_website.zip

    The JPG pictures have a red 254/0/0 and the PNG have a 255/0/0. Interestingly, in the browser the adobe RGB are closer to the original red than the sRGB. But when opened in the browser, they are different. So is it the browser that makes this shit? Indepentent from WordPress.

    The site health about imagemagick says this:

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.