Cómo calibrar el color para la Web
¿Cuándo el naranja se parece más al rojo? Los diseñadores web, incluso los exigentes, a veces ignoran el cambio de color en los monitores.
¿Cómo puede un diseñador web administrar el color cuando las pantallas de sus usuarios pueden ser de cualquier tamaño o color o pueden verse bajo cualquier condición de iluminación?
A diferencia de la corrección de errores HTML, que afecta a los navegadores a medida que se carga la página, obtener el color preciso es parte del proceso de trabajo del diseñador.
Es posible mantener los colores en todos los proyectos una vez que se entienden los problemas. Siga leyendo para conocer los desafíos, y las soluciones, para obtener un color uniforme en la web.
¿Puedes ver la diferencia entre las fotos de abajo?
Una de las imágenes es un poco más azul que la otra. Este "cambio de color" o tinte general de un matiz particular puede pasar desapercibido para el observador casual. Después de todo, un ligero cambio en el tono no hace que esta flor sea menos importante ni menoscaba los detalles de la gota de rocío. Es un cambio acumulativo.
Con el tiempo, las imágenes JPEG de máxima calidad y los iconos PNG de 256 colores consumen ancho de banda precioso. La complejidad en HTML aumenta la carga de trabajo del navegador con cada carga de página. A diferencia de estos problemas, que se suman a los visitantes que navegan por el sitio web, la gestión del color es un problema con el proceso de diseño . Las imágenes creadas en un monitor no calibrado se vuelven inconsistentes a lo largo del tiempo.
El cambio de color podría ir por otro nombre: falta de atención.
¿Cuándo podemos decir que el color de un gráfico coincide con la página lo suficientemente cerca? ¿En qué momento el color de una foto es demasiado inexacto? ¿Qué detalles no importan al proyecto en su conjunto? Todos pueden tener respuestas diferentes, pero nadie que tome imágenes digitales en serio puede ignorar la calibración del color.
La industria de la impresión ha tenido problemas para obtener colores precisos durante décadas. Asegurar que los mismos colores aparezcan en todas las etapas de producción, incluso en varios monitores, impresoras de oficina y prensas de gama alta, ha generado su propia industria de dispositivos de calibración, soluciones de software e incluso estándares ISO.
La comunidad de diseño web generalmente no se preocupa por los controles de prensa. Pero tal vez debería.
La web ha tenido problemas de color ya que ha tenido color
En la década de 1990, obtener un color preciso en la web significaba utilizar una paleta de 216 colores "seguros para la red". Se garantizó que estos tonos y tonalidades (en su mayoría) no se oscurecen cuando se muestran en monitores que no pueden manejar más de 8 bits de color.
Arriba hay un degradado con y sin tramado. Hoy en día, la gran mayoría de las computadoras pueden mostrar color de 24 bits o mejor (según estas estadísticas de visualización del navegador y el seguimiento de sitios web de Google Analytics, incluido Webdesigner Depot). Es decir, cada píxel puede mostrar uno de millones de colores, lo que hace que la calibración sea complicada y más crítica.
La web ha dependido durante mucho tiempo de los códigos hexadecimales, como # F35C23, para definir colores. Estas cuerdas de seis caracteres pueden mostrar una gran variedad de tonos y valores con gran precisión. Una imagen que tenga # F35C23 y un fondo CSS en # F35C23 coincidirá perfectamente.
El problema es que el código define una combinación de rojo, verde y azul, pero no siempre da como resultado un color uniforme. Las pantallas de visualización dan cuenta de la diferencia.
El blanco es blanco, excepto cuando no es
Muchos factores afectan la precisión del color al crear y editar imágenes digitales. Al igual que con la impresión, el color en la web depende del entorno en el que se crea la imagen. A diferencia de la impresión, las imágenes basadas en la web pueden cambiar cada vez que se muestran porque los monitores de los usuarios varían, y ninguna verificación de prensa puede detectar los problemas que surgen.
Aunque muchos navegadores web modernos pueden mostrar
Pero no todos los monitores están hechos de la misma manera, por lo que un tono de naranja particular puede ser inconsistente en diferentes pantallas. Estas son algunas de las causas del cambio de color:
- Los ligeros cambios entre fabricantes y modelos representan ligeras imprecisiones en matices y matices.
- Muchas pantallas (especialmente monitores CRT ) cambian de color a lo largo de los años e incluso a medida que se calientan en el transcurso de un día.
- Hasta hace poco, Mac OS X y Windows usaban dos "gammas" diferentes, lo que significaba que las imágenes en Mac parecían más brillantes que las de la PC. Mac OS X 10.6 (Snow Leopard) utiliza la gamma más común de 2.2 , que es lo mismo que Windows y muchos televisores y videocámaras.
- Las personas navegan por la web desde diferentes lugares y en diferentes condiciones de iluminación. El efecto de las luces cenitales y la cantidad y el color de la luz natural afectan la apariencia del color en la pantalla.
Arriba, diferentes calibraciones muestran que "blanco" a menudo es un color asumido:
- La imagen original, tomada bajo luz fluorescente con una cámara apunte y dispare.
- Desplazamiento de color aproximado en una Mac antes de Snow Leopard.
- Desplazamiento de color aproximado en un monitor CRT envejecido.
- Cerca del color verdadero, como se ve en la computadora portátil en la que se procesó la foto.
Un monitor ligeramente rojo puede mostrar un azul por lo demás perfecto como ligeramente púrpura, o mostrar un verde con un tinte amarillo. Los monitores demasiado brillantes eliminarán sombras y reflejos; los monitores demasiado oscuros oscurecerán las sombras y aumentarán las posibilidades de cambio de color en los reflejos. Para los diseñadores que se preocupan por estos detalles, el control de calidad es definitivamente un desafío.
PNG Color Shift
En pocas palabras, el valor gamma cambia la luminancia de una imagen mostrada. Diseñado para visualización digital, el formato de imagen PNG permite a los diseñadores agregar corrección gamma a cada imagen. Pero sin conocer la luminosidad del dispositivo de salida (es decir, sin saber el tipo de monitor en el que aparecerá la imagen), los diseñadores tienen dificultades para agregar una corrección de gamma precisa.
Esta característica se ha convertido en el problema más notorio de PNG. En la web, una imagen a veces coincidirá con los colores hexadecimales especificados en el CSS, y otras veces no lo hará, incluso si se creó con el color correcto.
Programas como PNGCrush (Windows) y PNGenie (Mac) puede eliminar el exceso de información de los archivos PNG, incluida la configuración de gamma, lo que hace que el color sea más confiable.
Otros asuntos
La prevención del cambio de color puede requerir cambios en la forma en que trabajan los diseñadores. La mala calibración del color se destacará con el tiempo. Es uno de esos detalles de diseño del que no se habla y que no debería llamar la atención.
Soluciones industriales
Varias soluciones han eliminado gran parte de las conjeturas sobre la administración del color y la prevención del cambio de color.
los Consorcio Internacional de Color (
Los perfiles ICC son archivos que contienen información sobre cómo varios dispositivos muestran el color. Las impresoras y la mayoría de las computadoras incluyen perfiles ICC integrados, porque sus fabricantes saben exactamente cómo funcionan. Pero los perfiles ICC personalizados pueden adaptar un dispositivo en particular a ciertas condiciones, por ejemplo, cuando un monitor se usa con luces fluorescentes, en lugar de al lado de una ventana grande.
Además de combinar los colores en las pantallas (y en la impresión), Adobe Flash Player 10 admite perfiles ICC , permitiendo la administración del color entre Flash e impresoras (suponiendo que la impresora del usuario final use un perfil ICC).
En 1996, Hewlett-Packard y Microsoft definieron el estándar rojo, verde, azul (
Estas soluciones técnicas son respuestas de toda la industria de organizaciones profesionales. Pero los diseñadores también pueden tomar medidas para mantener su trabajo constante a lo largo del tiempo.
Consejos para preparar una habitación para el trabajo de color
¿Qué tipo de luz estás usando ahora? Si está leyendo esto en su área de trabajo principal, y si el color exacto es importante para usted, entonces puede tomar medidas para mejorar su espacio de trabajo en este momento.
- Diez segundos por media hora
Toma un descanso rápido y mira fijamente una tarjeta gris del 18% . Ver la misma tarjeta bajo las mismas condiciones de iluminación es una buena manera de "restablecer" tus ojos. (Nota: los puristas recomiendan un 12% de tarjetas grises. También están bien, siempre y cuando uses la misma tarjeta cada vez. El punto es ver algo consistente y neutral). - Diez minutos
Mueva su monitor fuera de la luz directa. Nunca deje que una fuente de luz toque directamente la pantalla. - Quince minutos
Retire los accesorios de escritorio de color (calendarios, marcadores, fotos, carpetas, cualquier cosa que no sea gris) desde su línea de visión. Si su monitor es reflectante, no deje objetos coloridos directamente detrás de usted. - Diez minutos por día
Deje que sus ojos se adapten al entorno antes de comenzar a trabajar. Dale tiempo a tus ojos para que se adapte al espacio de trabajo, especialmente si acabas de llegar de la luz del sol o de la iluminación exterior de la noche. Si es necesario, usa un temporizador. - Diez minutos por semana
Limpia tu monitor. Usar una paño sin pelusa para eliminar suavemente las manchas de polvo y huellas dactilares, o consulte las instrucciones de limpieza en el manual del propietario. Haga lo mismo con sus lentes, si los usa. - Un día más o menos
Cubra las ventanas cercanas con pantallas gruesas o cortinas. Los principales beneficios de la luz natural son la precisión (es más natural que la luz del sol) y la disponibilidad. Pero la luz natural varía. Cambia a lo largo del día, con el clima y las estaciones. - Un fin de semana
Rodea tu espacio de trabajo con gris neutro. Pinta las paredes y reemplaza los muebles oscuros con algo insulso. Idealmente, su escritorio debería reflejar solo alrededor del 60% de la luz que lo afecta. Pintura gris neutra GTI Munsell es popular entre los fotógrafos por crear fondos neutros. - Un fin de semana o tiempo de envío
Si no puede ajustar la iluminación de su oficina, compra o monta una campana del monitor para prevenir el deslumbramiento y las condiciones cambiantes.
Consejos para calibrar su monitor
El objetivo de la calibración es eliminar los cambios de color y optimizar el rango tonal de su monitor. Las sombras deben ser ricas pero aún mostrar detalles. Los puntos más brillantes no deben ser demasiado cálidos ni demasiado fríos. A largo plazo, esto hace que el color sea preciso y consistente.
Aquí están los pasos generales:
- Caliente su monitor durante al menos 30 minutos.
- Seleccione gamma (5000-9500 ° K, gamma 1.8-2.2).
- Encuentra los mejores puntos blancos y negros.
- Equilibra el rojo, el verde y el azul para evitar el color.
- Repita este proceso mensualmente.
Muchos programas lo guiarán a través de este proceso. Adobe Gamma es una solución rápida popular para calibrar pantallas CRT. Además de ser fácil de usar, es gratis con la compra de Photoshop o Photoshop Elements. Otras soluciones son QuickGamma (Windows) y Spyder de Datacolor calibrador de hardware.
Color Me Picky
El color preciso y consistente es uno de esos detalles menores que la mayoría de las personas, incluidos los diseñadores web, eligen ignorar ante los errores de análisis, los estándares web, la información errónea del cliente y la buena presión de los plazos de entrega.
Pero también es uno de esos elementos que contribuyen a una mejor experiencia global. Una vez que los diseñadores comiencen a notar desviaciones en matices y sombras fangosas, no desear hacer un mejor trabajo se volverá inusual.
Escrito exclusivamente para Webdesigner Depot por Ben Gremillion. Ben es un freelance diseñador web quien resuelve los problemas de comunicación con un mejor diseño.