El color en visualización

El color en un gráfico no es decoración: es un canal de codificación con reglas propias, y la mayor parte de los fallos vienen de usar una paleta de una familia para un dato de otra. La propiedad que hace funcionar una escala de color no es el tono, es la luminosidad, y entender eso resuelve de golpe el arcoíris, la accesibilidad y la impresión en blanco y negro.

Las tres familias

Cada familia sirve para un tipo de dato y tiene una propiedad que la define. Usar la equivocada no es un fallo estético: hace el gráfico ilegible o falso.

Secuencial. Para magnitudes ordenadas que van de poco a mucho: población, temperatura, número de incidencias. Su propiedad definitoria es que la luminosidad varía de forma monótona de un extremo al otro. No el tono: la luminosidad. Un lector ordena colores por lo claro u oscuro que son de forma automática y sin esfuerzo; ordenarlos por tono requiere haber aprendido un convenio.

Esa propiedad tiene tres consecuencias prácticas de golpe: la escala funciona en escala de grises, funciona impresa, y funciona con cualquier deficiencia de visión del color. Las tres salen gratis con la misma decisión.

Divergente. Para magnitudes con un punto medio con significado: variación respecto al periodo anterior, desviación respecto a un objetivo, saldo. Son dos rampas secuenciales unidas por un color neutro en el centro, y la luminosidad es monótona en cada mitad y máxima (o mínima) en el punto de encuentro.

La condición es estricta: si tu dato no tiene un punto medio con significado, no uses una divergente. Una población no lo tiene. Un cambio porcentual sí, y está en el cero.

Cualitativa. Para categorías sin orden: región, producto, tipo de evento. Aquí la propiedad es la contraria: todos los colores deben tener luminosidad parecida, para que ninguna categoría parezca más importante que otra, y deben ser máximamente distinguibles entre sí.

El límite práctico son unos ocho colores. Con más, dejan de ser distinguibles con fiabilidad, sobre todo en marcas pequeñas como los puntos de una dispersión. Si tienes doce categorías, la respuesta no es una paleta de doce: es agrupar en menos categorías, o destacar tres y dejar el resto en gris.

Y el error cruzado más común: usar una paleta cualitativa para un dato ordenado. Colores sin relación de luminosidad para representar tramos de edad obligan al lector a memorizar la leyenda porque no hay forma de deducir el orden mirando.

Por qué el arcoíris falla

La paleta arcoíris, que recorre el espectro de azul a rojo pasando por verde y amarillo, sigue siendo la que más aparece en mapas de calor y visualizaciones científicas, y tiene tres defectos documentados. Borland y Taylor publicaron en 2007 un artículo titulado precisamente «Rainbow Color Map (Still) Considered Harmful» que los recoge.

La luminosidad no es monótona. Sube hasta el amarillo y vuelve a bajar hacia el rojo. Por tanto, dos valores muy distintos pueden tener la misma luminosidad, y en escala de grises la rampa se pliega sobre sí misma. Un lector no puede ordenar los colores sin consultar la leyenda para cada uno.

Crea fronteras que no existen. El paso de verde a amarillo y el de cian a verde se perciben como saltos bruscos, mientras que dentro de la banda verde hay un tramo largo donde el color casi no cambia. El resultado es que la paleta introduce estructura visual donde los datos son suaves y borra estructura donde los datos cambian. En un mapa de temperaturas, eso significa contornos falsos.

No es uniforme perceptualmente. Distancias iguales en el dato no producen diferencias iguales percibidas.

La alternativa moderna son las rampas diseñadas explícitamente para tener luminosidad monótona y uniformidad perceptual. La más conocida se diseñó en 2015 para el ecosistema científico de Python y se ha extendido a todas partes; sus criterios de diseño fueron exactamente esos tres: percepción uniforme, luminosidad creciente y legibilidad con deficiencia de visión del color. Y para paletas por categorías y para coropletas, el trabajo de referencia sigue siendo el de Cynthia Brewer, una cartógrafa que produjo conjuntos de paletas clasificadas por familia y con indicación de cuáles son seguras para daltonismo, para impresión y para fotocopia.

La deficiencia de visión del color

Alrededor del ocho por ciento de los hombres de ascendencia europea del norte y en torno al medio por ciento de las mujeres tienen alguna forma de deficiencia en la visión del color. No es un caso extremo: en una reunión de doce personas, lo estadísticamente esperable es que haya alguien.

Las formas, por frecuencia:

• Deuteranomalía y deuteranopia: alteración o ausencia de la sensibilidad al verde. Es la más común con diferencia.
• Protanomalía y protanopia: lo mismo con el rojo. Además reduce la luminosidad percibida del rojo, así que un rojo saturado puede verse casi negro.
• Tritanopia: afecta al azul y al amarillo. Es rara.

La consecuencia inmediata: el par rojo y verde es el peor que puedes elegir, y es justo el que usa todo el mundo para «bueno y malo». Una paleta divergente de rojo a verde es ilegible para una parte apreciable de tus lectores.

Las cuatro reglas que resuelven el problema:

Varía la luminosidad, no solo el tono. Si dos colores difieren en claridad, se distinguen sin necesidad de percibir el tono. Esta única regla resuelve la mayoría de los casos.

Usa naranja y azul en lugar de rojo y verde para las divergentes. Es la sustitución estándar, se distingue bien con las tres deficiencias, y conserva la asociación cultural cálido-frío.

El color nunca es el único canal. Si el color distingue series, refuérzalo con forma de marca, con patrón de guiones, o mejor, con etiquetado directo. Esto conecta con lo que ya se trata en una gráfica de datos accesible y es requisito, no recomendación.

Comprueba en gris. Convertir el gráfico a escala de grises detecta de un vistazo casi todos los problemas de color: si en gris se sigue leyendo, la paleta está bien. Es la prueba más barata que existe y no requiere ninguna herramienta especial.

Interpolar sin ensuciar

Cuando generas una rampa continua, el espacio en el que interpolas decide el resultado.

// Interpolacion en sRGB: el punto medio entre azul y amarillo sale gris sucio
const medio = `rgb(${(0 + 255) / 2}, ${(0 + 255) / 2}, ${(255 + 0) / 2})`;

// Interpolacion en un espacio perceptual: el punto medio conserva la luminosidad
const medioBueno = 'color-mix(in oklch, #0000ff, #ffff00)';

El problema del primero es que los componentes de sRGB no son proporcionales a la luz ni a la percepción. Interpolar linealmente entre dos colores saturados de tonos opuestos pasa por el centro del cubo, que es gris, y la rampa tiene un valle de saturación y de luminosidad en la mitad. Es la causa de que tantas rampas caseras tengan un tramo central apagado.

OKLCH resuelve las dos cosas: su componente de luminosidad se corresponde razonablemente con la luminosidad percibida, y el camino entre dos colores mantiene el croma. En CSS está disponible en los cuatro motores, tanto para declarar colores como para mezclarlos con color-mix. Para generar la rampa en JavaScript y volcarla a un lienzo, la conversión es la misma idea: interpola en OKLCH y convierte a sRGB al final.

Dos decisiones más sobre las rampas continuas:

Continua o por clases. Una rampa continua muestra el gradiente y hace imposible leer un valor concreto. Una rampa dividida en cinco o siete clases permite leer el valor exacto en la leyenda a costa de introducir fronteras artificiales. Para un mapa donde alguien va a preguntar «cuánto vale esta zona», las clases son la respuesta; para mostrar un campo continuo, la rampa.

Dónde cortar. Con clases, la elección de los cortes cambia el mapa por completo: intervalos iguales, cuantiles, o cortes naturales. Cuantiles reparte las zonas por igual y esconde los valores extremos; intervalos iguales respeta la magnitud y puede dejar clases vacías. Elige a propósito y dilo en la leyenda.

// Mal: el neutro cae en el punto medio de los datos
const color = escalaDivergente().dominio([-20, 30, 80]);

const m = Math.max(Math.abs(min), Math.abs(max));
const color = escalaDivergente().dominio([-m, 0, m]);