El color RGB y el código hexadecimal

El color RGB (en inglés, RGB color) es la manera en que una pantalla forma cualquier color mezclando tres luces: roja (red), verde (green) y azul (blue). Cada punto de la pantalla, el píxel (pixel), es en realidad un grupo de tres lucecitas de esos colores, tan pequeñas y tan juntas que el ojo no las distingue y ve solo su suma. Encendidas a tope las tres, se ve blanco; apagadas, negro; la roja y la verde juntas, amarillo. Un código como #FF3D00, el que usan las páginas web, no es más que la receta de las tres intensidades escrita en una notación compacta.

Que basten tres luces no es una propiedad de la luz sino del ojo. Thomas Young propuso en 1802, en una conferencia ante la Royal Society de Londres, que la retina no necesitaba un receptor para cada color, sino solo unos pocos cuyas respuestas combinadas darían todos los demás. James Clerk Maxwell lo comprobó a mediados del siglo XIX con peonzas pintadas en sectores de tres colores: al girar, los sectores se fundían y, ajustando su tamaño, podía igualar casi cualquier otro color. En 1861 presentó con ese principio la primera fotografía en color de la historia: una cinta de tela escocesa que el fotógrafo Thomas Sutton retrató tres veces a través de filtros rojo, verde y azul, proyectada después con tres linternas superpuestas. Hoy se sabe que la retina tiene tres tipos de conos, y cada pantalla sigue haciendo lo que hizo Maxwell.

La figura de esta página deja mezclar las tres luces. A la izquierda está el color resultante, con un texto negro y otro blanco encima; en el centro, el píxel visto de cerca, con la luz que emite de verdad cada lucecita, y a la derecha, el código desmontado en sus tres partes.

Cada luz tiene 256 intensidades posibles, de 0 a 255, porque se guarda en un byte de ocho bits. Tres canales de 256 niveles dan 256 × 256 × 256 = 16.777.216 colores, más de los que el ojo humano distingue en la práctica, y por eso se llamó color verdadero (true color) cuando llegó a los ordenadores personales en los años noventa. El código hexadecimal escribe cada byte en base dieciséis, con las cifras del 0 al 9 y las letras de la A a la F. Dos cifras bastan para un byte, porque 16 × 16 = 256: 00 es 0, FF es 255 y 3D es 3 × 16 + 13 = 61. Así #FF3D00 se lee de dos en dos: rojo a tope, un poco de verde y nada de azul, que da el naranja con el que esta casa marca sus figuras.

Esos números no son cantidades de luz, y la figura lo delata. El valor 128, la mitad de 255, no enciende la lucecita a la mitad, sino a algo más de una quinta parte de su potencia. La razón está en la norma sRGB, propuesta en 1996 por Hewlett-Packard y Microsoft para que un mismo código diera el mismo color en todas las pantallas de internet. El ojo es mucho más sensible a los cambios entre tonos oscuros que entre tonos claros, y sRGB reparte los 256 escalones con una curva, llamada gamma, que dedica la mitad de ellos a la quinta parte más oscura de la luz, donde se notan. Es una manera astuta de aprovechar ocho bits, pero tiene una consecuencia: no se pueden sumar ni promediar colores sumando o promediando sus códigos. Mezclar #000000 y #FFFFFF a partes iguales da, en luz, un gris mucho más claro que #808080.

La otra consecuencia práctica es la del contraste. Las pautas de accesibilidad de la web (WCAG, por sus siglas en inglés), del consorcio W3C, piden que el texto normal tenga con su fondo un contraste de al menos 4,5 a 1, y de 3 a 1 para las letras grandes, para que lo lean las personas con poca vista y cualquiera con el sol dando en la pantalla. El contraste se calcula con la luminancia de cada color, que primero deshace la curva gamma y después pesa los tres canales de forma muy desigual: el verde cuenta más del 70 %, el rojo algo más del 20 % y el azul, apenas un 7 %. Por eso el amarillo puro parece tan luminoso y el azul puro tan oscuro, aunque los dos tengan un canal a tope.

Las muestras de la figura enseñan tres casos que sorprenden. El gris #777777, que muchos diseñadores usan para el texto secundario, da 4,48 a 1 sobre blanco y se queda a dos centésimas del aprobado. El azul de los enlaces, #0000EE, el que los navegadores ponen por defecto desde los primeros tiempos de la web, da más de 9 a 1 sobre blanco y casi nada sobre negro. Y el naranja #FF3D00 se lee mejor con letra negra, casi 6 a 1, que con blanca, que se queda en 3,5, aunque el instinto pida blanco sobre un color tan vivo. Comprobar el contraste antes de elegir es la regla más útil que sale de todo esto, porque el ojo de quien diseña, en una buena pantalla y a oscuras, es el peor juez.

El sistema RGB es propio de las pantallas porque suma luz. El papel funciona al revés: no emite, sino que absorbe, y las imprentas mezclan tintas cian, magenta, amarilla y negra (el sistema CMYK), que van restando colores a la luz blanca que rebota. Por eso un naranja brillante en la pantalla sale más apagado impreso, y por eso los programas de diseño avisan cuando un color RGB no tiene equivalente en tinta. La pantalla que se está mirando ahora mismo, en cambio, es exactamente lo que Maxwell proyectó en 1861: tres luces, bien medidas, y el cerebro haciendo el resto.

El sistema binario y el bit – La codificación UTF-8 – La coma flotante – Interfaz de usuario – Formato digital – Las latencias de un ordenador