Paleta de colores de una imagen
Elige una imagen y el número de colores. La herramienta reduce una copia de la imagen, agrupa los píxeles parecidos con k-means y lista los colores principales con su proporción en la imagen.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Suelta una imagen en el recuadro o haz clic para elegir un archivo.
- Con el control deslizante, fija el número de colores, de 3 a 12.
- Copia la lista HEX o el bloque de variables CSS.
La paleta se recalcula al instante al mover el control; la imagen se lee una sola vez. Junto a cada color aparece su proporción, por ejemplo «38 % de los píxeles».
Cómo funciona
- La imagen se dibuja en un lienzo pequeño (como máximo 96 píxeles en el lado largo), unos 9000 píxeles, lo que mantiene rápido el agrupamiento incluso con fotos grandes.
- Se ignoran los píxeles con menos de la mitad de opacidad.
- K-means parte de k píxeles elegidos con la regla k-means++ (alejados entre sí, semilla fija), asigna cada píxel a su centro más cercano en RGB, mueve cada centro a la media de sus píxeles y repite hasta que nada cambia o se cumplen 24 rondas.
- Los colores se ordenan por número de píxeles, de mayor a menor.
Cómo usar el resultado
El bloque CSS tiene este aspecto:
:root {
--color-1: #1f3a5f;
--color-2: #e8d9b5;
}
Pégalo en una hoja de estilos y usa var(--color-1). Antes de combinar dos colores de la paleta, comprueba el contraste del texto.
Consejos
- Si la paleta muestra varios tonos casi iguales del mismo fondo, reduce el número de colores.
- Recorta la imagen al fragmento que te interesa si importan los colores del objeto y no del fondo.
Preguntas frecuentes
¿Cómo encuentra los colores?
La imagen se reduce a un máximo de 96 píxeles en su lado largo, se descartan los píxeles transparentes y el resto se agrupa en k grupos con k-means. El color medio de cada grupo es un color de la paleta; las barras se dimensionan según cuántos píxeles tiene.
¿Obtendré siempre la misma paleta?
Sí. Los puntos de partida de k-means se eligen con una semilla fija, así que la misma imagen con el mismo número de colores da siempre el mismo resultado.
¿Por qué salen menos colores de los que pedí?
Si la imagen tiene menos colores distintos que el número elegido (un logotipo plano, por ejemplo), no hay nada más que separar, así que solo se listan los colores que existen.
¿Se sube mi imagen?
No. El navegador decodifica el archivo y esta página lo procesa. En memoria solo se guarda una copia pequeña y no se envía nada.
¿Los colores de la paleta son colores exactos de píxeles?
No siempre. Cada uno es la media de un grupo de píxeles parecidos, así que puede no aparecer tal cual en la imagen. Eso lo hace representativo; para píxeles exactos usa el selector de color de imagen.