Los colores se muestran de manera diferente en los navegadores web y el software de edición de imágenes

NO debe incrustar un perfil de color en imágenes para sitios web. Agregan tamaño a la imagen, pero no agregan ninguna información útil, por lo que todo lo que hace es hacer que sus páginas sean más pesadas. Cuando guarde para Web y dispositivos desde Photoshop, asegúrese de desmarcar "Incrustar perfil de color". Como medida de seguridad, mantenga marcada la opción "Convertir a sRGB" (en caso de que esté tratando con una imagen que está en otro espacio de color y se olvide de convertirla).

Si está seleccionando sus colores de Photoshop, está bien, siempre y cuando deshabilite la administración de color para los archivos RGB. Si no está deshabilitado, puede obtener los códigos de color incorrectos. Así que deshabilite o configure el espacio de trabajo para RGB a Monitor RGB.

Si observa los siguientes ejemplos con una imagen JPG frente a PNG, verá cómo los navegadores generan un código de color. El valor superior es de Chrome y el inferior es de FireFox. Como fuente, ambos utilizan un PNG de 24 bits sin comprimir y un JPG sin comprimir.

JPG

PNG

Los valores no están demasiado lejos usando la configuración predeterminada. Sin embargo, es mejor si se asegura de no haber marcado "Incrustar perfil de color" para JPG y desactivó "Convertir a sRGB" al exportar a través de Guardar para Web desde Photoshop.

La mejor manera de obtener el resultado correcto es con PNG frente a JPG.

tl; dr: No intente microgestionar el color en el diseño web.

Cada pantalla es diferente, cada vez que usa esa pantalla, la iluminación es diferente e incluso la misma pantalla en el mismo momento puede ser vista de manera diferente por distintos usuarios. Tratar de administrar el color de tal manera que los colores se reproduzcan exactamente cada vez que esté en línea es una pérdida de tiempo y esfuerzo.

Sí, puede acercarse bastante teniendo en cuenta los perfiles de color, e incluso puede obtener una reproducción exacta de su color de Photoshop en su navegador en su pantalla. Luego, muestra su prototipo a su cliente, quien lo mirará en un dispositivo móvil o en un monitor que, en el 99,98% de los casos, está calibrado de manera diferente a su pantalla, si es que está calibrado.

Agregue a eso el hecho de que la lente de los humanos cambia ligeramente de color a medida que envejecen, lo que los hace percibir colores más amarillos a medida que envejecen. Agregue a eso el hecho de que la percepción del color cambia según la intensidad y el color de la luz que incide en la pantalla con la que se ve. Agregue a eso el hecho de que algunas pantallas pueden atenuarse o iluminarse porque el usuario lo prefiere de esa manera. Todos estos factores frustran sus esfuerzos por administrar el color.

No me malinterpretes, no estoy diciendo que no debas administrar el color y simplemente elegir algo que sea 'lo suficientemente parecido'. Intente y reproduzca sus colores con precisión, pero tenga en cuenta que Big Wide World™ hará todo lo posible para sacudir las cosas.

Teniendo en cuenta que las desviaciones que está observando son del orden de magnitud de una sola unidad RGB en una escala de 0 a 255, son, a todos los efectos prácticos, insignificantes . Si los colores se desviaran 10 unidades o más, comenzaría a preocuparme. Pero, incluso si se colocan uno al lado del otro en una pantalla, la gran mayoría de los espectadores no podrán distinguir entre dos colores que difieren solo en una unidad.

Ahórrese el tiempo y el esfuerzo y simplemente déjelo.