¿Por qué 'filtro: invert(1) hue-rotate(180deg)' se convierte en rojo en un color de pinza peachy?

Question

En CSS, cuando se aplica filtro: invert(1) hue-rotate(180deg) a una imagen, el color rojo se convierte en peachy-pink. ¿Por qué es esto, y qué se puede hacer para utilizar CSS para invertir una imagen y todavía tener rojo aspecto como rojo? Ejemplo: La misma imagen con filter: invert(1) hue-rotate(180deg) aplicada: Actualización: Se recomendó en la respuesta inicial para aplicar el filtro anterior al html elemento y luego aplicar la imagen. Los colores todavía están apagados. Aquí está el resultado:

apiartisan · Accepted Answer

Para entender por qué necesitamos realizar algunas matemáticas.

Si empezamos con el invert(1) (el más fácil) usaremos f(x) = (255 - x)^ref. Así que... rgb(255,0,0) se convertirá rgb(0,255,255)

Para el hue-rotate(180deg) Es más complejo. Considerando la especificación obtendremos la siguiente matriz:

-0.574  1.43  0.144
 0.426  0.43  0.144
 0.426  1.43 -0.856

Así que tendremos

R' =  -0.574*R  1.43*G  0.144*B = 1.43*255 + 0.144*255 = 401.37
G' =   0.426*R  0.43*G  0.144*B = 0.43*255 + 0.144*255 = 146.37
B' =   0.426*R  1.43*G -0.856*B = 1.43*255 - 0.856*255 = 146.37

Entonces un color final rgb(255,146.37,146.37) que no es un rojo

html {
  background: rgb(255, 146.37, 146.37)
}

¿Qué se puede hacer para utilizar CSS para invertir una imagen y todavía tener rojo aspecto como rojo?

Depende del resultado que quieras tener en cuenta los otros colores pero puedes añadir un staturate() filtro para recuperar el color rojo:

img {
 filter: invert(1) hue-rotate(180deg) saturate(10);
}

Otra vez algunas matemáticas para entender lo que está pasando. De la misma especificación y después de alguna simplicación tendremos la siguiente matriz:

 7.87  -7.15 -0.72
-2.13   2.85 -0.72
-2.13  -7.15  9.28

Así que...

 R' =  7.87*R  -7.15*G -0.72*B =  7.87*255 - 7.87*146.37 = bigger than 255
 G' = -2.13*R   2.85*G -0.72*B = -2.13*255 + 2.13*146.37 = negative
 B' = -2.13*R  -7.15*G  9.28*B = -2.13*255 + 2.13*146.37 = negative

Un color final rgb(255,0,0)

Respondida el Dec 17, 2020 a las 16:01 - por apiartisan

Gpt · Answer

El problema ocurre porque al aplicar la propiedad invert(1) junto con hue-rotate(180deg), se invierten los colores de la imagen y se rota su matiz en 180 grados. El color rojo al ser invertido se convierte en un tono peachy-pink en lugar de mantener su color original.

Una forma de resolver este problema y lograr invertir la imagen sin que el color rojo se vea alterado es aplicar solo la propiedad invert(1) sin hue-rotate(180deg). De esta manera, se invertirá la imagen sin afectar los colores de una manera tan drástica.

Por lo tanto, puedes utilizar la siguiente regla CSS para invertir la imagen sin cambiar el color rojo:

css
filtro: invert(1);

Esta regla aplicará la inversión de colores a la imagen sin afectar la tonalidad de los colores, permitiendo que el rojo mantenga su apariencia original.

Respondida el Dec 18, 2020 a las 16:02 - por Gpt

Gemini · Answer

El filtro que estás aplicando, filtro: invert(1) hue-rotate(180deg), invierte los colores de la imagen y luego gira el tono 180 grados. Esto efectivamente hace que los colores rojo y cian intercambien lugares, dando como resultado el tono rojo que ves como melocotón. Para invertir una imagen y aún tener el aspecto rojo como rojo, puedes utilizar el siguiente filtro: css filter: invert(0.5) hue-rotate(180deg) Esto invertirá los colores de la imagen en un 50%, lo que significa que el rojo se volverá cian, pero luego rotará el tono 180 grados, devolviendo el cian a rojo. Ejemplo: html Esto dará como resultado una imagen invertida donde el rojo sigue siendo rojo. Nota: El valor de 0,5 en el filtro invert() determina la cantidad de inversión que se aplica. Un valor de 1 invierte completamente los colores, mientras que un valor de 0 no los invierte en absoluto. Puedes ajustar este valor según tus preferencias.

¿Por qué 'filtro: invert(1) hue-rotate(180deg)' se convierte en rojo en un color de pinza peachy?

3 Respuestas: