Extractor de paleta de colores gratuito

Cómo funciona realmente la extracción de color

Las paletas extraídas por ordenador a partir de imágenes provienen de uno de dos algoritmos clásicos:

• Agrupamiento K-means (Lloyd, 1982; la idea subyacente se remonta a MacQueen en 1967 y Forgy en 1965). Elige K centroides de color aleatorios en el cubo de color, asigna cada píxel a su centroide más cercano, vuelve a calcular los centroides como la media de sus píxeles asignados, y repite hasta que los centroides dejan de moverse. Los K centroides finales son tus colores dominantes.
• Cuantización por corte mediano (Heckbert, SIGGRAPH 1982). Divide recursivamente el cubo de color a lo largo de su dimensión más ancha, partiendo la población de píxeles en dos mitades iguales cada vez. Tras K divisiones tienes K cajas, y el color medio de cada caja es una entrada de la paleta. Este es el algoritmo que usa la popular biblioteca de JavaScript Color Thief y, históricamente, la forma en que las imágenes de color indexado (paletas GIF, PNG) se reducen de millones de colores a 256.

Ambos métodos producen un pequeño conjunto de colores representativos a partir de una población de píxeles mucho mayor, pero hacen contrapartidas distintas. K-means es más flexible, pero sensible a la semilla aleatoria y a los valores atípicos. El corte mediano es determinista y equilibra la cobertura del espacio de color, pero puede sobrerrepresentar regiones estrechas donde la imagen resulta concentrar muchos píxeles.

Por qué la distancia RGB miente

Una advertencia sutil pero importante: agrupar en el espacio RGB simple da resultados que no siempre coinciden con la percepción humana. RGB es un sistema de coordenadas impulsado por el hardware: las distancias en él corresponden a las diferencias electrónicas entre los primarios, no a las diferencias percibidas entre colores. Dos verdes que a ti te parecen idénticos pueden tener una distancia RGB mucho mayor que un verde y un rojo que se ven obviamente diferentes.

Un agrupamiento más preciso ocurre en CIELAB (CIE 1976 L*a*b*), un espacio de color diseñado específicamente para que la distancia euclidiana en el espacio se aproxime a la diferencia percibida por el ser humano entre dos colores. Las herramientas de paletas modernas, como Adobe Color y muchos generadores de muestras de sistemas de diseño, agrupan en CIELAB o CIELCH. CSS Color Module Level 4 (W3C, 2022) añadió las funciones lab(), lch(), oklab() y oklch() para exponer estos espacios directamente a los diseñadores web, útil cuando quieres una interpolación de paleta perceptualmente uniforme. La especificación de CSS está en w3.org/TR/css-color-4.

HEX, RGB, HSL: elegir el formato correcto

Las tres notaciones describen el mismo color; son formas distintas de escribirlo.

• HEX: #RRGGBB. Seis dígitos hexadecimales, dos por canal, rango 00-FF (0-255). El formato más común de la web. Compacto, fácil de copiar y pegar, compatible en todas partes.
• RGB: rgb(255, 128, 0). Los mismos números, distinta notación. CSS añade rgba(255, 128, 0, 0.5) para el alfa.
• HSL: hsl(30, 100%, 50%). Tono (0-360°), saturación (0-100 %), luminosidad (0-100 %). Más fácil de razonar para los diseñadores: «mismo tono, más saturación» es un único ajuste numérico en HSL, pero un ajuste multicanal en RGB.
• OKLCH: oklch(70% 0.15 30). Alternativa moderna y perceptualmente uniforme a HSL. El mismo número de luminosidad significa el mismo brillo percibido en todos los tonos, algo que HSL hace famosamente mal (el amarillo con un 50 % de luminosidad parece mucho más brillante que el azul con un 50 % de luminosidad).

Para la mayoría del trabajo web, copia el HEX. Para la manipulación programática de paletas (aclarar un 10 %, desplazar el tono 30°), recurre a HSL u OKLCH, donde la operación es más limpia.

Por qué dominante ≠ útil

Una extracción ingenua de «los colores más frecuentes» a menudo decepciona. Un retrato de una persona contra un cielo azul está estadísticamente dominado por los píxeles del cielo y los tonos de piel, aunque la historia cromática visualmente interesante podría estar en la ropa del sujeto. Las fotos con grandes fondos neutros obtienen el neutro como color «dominante». La fuerte compresión JPEG introduce colores de artefacto que se agrupan como si fueran reales.

Las herramientas de paletas sofisticadas ponderan por saturación, por contraste frente al fondo dominante, por el «interés» percibido o por si un color aparece en regiones salientes detectadas por los modelos de saliencia de Itti-Koch, inspirados en la visión humana. La mayoría de las herramientas en línea, incluida esta, usan un agrupamiento simple basado en la frecuencia: rápido, predecible y suficientemente bueno para el caso común de extraer una paleta de una foto, una ilustración o una obra de arte.

Casos de uso comunes

• Coincidencia con la marca: un diseñador extrae una paleta del logotipo o la fotografía principal de un cliente para mantener el resto del sitio visualmente coherente.
• Paneles de inspiración: extraer paletas de imágenes de inspiración (fotogramas de películas, fotografías, pinturas) es la forma más rápida de empezar una exploración de color.
• Configuraciones de Tailwind / tokens de diseño: convertir una paleta extraída en propiedades personalizadas de CSS o en un mapa colors de Tailwind.
• Coincidencia de color en presentaciones: elegir colores de acento del logotipo corporativo para que la presentación no desentone.
• Fotografía de producto para comercio electrónico: usar el color dominante de cada producto como la muestra en una tarjeta de producto.
• Arte generativo & visualización de datos: alimentar paletas extraídas en código de shaders, gráficos de D3 o bocetos de Processing.
• Diseño para impresión: obtener un conjunto inicial de colores de imágenes de inspiración y luego hacerlos coincidir con Pantone o CMYK en el software de diseño para impresión.

Por qué aquí importa que sea solo en el navegador

Las fotos a menudo llevan más que la simple imagen. Los metadatos EXIF pueden incluir las coordenadas GPS donde se tomó la foto, el número de serie de la cámara, el nombre del fotógrafo y las huellas del software. Las capturas de pantalla pueden contener una interfaz confidencial, texto en borrador o una marca aún no publicada. Las fotos personales pueden contener rostros de personas que no han consentido que se las suba a algún sitio. Extraer una paleta en realidad no necesita nada de eso (solo necesita los datos de los píxeles) y no hay ninguna buena razón para enviar la imagen completa a un servidor cuando el navegador puede analizarla localmente.

Esta herramienta dibuja la imagen en un Canvas fuera de pantalla, muestrea los datos de los píxeles mediante getImageData(), ejecuta el agrupamiento y muestra el resultado. Nada sale de la página; la imagen no se conserva después de cerrar la pestaña. Las herramientas de paletas del lado del servidor (Adobe Color, el selector de imágenes de Coolors y muchas otras) suben el archivo completo. La privacidad es la contrapartida que haces con cada una.

Trabajar con el resultado

Una vez que tienes una paleta extraída, lo habitual es:

1. Depurar. Una extracción automática de 5 colores suele tener 3 colores útiles, 1 casi duplicado redundante y 1 tono medio turbio. Descarta el turbio y elimina los duplicados.
2. Asignar roles. Designa un color como el color principal de la marca, uno como el secundario, uno o dos como acentos y uno como neutro. Los sistemas de marca modernos a menudo quieren un fondo neutro, dos anclas y un acento; cinco como máximo.
3. Generar escalas claras/oscuras. A partir de cada color ancla, deriva de 9 a 11 tonalidades para los estados de hover, los fondos y las variantes teñidas. Herramientas como el generador de escalas de color de Tailwind o la sección de paletas de Refactoring UI tienen recetas muy conocidas.
4. Probar el contraste. Pasa pares de texto y fondo por un comprobador de contraste de WCAG: el Nivel AA requiere 4,5:1 para el texto de cuerpo normal y 3:1 para los componentes de interfaz grandes o en negrita.
5. Probar la deficiencia de la visión del color. Aproximadamente 1 de cada 12 hombres tiene alguna forma de daltonismo. Pasa la paleta por un simulador de daltonismo antes de fijarla.

Errores frecuentes

1. Usar los cinco colores extraídos sin editar como tu paleta de marca. La extracción automática es un punto de partida, no una paleta acabada. Depura.
2. Elegir colores de un JPEG muy comprimido. Los artefactos de compresión producen entradas de paleta falsas. Empieza desde una fuente de alta calidad si puedes.
3. Confiar en la primera ejecución sobre una foto compleja. Los distintos valores de K (número de colores) producen resultados drásticamente diferentes: prueba con 5, 8 y 12 para ver qué tamaño te encaja mejor con tu imagen.
4. Construir una paleta a partir de una foto sin tener en cuenta la página en la que vivirá. Una paleta apagada, derivada de una foto, puede verse genial de forma aislada, pero desaparecer sobre el fondo blanco de un sitio. Pruébala en contexto.
5. Ignorar el contraste. Las paletas bonitas a veces emparejan texto con un fondo a un contraste de 2:1 y no cumplen WCAG. Comprueba siempre.
6. Olvidar que «dominante» puede significar «fondo». El color más frecuente en un retrato suele ser la pared detrás del sujeto, no la ropa del sujeto.

Más preguntas frecuentes

¿Funcionará con PNG transparentes?

Sí. Los píxeles transparentes normalmente se omiten durante el muestreo, así que la paleta refleja solo el contenido visible. Si subes un PNG con un fondo transparente y un logotipo de color, la paleta extraída serán los colores del logotipo, no un neutro contaminado.

¿Y los GIF animados?

El descodificador de imágenes del navegador normalmente le da el primer fotograma a la API Canvas, así que la paleta se extrae del fotograma cero. Para una paleta que abarque todos los fotogramas, tendrías que extraer cada fotograma por separado y combinar los resultados: eso va más allá de lo que hace una herramienta de imagen estática.

¿Se sube la imagen original a algún sitio?

No. La imagen se carga en un elemento Canvas de tu navegador, los datos de los píxeles se leen mediante getImageData() y el agrupamiento se ejecuta en JavaScript en tu dispositivo. Los bytes de la imagen nunca se transmiten a ningún servidor. Esto importa cuando la fuente contiene GPS de EXIF, rostros, capturas de pantalla de interfaces confidenciales o imágenes de productos no publicadas.

¿Por qué mi paleta cambia entre ejecuciones?

K-means depende de su colocación inicial aleatoria de centroides, así que dos ejecuciones sobre la misma imagen pueden caer en mínimos locales ligeramente distintos. Las diferencias suelen ser sutiles (un casi duplicado sustituido por un matiz similar) pero visibles. El corte mediano es determinista: la misma entrada, la misma salida cada vez. Si la herramienta alguna vez da paletas notablemente diferentes para la misma imagen, está usando un algoritmo aleatorizado y eso es comportamiento esperado.

¿Puedo usar los colores extraídos con fines comerciales?

Los colores en sí no son susceptibles de derechos de autor; los valores HEX son hechos sobre los píxeles. Pero la imagen de la que has extraído sí podría serlo: extraer una paleta de la fotografía de otra persona está bien como inspiración, pero reproducir la foto o sus elementos registrados como marca es una cuestión aparte. Imita los colores, no las imágenes.

¿En qué se diferencia esto de una herramienta de selector de color?

Un selector de color lee el color en una ubicación de píxel específica que señalas. Esta herramienta analiza la imagen completa y devuelve la paleta más representativa. Trabajos distintos: los selectores son para «¿cuál es este color exacto?», los extractores de paletas son para «¿cuáles son los colores dominantes en conjunto?». Ambos tienen su lugar en el flujo de trabajo de un diseñador.