Analizador de proporción de color 60:30:10

¿Qué es el analizador de proporción de color 60:30:10?

El analizador de proporción de color 60:30:10 agrupa los colores parecidos de la imagen subida para mostrar qué familia construye la base visual, cuál funciona como capa intermedia y cuál crea el punto de atención. No se limita a elegir los tres colores más grandes: reúne tonos cercanos en una misma familia para acercarse mejor a la sensación real de la imagen.

El resultado muestra una puntuación de ajuste respecto al reparto 60% dominante, 30% secundario y 10% de acento. También indica qué familia se acerca más al 60, si el color de acento se queda corto o se pasa, y si se concentra en una zona o se reparte por toda la imagen. Resulta útil para presentaciones, miniaturas, ilustraciones, interfaces web y análisis de referencias visuales.

Cuándo usar esta herramienta

• Análisis de escenas de animación — Cuando quieres entender por qué una escena se ve estable y dónde actúa el color focal
• Desglose de referencias de marca o miniaturas — Cuando necesitas descomponer rápidamente la estructura cromática de una referencia en porcentajes y familias
• Revisión de propuestas de UI — Cuando quieres comprobar si el color de acento de un botón se extiende demasiado o si el dominante y el secundario se separan poco
• Diseño de pósteres y banners — Cuando buscas validar rápido si fondo, zonas de apoyo y puntos de acento están bien repartidos
• Estudio de color scripts — Cuando quieres registrar la mezcla de colores y el patrón de colocación de una imagen en términos reutilizables

Funciones principales

• Agrupación automática de tonos parecidos — Incluso las variaciones sutiles se agrupan en una misma familia para acercarse más a lo que percibe el ojo.
• Puntuación de ajuste 60:30:10 — Indica con una puntuación y una frase breve cuánto se acerca la imagen al reparto ideal.
• Tarjetas de color dominante, secundario y de acento — Cada tarjeta resume el color representativo, la proporción, las características y una pista de mejora.
• Mapa de calor del color de acento — Permite ver de un vistazo si el color de acento se concentra en un punto o se dispersa por toda la imagen.
• Modo para reducir la influencia del fondo — Ayuda a corregir la lectura cuando un fondo blanco o una gran zona neutra descompensa el resultado.
• Consulta de códigos HEX/RGB/HSL — Cambia el código del color representativo al formato que necesites y cópialo al instante.

Cómo usarla

1. Subir una imagen — Sube la escena, miniatura, póster o captura de UI que quieras analizar.
2. Elegir el modo de análisis — Si la imagen tiene un gran fondo blanco o negro, conviene dejar activado el modo predeterminado de reducir la influencia del fondo.
3. Revisar la puntuación y los roles — Empieza por la puntuación superior y por la proporción dominante, secundaria y de acento.
4. Mirar el mapa de calor y las recomendaciones — Revisa dónde se agrupa el acento y si conviene reducirlo o reforzarlo.
5. Usar los códigos — Toma los valores HEX, RGB o HSL de las tarjetas y familias para aplicarlos en tu trabajo de diseño.

¿Cómo funciona el análisis?

La herramienta reduce la imagen para muestrearla, descarta los píxeles transparentes, crea grupos de color y después fusiona los tonos más cercanos. A partir de esos grupos representativos reparte los papeles de color dominante, secundario y de acento, y calcula el área que ocupa cada uno.

El color de acento no se elige simplemente como el tercer color más grande. La herramienta prioriza los grupos pequeños pero con suficiente saturación y contraste como para atraer la mirada. Después divide la imagen en una cuadrícula para medir dónde aparece ese acento y si el foco visual queda concentrado o disperso.

El resultado sirve como apoyo interpretativo. No entiende por sí solo la narrativa de la escena, la iluminación, la profundidad o la intención de marca, así que conviene revisar la lectura junto con el contexto real.

Preguntas frecuentes