¿Por qué los colores aparecen desteñidos en macOS Chrome y Safari frente a Firefox?

Estoy usando una nueva MacBook Pro de 15" con macOS 10.13.4 configurada con el perfil de color LCD en color predeterminado. Estoy haciendo un trabajo de diseño gráfico y noté que todos los colores en Chrome y Safari aparecen "descoloridos" en comparación con Firefox Este último tiene colores más saturados/vibrantes, y esto sucede con los elementos HTML/CSS nativos (es decir, no solo con las imágenes).

Aquí hay una captura de pantalla de la página de inicio de SmashingMagazine con la comparación (Chrome a la izquierda, Firefox a la derecha). Observe cómo los colores son más vibrantes en Firefox (derecha):

ingrese la descripción de la imagen aquí

Si cambio el perfil de color de mi pantalla a sRGB IEC61966-2.1, tanto Chrome como Firefox tienen el mismo aspecto.

¿Por qué es esto? Cualquier ayuda es muy apreciada.

La gestión del color es un campo minado:/ Algunos navegadores respetan los perfiles incrustados y otros no. La imagen que publicaste está en Mostrar perfil... lo cual no es bueno. Debe apuntar a sRGB si su objetivo previsto es la web. No se recomienda usar su perfil de visualización en su flujo de trabajo. Calibrar su monitor sería un buen comienzo, en lugar de usar perfiles genéricos; de lo contrario, nunca sabrá cuál fue la correcta. Como ejemplo, háganos saber los valores RGB previstos de la barra roja superior.
@Tetsujin en mi captura de pantalla de ejemplo, la barra roja superior tiene un color de fondo CSS de #d33a2c. Este valor es el mismo en ambos navegadores, pero con el mismo perfil de color de pantalla (LCD a color), Chrome/Safari muestra el color de manera diferente a Firefox. Independientemente de si el perfil de color de mi pantalla está calibrado o no, esperaría que el mismo código de color hexadecimal CSS muestre lo mismo en Chrome, Safari y Firefox. Mi pregunta es, ¿por qué no es así? Que yo sepa, no hay gestión de color (es decir, perfiles de color) para CSS.
En realidad, no es independiente de su calibración y flujo de trabajo... probablemente se deba a eso. No puedo reproducir aquí en una configuración calibrada. Ver i.stack.imgur.com/qdVpp.png capturado desde Safari a la izquierda, Chrome a la derecha, con medidor de color digital flotando en la parte superior. El color es como usted indicó [dentro de la tolerancia] en ambos, cuando se ve en sRGB. Si coloco el medidor sobre esa reproducción, que fue capturada en pantalla, recortada, luego guardada a través de Photoshop y luego publicada en imgur y vista desde Safari, sigue siendo el color correcto.
@Tetsujin, ¿los colores se ven iguales entre Chrome y Firefox? Chrome y Safari me parecen iguales, así que ese no es el problema. El problema es que todos los colores en cualquier página web en Chrome y Safari (e incluso en la aplicación Preview) aparecen muy descoloridos en comparación con Firefox. Así que parece que Firefox está haciendo algo diferente. ¿Quizás mi perfil de color "LCD a color" está en mal estado? ¿O la pantalla de mi Macbook está defectuosa? Si cambio el perfil de color de mi pantalla a "Apple RGB" o sRGB, entonces todo parece consistente en todas las aplicaciones. Pero, ¿no se supone que Color LCD es el perfil correcto para una pantalla MBP?
Ugh, nunca usé Firefox antes, absolutamente lejos de lo que debería ser. Ni idea de lo que le están haciendo. por cierto, el perfil 'correcto' para cualquier pantalla es el que genera su colorímetro y software. Los que obtienes en la lista original son estimaciones aproximadas, no mejores.

Respuestas (2)

Para que Firefox luzca como Chrome y Safari

De forma predeterminada, Firefox solo aplica la corrección de color a las imágenes que tienen perfiles de color incrustados. Puede habilitar la gestión completa del color para aplicar la corrección de color a todo, incluidos los colores definidos en CSS. Entonces debería parecerse más a Chrome y Safari.

En about:config(escriba eso en la barra de direcciones), establezca gfx.color_management.modeen 1.

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/3.5/ICC_color_correction_in_Firefox

Corrección de color, simplificada en exceso

Los monitores tienen diferentes curvas de respuesta. Por ejemplo, la diferencia entre #FF0000y #FA0000puede notarse en algunos monitores y en otros no.

Los perfiles de color contienen los sesgos para compensar esto alterando la salida real, en un intento de preservar el contraste y la precisión general de la apariencia deseada. Se pueden aplicar a monitores, impresoras y otros dispositivos.

Muchos formatos de imagen admiten perfiles de color incrustados; Piense en ello reduciéndose a descriptores sobre cómo se supone que debe verse . Si el sistema conoce las imprecisiones de su monitor, puede combinar ese perfil con el perfil de la imagen para sesgar la salida y obtener la mejor reproducción posible.

Cuando se trata de cosas sin perfiles, como los valores de color en CSS, se deben hacer algunas suposiciones sobre la intención.

Digamos que su monitor realmente produce una diferencia perceptible entre los dos colores similares mencionados anteriormente. Usas esos colores en tu CSS. La suposición es que su intención era mostrar la sutil diferencia. Algunos monitores pueden terminar mostrando el mismo color en la pantalla, a pesar de que se les envían los dos colores. La corrección de color altera los colores que se envían a la pantalla para que se reproduzca una diferencia sutil. Si quisieras que parecieran iguales, simplemente los habrías usado #FF0000y nunca te habrías molestado #FA0000, ¿verdad?

Digital Color Meter es consciente de los perfiles de color en uso. Es por eso que da diferentes valores sobre la misma imagen en dos pantallas diferentes, y diferentes valores según el espacio de color que haya seleccionado.

No es la mejor descripción de la gestión del color, pero la frase inicial lo clava y responde a la pregunta original. Firefox parece no aplicar el perfil sRGB al contenido sin etiquetar (incluidos los colores definidos por CSS), mientras que los otros navegadores sí lo hacen. Me di cuenta de esto cuando tuve que hacer coincidir el color en un gráfico PNG etiquetado con el color de fondo definido por CSS; estaba ligeramente fuera de lugar en Firefox. La solución fue simplemente eliminar el perfil de color de la imagen. Los colores aún se ven más saturados en Firefox, pero al menos son consistentes internamente.

Es divertido leer las respuestas de los "expertos". Simplemente necesitan ejecutar Firefox contra su navegador en sus monitores calibrados para ver la diferencia real. Independientemente de lo que esté haciendo Firefox (sí, Firefox, no un perfil de color, no un dispositivo de hardware), está mejorando la vitalidad y brindando una experiencia de color más cálida.

Suena como una mala idea para cualquiera que quiera un color confiable.