¿Por qué el color hexadecimal en mi PNG es diferente del mismo código hexadecimal en el navegador?

Aquí hay un problema que parece que no puedo resolver: tengo una imagen PNG con un pequeño triángulo azul. Es un activo utilizado para un sitio web que estoy creando con un desarrollador. La apariencia de su azul está un poco apagada, solo que ligeramente diferente del mismo color hexadecimal que se coloca en los elementos a través de CSS.

Al inspeccionar el PNG en Photoshop, muestrear el azul me da exactamente el mismo código hexadecimal que el que se usa en CSS, pero se ven diferentes cuando ambos los ven en un navegador. ¿Cómo?

Debo señalar que tengo un monitor calibrado y administro los colores, pero un código hexadecimal es un código hexadecimal, sin importar en qué perfil se encuentre. Cambiar de perfil no debería influir en el código hexadecimal.

Diferentes configuraciones de color
Un código hexadecimal no es lo mismo sin importar el perfil en el que se encuentre, eso es exactamente lo que hace un perfil: decirle qué significa ese código hexadecimal.
Bueno, eso es exactamente lo que quise decir; lo que ve puede ser diferente en diferentes pantallas, pero el código sigue siendo el mismo. Ahora, ¿por qué mi pantalla muestra un color diferente para el mismo hexadecimal en CSS que el que me muestra Photoshop? Photoshop solo usa mi perfil de color general.
¿Ese perfil es sRGB IEC 61966-2-1? Si no es así, ese código hexadecimal corresponde a un color diferente.
Hola RaymonV, bienvenido a GDSE y gracias por tu pregunta. Si desea obtener más información sobre el sitio, consulte el centro de ayuda o haga ping a uno de nosotros en el chat de diseño gráfico una vez que su reputación sea suficiente (20). ¡Sigue contribuyendo y disfruta del sitio!
La configuración de color de mi Photoshop es sRGB IEC61966-2.1 y la política de gestión del color es conservar los perfiles incrustados. Por supuesto, la calibración de mi pantalla no está configurada para ese perfil (no mostraría los colores adecuados), pero al cambiar a ese perfil y desactivar la opción Conservar perfiles incrustados, el el archivo todavía me da el mismo maleficio para el azul
¿Podrías publicar la imagen?
Aquí está, se supone que el azul es #1c314c. También debo señalar que la diferencia de color es más obvia en mi máquina con Windows que en mi Mac, y mi pantalla de Windows no está calibrada. raymonvanvught.com/wp-content/uploads/2016/10/…
Bueno, funciona perfectamente bien para mí, así que no estoy seguro de cuál es el problema ... ¿podría vincular a algún lugar donde vea el problema?
No puedo compartir el sitio en el que está alojado, todavía bajo embargo, pero aquí hay una captura de pantalla que tomé de la imagen en contexto en mi máquina con Windows. Puede ver claramente que el triángulo tiene un tono diferente. raymonvanvught.com/wp-content/uploads/2016/10/color-diff.png
Por cierto, hice una ronda y miré algunas de las pantallas de mis colegas (tenemos diferentes pantallas) y se ve bien en las de ellos. Ahora eso me lleva a la conclusión de que es muy probable que la pantalla de mi PC con Windows sea la culpable. Ahora todavía me pregunto qué hace que esa pantalla actúe de esa manera...

Respuestas (1)

Esto puede suceder en combinaciones de las siguientes razones:

  • Perfil en la gestión de color del sistema operativo.
  • Perfil en la configuración de color de Photoshop.
  • Perfil incluido en tu imagen.

Su problema parece que su imagen tiene el mismo perfil que Photoshop pero difiere del perfil del sistema operativo.

Por lo tanto, el color de CSS y el color de la imagen son exactamente iguales, pero el color de CSS se muestra con el perfil de color del sistema operativo y la imagen se muestra con el perfil incluido. Como resultado, verá diferentes colores debido a la conversión diferente realizada por diferentes perfiles.

Intente abrir su imagen en Photoshop y luego vuelva a guardarla usando Guardar para Web, asegúrese de que la opción "Incrustar perfil de color" no esté marcada, luego vuelva a mirar en el navegador.

Al trabajar para web (pantallas), para evitar problemas de color:

  • Configure los mismos perfiles de color en Windows y Photoshop (sRGB sería la mejor opción).
  • No incluya (incruste) perfiles de color en las imágenes.
  • Ajuste lo que desea ver en la configuración del monitor y no a través de perfiles o controlador de tarjeta gráfica.
¿Por qué el color hexadecimal en mi PNG es diferente del mismo código hexadecimal en el navegador?
RespuestasAquíPolítica de privacidad1y, 0v