Teoría y criterios del color
Los fundamentos para usar el laboratorio con criterio. Despliegue cada tema y, donde encuentre un botón, pase a la herramienta correspondiente para practicarlo.
01¿Qué es el color?
La luz es energía y el color no viaja en ella: lo construye el cerebro a partir de las longitudes de onda del espectro visible (≈380–700 nm). Conos y bastones envían señales que la corteza visual interpreta como «rojo» o «azul».
Implicación de neuromarketing: si el color es una construcción perceptual, el contexto, la cultura y la expectativa lo modulan. El mismo color comunica distinto según la marca y el país.
02Las tres dimensiones del color
HSV: Hue, Saturation, Value (Matiz, Saturación, Valor).
- Matiz: el «nombre» del color y su posición en la rueda.
- Saturación (intensidad): pureza del color. Alta = vibrante; baja = apagado.
- Valor / luminosidad: claridad u oscuridad; gobierna jerarquía y contraste.
03No existe una sola rueda: RYB, RGB y CMYK
Hay tres modelos y los primarios cambian en cada uno:
- RYB (Rojo, Amarillo, Azul): modelo tradicional del arte; el más intuitivo y el que se usa para pensar armonías.
- RGB (Rojo, Verde, Azul): luz aditiva; sumarla da blanco. Pantallas y Power BI.
- CMYK (Cian, Magenta, Amarillo, Key/negro): tinta sustractiva; resta luz al papel. Impresión.
Primarios = base, no se obtienen de otros. Secundarios = mezcla de dos primarios. Terciarios = un primario con su secundario vecino. Clave: en CMYK el rojo, el verde y el azul son secundarios, y así lo dicta la lógica de la tinta.
04Armonías cromáticas
- Complementarios: opuestos; máximo contraste y tensión, ideal para CTA.
- Análogos: vecinos; armonía, calma y cercanía.
- Triádicos: tres equidistantes; equilibrio vibrante.
- Tetrádicos: dos pares de complementarios; un dominante + acentos.
- Monocromáticos: un matiz variando saturación y luminosidad; sofisticación.
05Temperatura del color
- Cálidos (rojo → amarillo): avanzan, energizan, estimulan apetito y urgencia.
- Fríos (verde → azul → violeta): retroceden, calman, transmiten confianza y distancia.
06Color, emoción y atención: los criterios del laboratorio
PAD: Pleasure, Arousal, Dominance (Placer, Activación, Dominancia).
La respuesta afectiva al color se describe sobre todo por dos ejes: valencia (agrado) y activación (arousal). El color dispara emoción antes que pensamiento.
¿Qué impulsa la atención?
- La saturación (intensidad) es la palanca intrínseca más fuerte: más pureza, más activación.
- La luminosidad por sí sola pesa poco; influye sobre todo por el contraste con el fondo (saliencia visual: un color «salta» según cuánto difiere de su entorno).
- La calidez del matiz añade impulso: los cálidos atraen más.
07El color en las marcas
Una marca se apropia de un territorio cromático en la mente del consumidor y lo defiende con consistencia.
- Rojo: energía, urgencia, apetito.
- Azul: confianza, seguridad, tecnología.
- Amarillo: optimismo y visibilidad.
- Verde: naturaleza, salud, dinero.
- Violeta: lujo, creatividad, aspiracional.
- Naranja: cercano, accesible, enérgico (color de acción).
08Color en tableros (Power BI)
En un tablero el color sirve primero a la lectura:
- Un dato, un color: una métrica en varias categorías = un color con variaciones.
- Categórico (paleta distinguible), secuencial (rampa de claro a oscuro) y divergente (neutro al centro).
- Semánticos constantes: verde = bien, ámbar = alerta, rojo = mal.
- Gris para el contexto, color para lo que importa.
09Accesibilidad y daltonismo
Cerca del 8 % de los hombres tiene daltonismo rojo-verde. Si la información se diferencia solo por color, esas personas no pueden leer su tablero.
- Refuerce el color con forma, ícono o etiqueta.
- Asegure un contraste de texto suficiente (WCAG: Web Content Accessibility Guidelines; mínimo AA = 4,5:1).
- Simule el daltonismo antes de publicar.
10Pequeñas historias del color
- Púrpura de Tiro: de un caracol marino; tan caro que se reservó a la realeza.
- Azul ultramar: de lapislázuli afgano; costó más que el oro.
- Carmín de cochinilla: rojo intensísimo de un insecto del nopal; gran exportación colonial.
- Malva de Perkin (1856): primer tinte sintético, obtenido por accidente; el color se vuelve masivo.
RefReferencias
- Itten, J. (1961). The Art of Color.
- Mehrabian & Russell (1974). Modelo PAD.
- Valdez & Mehrabian (1994). Effects of color on emotions. J. Exp. Psychology.
- Itti & Koch (2001). Computational modelling of visual attention.
- Elliot & Maier (2014). Color Psychology. Annual Review of Psychology.
- Labrecque & Milne (2012). Exciting red and competent blue.
- Few, S. (2012). Information Dashboard Design.
- Okabe & Ito (2008). Color Universal Design.
Tres modelos, una sola rueda
Elija un modelo para ver qué colores son primarios, secundarios y terciarios en cada uno, o seleccione una armonía para ver qué matices se combinan. La rueda resalta la selección y la ficha resume el criterio con sus códigos de color.
El color al servicio de la lectura
Cambie la paleta o el acento principal y observe cómo responde un tablero comercial completo. Active la simulación de daltonismo para comprobar si la información se sigue distinguiendo cuando el color deja de ayudar.
Ingresos por región (COP millones) · una métrica, un color
Portafolio · categorías
Del objetivo de comunicación al color
Seleccione lo que quiere lograr y el laboratorio propone un color de partida, lo aplica en una página de ejemplo y calcula su índice de atención. Afine la saturación y la luminosidad para ajustarlo a su marca.
Su producto, hoy
Sección de aterrizaje de ejemplo para ver el color recomendado en un contexto real.
Ver másMida el poder de atención de un color
Elija el color del texto y el color del fondo, con el selector, el código HEX o los controles de matiz, saturación y luminosidad. El probador calcula el contraste de ese par con la fórmula de WCAG 2.x, le dice si aprueba para texto normal o solo para texto grande, mide el índice de atención del color y le indica dónde rinde mejor en marketing.
Su producto, hoy
El color del texto se aplica a este titular, a este párrafo, al botón, la etiqueta y el logo, sobre el fondo elegido.
Ver más