Sirs0ri, 12 days ago

@h4kor let me make a guess about what's happening here: you're not blending in SRGB (ie, using LCH) and the one of the two colours you're mixing is "a colour" (ie not black, transparent or the same colour as the other one) but has full transparency?

I ran into a similar issue when I experimented with color-mix and transparencies, see the bottom-left "with white (lch)" square here: https://codepen.io/Sirs0ri/pen/qBwZLym

In Chrome it should have the exact same colour as all the others, in FF it has a slightly changed hue

h4kor, 11 days ago

@Sirs0ri yes, I mixed in hsl with white to lighten the colors. I guess both browsers treat them differently as the hue of white can be any value. My guess is that Firefox handles this special case better and Chrome just uses hue=0° for white, leading to the red tint.

this is my mix:

--primary-l1: color-mix(in hsl, var(--primary), #fff 20%);

Came to the same conclusion sleeping over it and fixed it just now by changing to srgb :D.

keithjgrant, 11 days ago

@h4kor @Sirs0ri yeah most browsers have/had a number of bugs in the new color spaces. Chrome has fixed a lot of them IIRC. https://keithjgrant.com/posts/2023/11/problematic-color-gradients-and-workarounds/