Tutoriales

Color para la narrativa de datos: Más allá de los colores predeterminados

12 min de lectura

Las paletas de colores predeterminadas en las bibliotecas de gráficos están diseñadas para una sola cosa: la distinción visual. Dan a las series de datos adyacentes colores fáciles de diferenciar a simple vista. Esto es un buen punto de partida. Y también es el final del pensamiento de diseño incorporado en esos valores predeterminados.

Las paletas predeterminadas no consideran el tipo de datos, el público, la historia que se cuenta, el registro emocional apropiado para el tema, ni la experiencia de quienes no pueden distinguir el rojo del verde. Reemplazar los valores predeterminados con elecciones de color intencionales es una de las mejoras de mayor impacto disponibles para cualquier persona que cree visualizaciones de datos.

Esta guía cubre los tres tipos fundamentales de paletas para visualización de datos, cómo hacer accesible cada una, y cómo configurar escalas de color personalizadas en D3.js y Chart.js.

Por qué fallan los colores predeterminados de los gráficos

Asumen datos categóricos

La mayoría de los valores predeterminados en bibliotecas de gráficos están diseñados para datos categóricos: grupos discretos y no ordenados como "Producto A, Producto B, Producto C". Asignan a cada categoría un color visualmente distinto. Si tus datos son en realidad secuenciales (temperatura de frío a caliente) o divergentes (margen de votos de fuertemente demócrata a fuertemente republicano), una paleta categórica es activamente engañosa. Implica que todos los valores son igualmente diferentes entre sí, cuando en realidad existe un orden significativo o un punto central relevante.

Crean una falsa equivalencia

Cuando cada serie de datos recibe un color brillante y saturado, cada serie reclama visualmente la misma importancia. Pero la mayoría de las historias de datos tienen jerarquía. Una línea en el gráfico es la historia; las demás son contexto. Tratarlas de forma idéntica en peso de color obliga al lector a interpretar los datos por sí mismo en lugar de dejar que el color guíe su atención.

No se prueban para deficiencia de visión del color

La ceguera roja-verde (deuteranopia y protanopia combinadas afectan aproximadamente al 8% de los hombres) hace que la combinación clásica rojo/verde de las paletas predeterminadas sea inútil como distinción. La paleta "Category10" de D3 incluye tanto #E15759 (un rojo apagado) como #76B7B2 (un verde azulado apagado); estos son distinguibles para la mayoría de los espectadores con daltonismo. Pero la similar "Tableau10" incluye un rojo y un verde casi idénticos para los deuteranopes. Estas diferencias importan, y los valores predeterminados no las hacen evidentes.

Escalas de color secuenciales

Las paletas secuenciales codifican datos cuantitativos que van de bajo a alto. Funcionan variando la luminosidad (y a veces la saturación) en un solo tono o una progresión controlada de múltiples tonos. La convención es: claro = valor bajo, oscuro = valor alto (sobre fondo claro). Sobre fondo oscuro, se invierte: oscuro = bajo, claro = alto.

Secuencial de un solo tono

La paleta secuencial más simple usa un solo tono en un rango de luminosidad:

Azul de claro a oscuro:
#EFF6FF → #DBEAFE → #BFDBFE → #93C5FD → #3B82F6 → #1D4ED8 → #1E3A8A

Desde #EFF6FF hasta #1E3A8A, esto se lee como una cantidad continua. Un mapa coroplético que usa estos colores para la densidad de población comunica de inmediato la dirección: las regiones oscuras son más densas.

Las paletas de un solo tono son perceptualmente simples porque reducen el trabajo de decodificación del espectador a una sola dimensión (luminosidad). La contrapartida es que las distinciones finas entre valores adyacentes requieren una inspección atenta.

Secuencial de múltiples tonos

Las paletas secuenciales de múltiples tonos varían tanto el tono como la luminosidad, aumentando la resolución perceptual a costa de algo de intuitividad. Un ejemplo clásico es amarillo-verde-azul:

#FFFFE0 → #C7E9B4 → #7FCDBB → #41B6C4 → #1D91C0 → #225EA8 → #0C2C84

Desde el amarillo pálido #FFFFE0 hasta el azul saturado #0C2C84, esta paleta permite al espectador distinguir más gradaciones que una versión de un solo tono, mientras sigue leyéndose como ordenada. El YlGnBu de ColorBrewer es la paleta de referencia canónica para este estilo.

Las secuenciales de múltiples tonos son especialmente valiosas en mapas coropléticos y mapas de calor donde se necesitan distinciones finas en un rango continuo y hay espacio para incluir una leyenda de color.

Uniformidad perceptual en paletas secuenciales

Un requisito crítico para las paletas secuenciales es la uniformidad perceptual: cada paso visual debe sentirse como un cambio igual en cantidad. La interpolación RGB falla esta prueba porque el canal verde del RGB tiene un peso perceptual desproporcionado. Una paleta interpolada en RGB desde #0000FF hasta #FF0000 pasa por un punto medio verde desagradablemente vívido que no representa con precisión el valor medio.

Interpola las paletas secuenciales en OKLCH o CIELAB:

// D3.js — interpola en OKLCH para uniformidad perceptual
import { scaleSequential, interpolateOklch } from 'd3';

const colorScale = scaleSequential()
  .domain([minValue, maxValue])
  .interpolator(d3.interpolateOklch("#EFF6FF", "#1E3A8A"));

Escalas de color divergentes

Las paletas divergentes codifican datos que tienen un punto medio significativo: cero, un valor objetivo, una línea de base, un promedio. Usan dos tonos que divergen desde un centro neutro, haciendo que los valores por encima y por debajo del punto medio sean reconocibles de inmediato como direccionalmente diferentes.

Cuándo usar paletas divergentes

Usa una paleta divergente cuando el punto medio es relevante para la historia:

  • Margen de votos: rojo para tendencia republicana, azul para tendencia demócrata, blanco o gris claro para casi iguales
  • Anomalía de temperatura: azul para por debajo del promedio, rojo para por encima del promedio, blanco cercano para cerca del promedio
  • Ganancia/pérdida: rojo para negativo, verde para positivo, blanco para punto de equilibrio
  • Puntuación de sentimiento: frío para sentimiento negativo, cálido para positivo, centro neutro

No uses una paleta divergente cuando el punto medio es arbitrario: si divides una escala de 0 a 100 en 50 solo porque está en el medio, estás implicando que 50 significa algo, y probablemente no lo hace.

Construcción de una paleta divergente accesible

Los dos requisitos más importantes para las paletas divergentes:

  1. Los dos tonos de los extremos deben ser distinguibles por espectadores con daltonismo. El rojo-verde falla para aproximadamente el 8% de los espectadores. El azul-naranja, azul-rojo y morado-verde funcionan porque difieren en la intensidad del canal azul, que todas las formas principales de daltonismo preservan.

  2. El punto medio debe ser visualmente neutro: blanco cercano o gris claro en lugar de un color brillante que pueda parecer representar un extremo positivo o negativo.

Una paleta divergente bien estructurada de azul a rojo:

#053061 → #2166AC → #4393C3 → #92C5DE → #D1E5F0 → #F7F7F7 → #FDDBC7 → #F4A582 → #D6604D → #B2182B → #67001F

Desde el azul oscuro #053061 a través de un gris claro neutro #F7F7F7 hasta el rojo oscuro #67001F. El punto medio es claramente neutro; ambos extremos tienen igual peso visual; y como el azul y el rojo difieren suficientemente en tono, los deuteranopes aún pueden distinguir las dos direcciones (aunque percibirán el lado rojo de forma diferente; siempre incluye una leyenda con etiquetas de valor).

Paletas accesibles para visualización de datos

Simula antes de publicar

La práctica de accesibilidad más efectiva para visualización de datos es simular las deficiencias de visión del color antes de publicar. Usa el simulador de daltonismo para probar tus paletas bajo condiciones de deuteranopia, protanopia, tritanopia y acromatopsia. Si las distinciones de color de tu gráfico se colapsan en tonos indistinguibles bajo la simulación, colapsarán para los usuarios reales.

La paleta Okabe-Ito

La paleta de 8 colores de Masataka Okabe y Kei Ito es la paleta categórica segura para daltonismo más ampliamente recomendada en visualización de datos. Fue diseñada con atención explícita a la distinguibilidad bajo todas las formas principales de deficiencia de visión del color:

#000000  Negro
#E69F00  Naranja
#56B4E9  Azul cielo
#009E73  Verde azulado
#F0E442  Amarillo
#0072B2  Azul
#D55E00  Bermellón
#CC79A7  Morado rojizo

Comenzando con #E69F00 y #56B4E9 como los dos primeros colores distintos, esta paleta logra una separación visual que se mantiene bajo la deuteranopia porque se basa en diferencias de contraste azul-amarillo en lugar de contraste rojo-verde.

Esta paleta no es maximamente bella en el sentido convencional: fue optimizada para la función, no para la estética. Pero es un punto de partida confiable que puedes ajustar mientras pruebas con simuladores de visión del color.

Más allá del color: formas, patrones y etiquetas

El color no es el único canal disponible para la distinción de datos. En gráficos donde la accesibilidad es crítica, combina el color con:

Marcadores de forma: Diferentes marcadores de puntos (círculo, cuadrado, triángulo, diamante, más, cruz) para gráficos de dispersión y de líneas. Cada serie de datos recibe tanto un color único como una forma de marcador única.

Patrones de líneas: Continua, discontinua, punteada, guión-punto: combinados con el color, dan dos canales ortogonales de distinción para los gráficos de líneas.

Etiquetas directas: Colocar las etiquetas de series al final de cada línea elimina la necesidad de cruzar referencias con una leyenda de colores, lo que beneficia a todos los usuarios (no solo a los daltónicos).

Patrones en rellenos: Para gráficos de barras y de área, texturas o patrones de sombreado junto al color proporcionan una segunda codificación.

// Chart.js — combinando color con patrones de guiones en bordes
const datasets = [
  {
    label: 'Revenue',
    data: revenueData,
    borderColor: '#2166AC',
    borderDash: [],           // continua
    pointStyle: 'circle',
  },
  {
    label: 'Expenses',
    data: expenseData,
    borderColor: '#D6604D',
    borderDash: [6, 3],       // discontinua
    pointStyle: 'rect',
  },
  {
    label: 'Profit',
    data: profitData,
    borderColor: '#009E73',
    borderDash: [2, 2],       // punteada
    pointStyle: 'triangle',
  },
];

Color para énfasis y narrativa

El color en visualización de datos no solo sirve para distinguir categorías. También es una herramienta narrativa. El uso más poderoso del color en la narrativa de datos es dirigir la atención: hacer que el punto de datos que importa para tu historia sea visualmente destacado, y subordinar todo lo demás.

La regla del único brillante

Una técnica común y efectiva: usa una paleta apagada y desaturada para todos los datos de contexto, y reserva un único color brillante o saturado para el punto de datos o la serie que lleva la historia.

Un gráfico de barras que muestra ingresos por línea de producto, donde la historia es que el Producto C es el de mejor desempeño:

Producto A: #CBD5E1  (gris-azul apagado)
Producto B: #CBD5E1
Producto C: #2563EB  (azul de marca saturado — la historia)
Producto D: #CBD5E1
Producto E: #CBD5E1

El gráfico no grita cada valor por igual. Dice: "Aquí está el contexto, y aquí está el punto". Los lectores captan la narrativa más rápido y la retienen de forma más confiable.

Color secuencial para clasificaciones ordenadas

Al mostrar una clasificación donde el orden importa (los 10 mejores países por métrica, series de tiempo con ordenamiento de mejor a peor), una paleta secuencial refuerza el orden de clasificación perceptualmente. El valor más alto recibe el tono más oscuro; el más bajo recibe el más claro. El color y la posición trabajan juntos en lugar de de forma independiente.

Usar el rojo con cuidado

El rojo es el color culturalmente más cargado en visualización de datos. La mayoría de los espectadores interpretan el rojo como "malo" antes de leer cualquier etiqueta o leyenda. Esto es poderoso cuando es preciso (rojo para valores negativos, rojo para valores por encima del umbral de peligro) y confuso cuando es incidental (rojo como el primer color de categoría en una paleta categórica que no tiene eje de bueno/malo).

Reserva el rojo para datos genuinamente negativos o urgentes. Cuando el rojo es simplemente un color en una serie categórica, crea un significado fantasma que los datos no respaldan.

Configuración de escala de color en D3.js

D3 proporciona un sistema de escala de color completo a través de su módulo d3-scale-chromatic, que incluye paletas secuenciales, divergentes y categóricas diseñadas profesionalmente.

Escalas secuenciales en D3

import { scaleSequential } from 'd3-scale';
import { interpolateBlues, interpolateYlOrRd, interpolateViridis } from 'd3-scale-chromatic';

// Blues — secuencial de un solo tono
const blueScale = scaleSequential()
  .domain([0, 100])
  .interpolator(interpolateBlues);

blueScale(0);   // azul más claro
blueScale(50);  // azul medio
blueScale(100); // azul más oscuro

// Viridis — perceptualmente uniforme, seguro para daltonismo
const viridisScale = scaleSequential()
  .domain([minValue, maxValue])
  .interpolator(interpolateViridis);

Viridis merece mención especial: es una paleta secuencial perceptualmente uniforme diseñada para ser legible en escala de grises y distinguible bajo todas las formas principales de deficiencia de visión del color. Es el predeterminado en matplotlib de Python por estas razones, y la inclusión de D3 lo hace igualmente accesible en el trabajo de visualización con JavaScript.

Escalas divergentes en D3

import { scaleDiverging } from 'd3-scale';
import { interpolateRdBu, interpolatePiYG } from 'd3-scale-chromatic';

// Rojo-Azul divergente — ideal para mapas políticos, anomalías de temperatura
const rdBuScale = scaleDiverging()
  .domain([-1, 0, 1])    // [min, punto medio, max]
  .interpolator(interpolateRdBu);

rdBuScale(-1);   // rojo saturado
rdBuScale(0);    // neutro casi blanco
rdBuScale(1);    // azul saturado

// Escala divergente personalizada con colores explícitos
import { interpolateRgb } from 'd3-interpolate';

const customDiverging = scaleDiverging()
  .domain([-100, 0, 100])
  .interpolator(t => {
    // t va de 0 → 1 a través del dominio completo
    if (t < 0.5) {
      return interpolateRgb('#B2182B', '#F7F7F7')(t * 2);
    } else {
      return interpolateRgb('#F7F7F7', '#2166AC')((t - 0.5) * 2);
    }
  });

Escalas categóricas en D3

import { scaleOrdinal } from 'd3-scale';
import { schemeTableau10, schemeSet2, schemePastel1 } from 'd3-scale-chromatic';

// Tableau 10 — buena opción categórica de propósito general
const categoricalScale = scaleOrdinal()
  .domain(['A', 'B', 'C', 'D', 'E'])
  .range(schemeTableau10);

// Okabe-Ito personalizado para máxima accesibilidad
const okabeItoScale = scaleOrdinal()
  .domain(categories)
  .range(['#E69F00', '#56B4E9', '#009E73', '#F0E442', '#0072B2', '#D55E00', '#CC79A7', '#000000']);

Configuración de escala de color en Chart.js

Chart.js trabaja con valores de color de forma diferente a D3: espera arreglos de colores en lugar de funciones de escala. Generar esos arreglos para paletas secuenciales o divergentes requiere una función de escala (puedes usar los interpoladores de D3 sin la biblioteca de gráficos completa de D3) o una definición manual de paleta.

Paletas categóricas personalizadas en Chart.js

// Paleta categórica accesible (Okabe-Ito)
const accessibleColors = [
  '#E69F00',  // Naranja
  '#56B4E9',  // Azul cielo
  '#009E73',  // Verde azulado
  '#F0E442',  // Amarillo
  '#0072B2',  // Azul
  '#D55E00',  // Bermellón
  '#CC79A7',  // Morado rojizo
];

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: categories,
    datasets: [{
      label: 'Values',
      data: values,
      backgroundColor: categories.map((_, i) => accessibleColors[i % accessibleColors.length]),
      borderColor: categories.map((_, i) => accessibleColors[i % accessibleColors.length]),
      borderWidth: 1,
    }],
  },
});

Colores secuenciales para gráficos de barras ordenadas en Chart.js

// Genera una paleta secuencial azul para N barras
function generateSequentialBlues(n) {
  // Interpolador D3 usado de forma independiente
  const interpolator = d3.interpolateBlues;
  // Usa el rango 0.2 a 0.9 para evitar extremos demasiado claros y demasiado oscuros
  return Array.from({ length: n }, (_, i) => interpolator(0.2 + (0.7 * i / (n - 1))));
}

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: rankedItems,
    datasets: [{
      data: rankedValues,
      backgroundColor: generateSequentialBlues(rankedItems.length),
    }],
  },
});

Coloración de énfasis en Chart.js

// Resalta una barra, atenúa todas las demás
const highlightIndex = 2;  // índice de la barra protagonista

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      data: values,
      backgroundColor: values.map((_, i) =>
        i === highlightIndex ? '#2563EB' : '#CBD5E1'
      ),
    }],
  },
});

Resumen

Reemplazar los colores predeterminados de los gráficos con elecciones intencionales requiere entender cuál es la estructura de los datos (categórica, secuencial o divergente), qué historia se quiere contar y quién es el público. Los principios clave:

  • Hacer coincidir el tipo de paleta con la estructura de los datos: paletas categóricas para grupos no ordenados, secuenciales para cantidades con dirección, divergentes para cantidades con un centro significativo.
  • Probar cada paleta bajo simulación de deficiencia de visión del color antes de publicar.
  • Agregar forma, patrón o etiquetas directas como canal de codificación secundario junto al color.
  • Usar el peso del color (saturación y brillo) para dirigir la atención hacia los datos que llevan la historia.
  • Configurar los interpoladores perceptualmente uniformes de D3 o los arreglos de colores personalizados de Chart.js para reemplazar los valores predeterminados diseñados para variedad visual, no para precisión visual.

El color en visualización de datos es en última instancia una decisión de comunicación, no estética. La paleta correcta hace que la estructura y la historia de los datos sean legibles sin requerir que el espectador descifre el significado de las elecciones de color. Cuando el color funciona bien en la visualización de datos, los lectores apenas lo notan: notan el insight.

Colores relacionados

black

#000000

blue

#0000FF

green

#008000

lightyellow

#FFFFE0

orange

#FFA500

purple

#800080

red

#FF0000

teal

#008080

Marcas relacionadas

Target

Expect more. Pay less.

1 color

Line

Closing the distance

2 colores

Circle

3 colores

Matter

2 colores

Must

2 colores

One

2 colores

Herramientas relacionadas

Generador de paletas

Genera paletas de colores armoniosas usando esquemas complementarios, análogos, triádicos y complementarios divididos.

Abrir herramienta

Simulador de daltonismo

Simula cómo se ven los colores con deuteranopía, protanopía, tritanopía y acromatopsia.

Abrir herramienta