Paleta de colores de una imagen
Extrae los colores dominantes de una foto con agrupamiento k-means, ve qué porcentaje cubre cada uno y copia los códigos HEX, variables CSS o JSON.
Se ejecuta completamente en tu navegador. Tus datos nunca se suben.
¿Qué es Paleta de colores de una imagen?
Esta herramienta encuentra los colores principales de una imagen y los muestra como una paleta, ordenados según la parte de la imagen que cubre cada color. Elige entre 2 y 12 colores y cópialos como códigos HEX, propiedades personalizadas de CSS o JSON con valores RGB y porcentajes.
Cómo usar Paleta de colores de una imagen
- Suelta, elige o pega una imagen.
- Selecciona el Número de colores.
- Lee la barra de la paleta y la lista con HEX, RGB y porcentaje de cada color.
- Copia un código HEX concreto, o usa Copiar como variables CSS, Copiar como JSON o Copiar lista HEX.
Ejemplo
Imagen de 40×20 dividida en cuadrantes rojo, verde, azul y blanco, 4 colores
#FF0000 25%, #00FF00 25%, #0000FF 25%, #FFFFFF 25%
Cuándo usar Paleta de colores de una imagen
Úsalo para crear un esquema de colores a partir de una foto o una obra, adaptar el tema de una web a una imagen de cabecera o analizar las imágenes de una marca. Las medias de los grupos pueden diferir un poco de cualquier píxel concreto; para leer el color exacto de un píxel, usa el Selector de color de imagen.
Cómo funciona Paleta de colores de una imagen
La imagen se reduce a un máximo de 256 px en su lado más largo y se ignoran los píxeles totalmente transparentes. Los píxeles restantes se agrupan con k-means en el espacio RGB: los centros iniciales se eligen de forma determinista (el píxel más cercano al color medio y, después, repetidamente el píxel más alejado de todos los centros elegidos), y hasta 12 iteraciones reasignan los píxeles y mueven cada centro a la media de su grupo. Cada color de la paleta es la media de un grupo; su porcentaje es la proporción de píxeles de ese grupo.
Casos de Uso Comunes
- Crear el tema de colores de una web a partir de una foto de cabecera.
- Sacar los colores de marca de un logotipo o una foto de producto.
- Generar variables CSS para el moodboard de un sistema de diseño.
- Comparar el equilibrio de color de distintas imágenes.
Nota de Seguridad
Las imágenes se decodifican, procesan y codifican en local en tu navegador con la API Canvas. No se sube nada a ningún servidor.
Preguntas Frecuentes
¿Por qué los colores son ligeramente distintos de la imagen?
Cada color de la paleta es la media de un grupo de píxeles parecidos, así que puede no coincidir exactamente con ningún píxel, sobre todo en fotos con degradados.
¿Obtendré siempre la misma paleta?
Sí. El algoritmo usa una inicialización determinista, así que la misma imagen y el mismo número de colores siempre producen la misma paleta.
¿Se cuentan los píxeles transparentes?
No. Los píxeles con menos de un 50 % de opacidad se ignoran, así que un logotipo sobre fondo transparente solo da los colores del logotipo.