Extractor de colores de imagen
Extrae colores dominantes de imágenes localmente en el navegador.
Cómo ayuda
Extrae colores dominantes de imágenes localmente en el navegador.
- Genera paletas desde un color base.
- Comprueba el contraste antes de publicar texto UI.
- Exporta CSS, Tailwind, SCSS, JSON, SVG y PNG.
- Funciona localmente en el navegador.
Cómo funciona el extractor de colores de imagen
Cargar una imagen en el navegador y obtener los colores dominantes es completamente client-side: ningún upload a servidor, ninguna API externa. Tu imagen nunca sale de tu dispositivo.
El algoritmo redimensiona la imagen, muestrea sus pixeles con la Canvas API del navegador y luego agrupa los colores similares con k-means en el espacio RGB. El resultado son seis colores — la media de cada grupo — ordenados por dominancia, es decir por cuantos pixeles muestreados cubre cada grupo.
Los colores extraídos no siempre son los más bonitos o directamente útiles: una imagen fotográfica tendrá a menudo grises neutros entre los dominantes, porque son realmente los tonos que cubren más superficie. La herramienta no aplica ningún filtro de neutros: devuelve los seis grupos más extensos tal cual, y tú eliges cual usar como base.
Después de la extracción haz clic en un color para fijarlo como base de la paleta: desde ahí las otras herramientas de Chromoforge generan escalas completas, verifican el contraste o crean gradientes.
Ejemplos prácticos
- Marca desde fotografía: el cliente te da una foto de producto como referencia cromática. Extrae los colores dominantes y usaios como punto de partida para la paleta UI.
- Matching UI-imagen: tienes un hero con una foto y quieres que los botones y textos tengan colores coherentes con ella. Extrae los dominantes y elige el más saturado como acento.
- Análisis de competidores: carga el screenshot del sitio de un competidor para entender rápidamente su paleta sin tener que usar un color picker manual en cada elemento.
- Arte e ilustraciones: extrae la paleta de una ilustración para crear materiales relacionados (slides, redes sociales, folletos) con la misma armonía cromática.
FAQ — Extractor de colores de imagen
¿Qué formatos de imagen son compatibles?
PNG, JPEG y WebP, hasta 8 MB por archivo. Los demás formatos — GIF, AVIF, SVG y los RAW como CR2, NEF o ARW — se rechazan con un mensaje de error: conviértelos antes a uno de los tres formatos admitidos.
¿Mi imagen se envia a un servidor?
No. El procesamiento ocurre completamente en el navegador mediante la Canvas API. El archivo se lee en memoria local, se muestrea y luego se descarta. No hay ningún upload, ninguna conexión de red para el procesamiento de la imagen.
¿Por qué los colores extraídos no coinciden con los que esperaba?
El clustering agrupa pixeles similares, por lo que un gradiente estara representado por uno o pocos colores medios. Las fotografías con muchas sombras y luces producen a menudo grises como dominantes aunque contengan colores vividos: son realmente los tonos más extendidos. Si necesitas el tono vivo y no el gris, recorta la imagen sobre la zona que te interesa y vuelve a probar.