Extraer los colores de una imagen
Sube una foto, un logotipo o una captura de pantalla para obtener su paleta de colores dominantes con el porcentaje de cada uno, y usa el cuentagotas para conocer el código HEX y RGB exacto de cualquier punto.
Pasa el puntero sobre la imagen.
Colores elegidos con el cuentagotas
Paleta dominante (de mayor a menor superficie)
Todo el análisis se hace en tu navegador: la imagen no se sube a ningún servidor.
Cómo usar la herramienta
- Arrastra una imagen (JPG, PNG, WebP, GIF…) o elígela desde tu dispositivo. Al abrir la página se analiza una ilustración de ejemplo.
- Cuentagotas: mueve el puntero por la imagen y la lupa te muestra los píxeles ampliados con su código. Haz clic para copiar el HEX y guardarlo en la lista de colores elegidos.
- Paleta dominante: elige entre 3 y 12 colores. Cada muestra indica qué porcentaje de la imagen representa; púlsala para copiar su código.
- Copia o descarga la paleta como variables CSS para usarla directamente en tu web.
Cómo se calcula la paleta: k-means
Una foto puede tener cientos de miles de colores distintos. Para resumirla se usa el algoritmo de agrupamiento k-means:
- Se toma una muestra regular de unos 12.000 píxeles (ignorando los transparentes), suficiente para representar la imagen y rápida de procesar.
- Se eligen k colores iniciales con el método k-means++: el primero al azar y cada siguiente con más probabilidad cuanto más lejos esté de los ya elegidos. Así se evita que dos centros empiecen en el mismo tono.
- Cada píxel se asigna al centro más cercano (distancia euclídea en RGB) y cada centro se recalcula como la media de sus píxeles.
- El paso anterior se repite hasta que casi ningún píxel cambia de grupo (máximo 25 iteraciones).
El resultado son k colores «promedio» y la proporción de píxeles de cada grupo. Como la semilla aleatoria es fija, la misma imagen produce siempre la misma paleta.
Ejemplos de uso
- Branding a partir de una foto: extrae 5 o 6 colores de una imagen que transmita el estilo que buscas y ajústalos después en el generador de paletas.
- Identificar el color de un logotipo: con el cuentagotas sobre una zona plana obtienes el HEX exacto. Si el logotipo es un JPG, mira varios píxeles: la compresión altera ligeramente los colores en los bordes.
- Diseño de interiores o moda: sube la foto de una estancia o de una prenda para conocer su gama y buscar combinaciones.
- Accesibilidad: comprueba si los colores clave de un gráfico se distinguen con el simulador de daltonismo.
Consejos para mejores resultados
| Situación | Qué hacer |
|---|---|
| El fondo domina la paleta | Recorta la imagen a la zona de interés antes de subirla |
| Colores parecidos repetidos | Reduce el número de colores |
| Falta un color pequeño pero llamativo | Aumenta el número de colores o tómalo con el cuentagotas |
| Foto con mucho ruido o grano | Usa el color medio de la paleta en lugar de un píxel suelto |
Las imágenes de más de 1200 px se reducen antes del análisis; esto no cambia la paleta de forma apreciable. Si quieres pasar el resultado a HSL, CMYK u OKLCH, usa el conversor de colores, y si necesitas tomar colores de cualquier parte de la pantalla, el selector de color incluye un cuentagotas del sistema en navegadores compatibles.
Preguntas frecuentes
¿Cómo saco el código de color de una imagen?
Sube la imagen y pasa el puntero por encima: verás el HEX y el RGB del píxel bajo el cursor. Al hacer clic (o tocar en el móvil), el color se copia y se guarda en la lista de colores elegidos.
¿Por qué el color dominante no es el que yo esperaba?
El algoritmo agrupa píxeles por parecido y ordena por superficie. Un fondo grande de un color neutro puede ocupar más que el objeto llamativo. Sube el número de colores o recorta la imagen a la zona que te interesa.
¿Sale siempre la misma paleta?
Sí. El agrupamiento usa una semilla fija, así que la misma imagen con el mismo número de colores da siempre el mismo resultado.
¿Se sube mi foto a internet?
No. La imagen se lee y analiza en tu navegador con JavaScript; no se envía a ningún servidor.