Ir al contenido

El color en la Web: imágenes, perfiles ICC y HTML

Emparejando colores HTML/CSS con el fondo de las imágenes

En una página web sucede algo similar a lo que ocurre en un documento de diseño de página (digamos InDesign, Illustrator, QuarkXPress, CorelDraw, etc.): coexisten elementos vectoriales (los definidos en HTML/CSS) con imágenes basadas en pixeles. Por un lado, estas últimas son archivos JPEG, PNG o GIF en RGB que pueden contener (o no) un perfil ICC incrustado, y así indicar (a quien quiera escuchar) cómo debe interpretarse el color de esa imagen. Sin embargo, cuando en una página web su dieñador define (por poner un ejemplo) como color de fondo un rojo oscuro, expresado en hexadecimal como #800000 (equivalente a R: 128, G: 0, B: 0), ¿cómo sabe el navegador a qué color (en el estricto sentido colorimétrico) me estoy refiriendo?

Esto, que puede parecer una preocupación excesiva, tiene consecuencias importantes en algunos casos, aún con diseños de páginas simples. Un ejemplo aclarará este punto.

Supongamos un área rectangular de la página que contiene un determinado color de fondo (una tabla, un encabezado, un pie) dentro de la cual debo aplicar una imagen que contiene como color de fondo el mismo valor RGB que el del área, con la esperanza de que ambos (imagen y fondo) se “fundan” y así lograr un efecto homogéneo. El diseñador normalmente toma el color de fondo de la imagen en RGB, lo expresa en notación hexadecimal (Photoshop nos hace este trabajo en la ventana del “Color picker”) y lo coloca como “background color” del área en cuestión. También es válido la estrategia opuesta: tomar el color del área y modificar el fondo de la imagen para que coincidan.

¿Qué sucede si la imagen tiene incrustado un perfil de color ICC? Algunos navegadores respetan el perfil incrustado e intentan convertirlo para su correcta visualización en el monitor. En un mundo ideal, este monitor estaría calibrado y tendría su propio perfil que lo representa, con lo cual la conversión se realiza entre el espacio de color descipto por el perfil de la imagen y el espacio de color del monitor. Si todos los perfiles son los correctos, la imagen debería mostrarse correctamente.

¿Qué sucede con los colores definidos como HTML? En el mismo mundo ideal, esos colores también deberían estar referidos a algún espacio de color. La especificación CSS3 (actualmente en desarrollo) permite utilizar un atributo, el color-profile:, para indicar el perfil bajo el cual cierto elemento debe ser interpretado. Sin embargo, a pesar de que la mayoría de los navegadores modernos implementan una gran parte de CSS3, ninguno de ellos reconoce ese atributo. Entonces, ¿qué color muestra el navegador?

Al mostrar un elemento HTML, como así también una imagen sin perfil de color asociado, el navegador tiene dos posibilidades:

  • Suponer en ambos casos un determinado espacio de color predeterminado. Normalmente este espacio de color es el sRGB. En este caso, todo sucede como si todos los elementos que no incluyen un perfil se les asignara automáticamente un perfil sRGB. A partir de allí se hace la conversión al espacio del monitor.
  • Pasar los valores RGB de esos elementos e imágenes directamente al monitor. Antes del color management, este era el comportamiento regular de todos los navegadores (y de hecho de casi todos los programas), e implica no realizar conversión alguna. La mayoría de los diseñadores web (conscientemente o no) piensan en este modelo al realizar sus páginas.

Podemos anticipar, entonces, que los diseñadores que asumen esta última condición se encontrarán con sorpresas al ver su página en un navegador que respeta los perfiles de las imágenes (en el caso que esos perfiles estén incluídos), al intentar hacer coincidir el color de un elemento HTML con el fondo de una imagen. Para experimentar, he creado una serie de imágenes en distintos espacios de color, con y sin perfiles, con la intención de “fundirlas” con un fondo de color “igual”. He elegido tres espacios: el sRGB, el AdobeRGB y el Wide Gamut RGB. Las imágenes utilizadas, cuando se respeta el perfil de color de cada una, tienen el mismo color de fondo que el empleado en los elementos que los contienen, interpretando estos últimos en sRGB. En un mundo ideal, esas imágenes deberían fundirse con el fondo…

Según el navegador que uses y las opciones configuradas (cuando existen, ver el caso Firefox pueden presentarse varios casos:

  • Si tu navegador respeta los perfiles ICC, entonces la fila superior de ambos ejemplos deben mostrar la misma imagen en los tres casos, aunque casi seguro que se notará una pequeña diferencia entre el fondo del florero y el resto del cuadro;
  • Si tu navegador respeta los perfiles ICC pero tiene problemas con los perfiles que no son estrictamente de pantalla, entonces sólo las dos primeras imágenes de la fila superior de cada ejemplo se ven iguales (y la tercera luce diferente);
  • Si tu navegador NO respeta los perfiles ICC, entonces las tres imágenes difieren, pero conciden respectivamente con la fila inferior en cada ejemplo.
Publicado enColor Management

Se el primero en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *