ximg.es

Paleta de colores de una imagen

Sube una imagen, o elige una foto al azar, y obtén sus colores principales listos para tu CSS. Todo se calcula en tu navegador.

Imagen de la que se extrae la paleta
O prueba con una foto al azar de…

Formato

Cómo se calcula la paleta

La imagen se reduce a unos 96 píxeles de lado y sus colores se agrupan con k-means: el algoritmo busca los N colores que mejor representan a todos los píxeles. La agrupación se hace en el espacio OKLab, que mide las diferencias como las percibe el ojo; en RGB, dos verdes muy distintos pueden parecer «cercanos» y dos grises casi iguales, lejanos. El punto de partida no es aleatorio, así que la misma imagen da siempre la misma paleta.

Color medio y colores dominantes

No son lo mismo. Los colores dominantes son los que más superficie ocupan; el color medio es la mezcla de todos, como si la imagen se redujera a un píxel. El medio suele ser un tono apagado que no aparece tal cual en la foto, pero es el mejor fondo de carga: se parece al conjunto de la imagen y no destaca cuando llega la foto. Es el mismo color que el generador de ximg.es guarda para cada foto de su banco.

Ideas para usar la paleta

Si vas a poner texto sobre alguno de los colores, comprueba antes el contraste con el comprobador WCAG.

Preguntas frecuentes

¿Cómo saco los colores de una imagen?

Sube la imagen o arrástrala aquí. La herramienta calcula sus colores principales y te los da en HEX, RGB o HSL, con el porcentaje de la imagen que ocupa cada uno.

¿Se sube mi imagen a algún servidor?

No. Los píxeles se leen con canvas en tu navegador; la imagen no sale de tu equipo.

¿Qué diferencia hay entre color dominante y color medio?

El dominante es el que más superficie ocupa; el medio es la mezcla de todos los píxeles. El medio funciona mejor como fondo mientras carga la imagen.

¿Por qué no sale exactamente el color que veo en la foto?

Cada color de la paleta es la media de un grupo de píxeles parecidos, así que suaviza los matices. Si necesitas un píxel exacto, usa un cuentagotas.

¿Cuántos colores conviene extraer?

Entre cinco y seis bastan para una paleta de web. Con más aparecen variaciones del mismo tono.

¿Puedo usar la paleta en Tailwind?

Sí: copia el JSON o las variables CSS y úsalas en theme.extend.colors o como var(--color-1).

Más herramientas

Ver todas las herramientas · Generador de imágenes placeholder