Hex colors in style class different than rendered

Ignition
1

For some reason it would appear that the hex code for the colors I am using are different in the style class versus what is actually being rendered in both the preview and the webpage.

Here is an image from the Edit Style window:

image
image862×765 40.8 KB

and here is an image of the rendered text using the style:

image
image140×145 1.11 KB

Using PowerToys color picker reveals different results. When hovering over the preview in the Edit Styles box, it shows the correct hex value. When hovering over the text, the red gives #a94235 and the yellow gives #ece561. Any insight into what is going on here would be really helpful!

2

Check the silly stuff first:

  1. Make sure that you're not overriding the style class with direct style properties on the component(s).
  2. Make sure that you've selected the correct item in the Property Editor style.classes dropdown for the item in question.
3

I tried this out and the colors were off for me too, but they were not the same off color that you have. I inspected the element in the browser and the RGB was correct, maybe this means the browser is rendering them wrong or a windows setting? I wonder if someone can give this a try on linux.

Edit.
It looks like its a chromium issue relating to it using the color profile windows has for your monitor. You can go to chrome://flags/, search for Force color profile and set it to sRGB. Disabling hardware acceleration fixes it too but has other implications.

2 Likes
4

Based on some other things I found the color profile seems to be the most likely culprit, though unfortunately it did not work on my machine. I ended up just using the color picker on the image as rendered in browser and Ignition designer to match the colors. I will revisit this once I get to test on other computers if the issue still persists.

For future people who run across this: I also tried using ImageMagick to edit the color profile on the image I was using as a source for the colors, which did not work for me but may be worth trying anyway.

5

Looks like the color profile is causing the issue. I’ve had this problem too, and changing the browser to use sRGB usually helps. Using a color picker to match the colors, like you did, is a good idea for now.