Para qué sirve extraer colores de una imagen
Una buena foto ya trae una paleta hecha: la luz, los materiales y el entorno se combinan de una forma difícil de inventar desde cero. El extractor convierte esa combinación en códigos HEX que puedes usar en cualquier proyecto. Los usos más habituales son:
- Moodboards y dirección de arte: reúne fotos de referencia y extrae de cada una los colores que se repiten. Así es más fácil encontrar el hilo conductor entre imágenes distintas.
- Identidad visual a partir de una foto: la fachada de una tienda, un producto artesanal o un paisaje de la zona pueden ser el punto de partida de una marca.
- Comercio electrónico: descubre el color predominante de un producto para completar los filtros por color, diseñar banners que combinen con la foto o unificar los fondos del catálogo.
- Interfaces a partir de ilustraciones: si tu web tiene una ilustración principal, extraer sus colores hace que botones, fondos e iconos encajen con la obra.
Si necesitas el código de un punto concreto y no los colores dominantes, usa el cuentagotas de imagen, que lee el color exacto del píxel en el que haces clic.
Cómo encuentra k-means los colores dominantes
Una foto normal tiene decenas de miles de tonos distintos, y muchos se diferencian en apenas una o dos unidades de RGB. El extractor tiene que agruparlos en unos pocos colores representativos, y para eso usa k-means, un algoritmo clásico de agrupamiento. Dicho de forma sencilla:
- Muestreo: la herramienta lee hasta 20.000 píxeles de la imagen. Los píxeles transparentes se ignoran, así que el fondo vacío de un PNG no aparece como un color falso.
- Puntos de partida: el algoritmo elige tantos centros como colores hayas pedido. La inicialización k-means++ reparte esos centros entre tonos claramente distintos y, como es determinista, la misma imagen siempre produce la misma paleta.
- Asignación: cada píxel se une al centro más cercano, es decir, al color al que más se parece.
- Ajuste: cada centro pasa a ser el promedio de los colores de su grupo. Los pasos 3 y 4 se repiten hasta que los grupos dejan de cambiar.
Al final, cada grupo se convierte en un color de la paleta, y el porcentaje indica qué parte de los píxeles muestreados pertenece a él. La barra proporcional lo muestra de forma visual: un color que ocupa el 40% de la imagen ocupa el 40% de la barra. Como cada color es un promedio, puede que no coincida exactamente con ningún píxel de la foto, pero representa bien la familia de tonos que resume.
Cuántos colores elegir
El control deslizante va de 3 a 12 colores. La cantidad adecuada depende de lo que busques:
| Cantidad | Resultado | Cuándo usarla |
|---|---|---|
| 3 a 5 | Solo las masas de color principales | Identidad visual, paleta de una web, fondo de un banner |
| 6 a 8 | Colores principales y algunos acentos | Moodboards, ilustración, estampados |
| 9 a 12 | Tonos de transición, sombras y detalles pequeños | Análisis de la imagen, pintura digital, retoque |
Un buen método es empezar con 5 e ir subiendo. Si falta un color que ves con claridad en la foto, como un pequeño detalle rojo, aumenta la cantidad: con pocos grupos, las zonas pequeñas quedan absorbidas por el color vecino más extenso. Si aparecen varios tonos casi iguales, redúcela.
Consejos para un resultado más limpio
- Recorta antes de subir. Si solo te interesa el producto, recorta la mesa, la pared y el suelo. Si no, el fondo puede dominar la paleta.
- Cuidado con sombras y reflejos. Las sombras generan grupos oscuros y grisáceos, y los reflejos, tonos casi blancos. Forman parte de la imagen, pero rara vez son colores que quieras en una marca. Las fotos con luz difusa dan colores más fieles al objeto.
- Los JPEG muy comprimidos tienen artefactos en bloques y bordes con tonos intermedios. Usa el archivo original o uno con menos compresión.
- Cámaras y pantallas alteran el color. El balance de blancos y el perfil de color del monitor influyen en el resultado. Para reproducir fielmente el color de un objeto físico, compara la paleta con el objeto real.
- Pega directamente desde el portapapeles. Con una captura de pantalla copiada, pulsa Ctrl+V en la página. No hace falta guardar el archivo.
Todo el procesamiento se hace en tu navegador: la imagen no se envía a ningún servidor. Cuando tengas la paleta, haz clic en un color para copiar su HEX o expórtala como variables CSS, JSON o imagen PNG. El PNG es práctico para añadirlo a un moodboard o enviarlo a un cliente. Si quieres más formas de identificar colores en fotos, consulta la guía cómo saber el color de una imagen.
De la paleta extraída a una paleta de interfaz
Los colores sacados de una foto rara vez funcionan tal cual en una interfaz. Un paisaje puede dar cinco tonos medios de luminosidad parecida, y ninguno sirve como fondo ni como color de texto. Para convertir la extracción en una paleta de UI:
- Elige el color de acento. Suele ser el color más saturado y con menor porcentaje, el que llama la atención en la foto. Será el color de botones y enlaces.
- Deriva los neutros. Toma el color dominante y crea versiones muy claras para fondos y muy oscuras para texto. Un blanco cálido como blanco roto suele funcionar mejor que el blanco puro junto a una foto cálida.
- Complétala con el generador. Introduce el acento como color base en el generador de paletas, bloquéalo y prueba reglas de armonía para los colores secundarios.
- Comprueba el contraste. Las WCAG piden al menos 4,5:1 para texto normal sobre su fondo. Prueba cada combinación en el comprobador de contraste y oscurece o aclara los tonos hasta que cumplan.
La guía cómo crear la paleta de colores de una web explica cómo repartir los papeles entre color primario, neutros y colores de estado.