Extractor de paletas de colores

Cómo se saca la paleta de una imagen

Una foto de tamaño normal tiene millones de píxeles y puede contener decenas de miles de colores distintos. Reducir eso a cinco o seis colores representativos no es cuestión de coger los que más se repiten: en una fotografía casi nunca hay dos píxeles exactamente iguales, así que el color «más frecuente» suele aparecer tres o cuatro veces y no significa nada.

Corte por la mediana

El método que usa esta herramienta se llama corte por la mediana. La idea es elegante: imagina todos los píxeles de la imagen como puntos flotando en una caja tridimensional cuyos ejes son el rojo, el verde y el azul. Al principio hay una sola caja que los contiene a todos. Se mira en qué eje están más dispersos los puntos y se parte la caja justo por la mitad de ese eje, dejando la misma cantidad de píxeles a cada lado. Luego se repite con la caja que tenga más dispersión, y así hasta tener tantas cajas como colores hayas pedido. El color final de cada caja es la media de los píxeles que contiene.

La ventaja frente a otros métodos es que reparte la atención según la variedad real de la imagen, no según el área que ocupa cada tono. Un cielo enorme y uniforme se queda en uno o dos colores, mientras que un objeto pequeño pero cromáticamente rico conserva su presencia en la paleta. Eso es justo lo que quieres cuando buscas colores para una marca.

Por qué se reduce la imagen antes de analizarla

Antes de nada, la imagen se redibuja a un máximo de 120 píxeles de lado. Puede parecer poco, pero para extraer color es más que suficiente: la distribución cromática de una foto se conserva casi intacta al reducirla, y el análisis pasa de tardar segundos a ser instantáneo. Además, el suavizado que aplica el navegador al reducir actúa como un promediado que elimina el ruido del sensor, que si no ensuciaría los grupos de color.

HEX, RGB y HSL: el mismo color, tres formas de decirlo

HEX es la notación corta de la web, seis dígitos que empaquetan los tres canales. RGB los expresa por separado del 0 al 255 y es la más intuitiva cuando vienes del mundo de la pantalla. HSL describe el color por tono, saturación y luminosidad, y es la que de verdad merece la pena aprender: te permite coger un color de la paleta y generar toda una escala coherente subiendo o bajando solo la luminosidad, algo que en HEX o RGB obliga a ir a ciegas.

De seis colores a un sistema de diseño

Seis rectángulos de color no son un sistema. En cuanto te sientas a maquetar necesitas, del mismo color, una versión clarísima para un fondo, otra media para un borde y otra oscura para el texto. Por eso cada color se abre aquí en diez pasos, del 50 al 900, la numeración que usan Tailwind, Material y casi cualquier sistema moderno.

El cálculo se hace en OKLCH, no en HSL, y la diferencia se nota. HSL reparte la luminosidad de forma matemática, no perceptual: un amarillo al 50 % de luminosidad HSL se ve muchísimo más brillante que un azul al mismo 50 %, así que una rampa hecha en HSL sale desigual y los pasos claros se ensucian. OKLCH está construido sobre cómo percibe el ojo humano, de modo que todos los «500» de la paleta pesan lo mismo en pantalla. Cuando un paso pedido no cabe en la gama de sRGB no se recorta a lo bruto —eso cambiaría el tono—: se le baja la saturación hasta que entra, conservando el color.

Qué texto se lee sobre qué fondo

La pregunta que de verdad frena una maquetación no es «¿qué colores tengo?», sino «¿puedo poner este texto sobre este fondo?». La matriz de contraste la responde entera de un vistazo: cruza cada color con todos los demás, más blanco y negro, y marca cada casilla con su razón de contraste y el nivel que alcanza. 4,5:1 es el mínimo para texto normal (nivel AA), 3:1 solo sirve para texto grande y 7:1 es AAA. En muchos países ese mínimo no es una recomendación sino una obligación legal para webs de administración pública y, cada vez más, para comercio electrónico.

El 8 % que no ve tu paleta como tú

Alrededor de uno de cada doce hombres tiene alguna forma de daltonismo rojo-verde. El selector «ver todo como…» aplica las matrices de simulación de protanopía, deuteranopía y tritanopía a la vez a la foto, a las muestras, a las escalas y a la maqueta, así que ves el resultado completo, no un cuadradito de ejemplo. Y por debajo hay un aviso que compara todos los pares de la paleta y señala los que eran distintos y dejan de serlo: ese es el caso peligroso, el verde de «guardado» y el rojo de «error» convertidos en el mismo ocre. Si te aparece, la solución no suele ser cambiar de color sino añadir una segunda señal: un icono, un texto o un grosor distinto.

Qué hacer con la paleta

Una paleta extraída de una fotografía funciona bien como punto de partida, no como resultado final. Lo habitual es quedarse con un color dominante para los fondos, un acento saturado para botones y enlaces, y dos o tres neutros derivados de los tonos apagados de la foto. Conviene comprobar el contraste antes de usarlos con texto encima: cada muestra indica si le va mejor texto claro u oscuro, calculado con la luminancia relativa, que es la misma base que usan las pautas de accesibilidad.

La exportación en CSS te da directamente un bloque de variables personalizadas listo para pegar en tu hoja de estilos, con nombres numerados por luminosidad. Si trabajas con SCSS tienes el equivalente en variables de Sass, y el JSON sirve para llevarlo a configuraciones de herramientas de diseño o a un archivo de tokens.