Territorio cromático de una imagen

Qué es el territorio de una imagen

Extraer una paleta responde a una pregunta pequeña: qué colores hay. El territorio responde a tres más grandes. Cuánto ocupa cada color, porque un azul que cubre el 40 % de la imagen y un rojo que cubre el 0,4 % no pueden pesar lo mismo en una decisión de diseño. Cuál es un acento: ese rojo que casi no aparece pero es lo primero que mira el ojo. Y dónde vive cada tono, porque no es lo mismo un color repartido por toda la foto que uno concentrado en una esquina. Todo se calcula en OKLab, un espacio donde las distancias entre colores se parecen a lo que percibe una persona, y no en los números RGB, que se parecen a lo que percibe un monitor.

Dominantes, raros y por qué se cuentan aparte

El análisis agrupa los píxeles parecidos y ordena los grupos por superficie. Los que superan el 7 % son dominantes: son el fondo, la pared, el cielo, lo que sostiene la imagen. Después busca en los píxeles que no encajaron en ningún grupo: si entre ellos hay un tono vivo que ocupa menos del 6,5 % pero forma una mancha conexa (píxeles pegados unos a otros, no motas sueltas), lo declara acento raro. Esa exigencia de conexión es lo que separa una flor de un artefacto de compresión. Los contadores de píxeles clásicos nunca ven estos colores: quedan sepultados bajo los dominantes.

Puntos, lupa y rampas: del píxel a la región

Un clic sobre la imagen marca un punto, y la lupa enseña el píxel exacto ampliado doce veces. Pero el píxel exacto casi nunca es el color que quieres: puede ser un grano de ruido o un brillo. Por eso cada punto devuelve una pila de seis lecturas, de la más literal a la más útil: el píxel, la media de 3 × 3 y de 11 × 11 en luz lineal (la única forma correcta de promediar colores), la media perceptual en OKLab, el territorio al que pertenece y una versión usable con la luz acotada entre 0,32 y 0,82, que es el rango donde un color aguanta en una interfaz. Debajo, la rampa de la región: la herramienta crece desde el punto por los píxeles vecinos que comparten tono y croma, y devuelve cinco paradas de luz (sombra, bajo, medio, alto, luz) sacadas de esa región real. Es una escala tonal que sale de la imagen, no de una fórmula.

Acentos externos: colores que la imagen no tiene

Cuando diseñas sobre una foto, el problema suele ser el contrario al de extraer: necesitas un color que no esté en ella, para que el botón, la etiqueta o el enlace no se confundan con el fondo. Los acentos externos se construyen en OKLCH recorriendo una rejilla de luz, croma y tono, se descartan los que no caben en sRGB, y se puntúan por su distancia al territorio y al píxel más cercano de la imagen. Cuatro familias con objetivos distintos: vivo (croma alto, para llamadas a la acción), suave (croma bajo, convive mejor), profundo (oscuro, para botones y marcas fuertes) y claro (para resaltados sutiles). Cada uno explica sus distancias en «detalles», para que la elección sea tuya y no un acto de fe.

La vista de tokens: el contraste antes de decidir

El color dominante hace de fondo, el texto se deriva de él conservando algo de su tono, y el acento elegido pinta el botón y el enlace. Cada pareja se mide con el ratio WCAG 2.1: con 4,5:1 apruebas AA en texto normal. Si el acento no llega, el enlace se ajusta solo, buscando la variante que aguante el contraste alejándose lo menos posible del original, y la nota lo dice con claridad. Las variables CSS exportadas llevan esos tokens, el territorio completo, los acentos externos y la rampa de cada punto; el JSON añade los valores OKLCH, las coberturas, las distancias y los contrastes, por si quieres auditar el resultado o llevarlo a otra herramienta.