Paleta de colores desde imagen

Cómo extraer una paleta de colores de una imagen

1. Suelta una imagen en la zona de carga o haz clic en ella para elegir un archivo. Sirven JPG, PNG, WebP, GIF y cualquier otro formato que tu navegador pueda mostrar.
2. La herramienta analiza la imagen al momento y muestra sus Colores dominantes, ordenados del más al menos presente.
3. Ajusta el Número de colores (de 3 a 12) para obtener una paleta más amplia o más reducida. Desmarca Ignorar los píxeles blancos y casi blancos si el blanco es un color importante de tu imagen, por ejemplo un producto blanco o la nieve.
4. Copia un color con el botón Copiar que hay bajo su muestra, o elige un formato en Exportar como (Lista HEX, Variables CSS, Variables SCSS, Array JSON o Colores de Tailwind) y pulsa Copiar o Descargar para la paleta completa. Extraer colores vuelve a ejecutar el análisis.

Tu navegador lee la imagen de forma local. Nunca se sube a un servidor.

Cómo se obtienen los colores dominantes

Primero, la imagen se dibuja en un canvas invisible, reducida para que su lado más largo mida como máximo 512 píxeles. Así el análisis es rápido sin alterar los colores generales. Después, los píxeles se agrupan con un algoritmo de cuantización (corte por la mediana modificado, de la biblioteca de código abierto Color Thief) que trabaja en el espacio de color OKLCH, de modo que los colores que el ojo percibe como parecidos acaban en el mismo grupo.

Cada grupo se convierte en un color de la paleta, y el porcentaje que aparece bajo cada muestra es su proporción sobre los píxeles analizados. La barra situada sobre las muestras enseña esas proporciones de un vistazo. Los píxeles transparentes se omiten, y también los blancos y casi blancos mientras la opción esté marcada, porque de lo contrario los fondos blancos dominarían la mayoría de las fotos de producto y las capturas de pantalla.

Cada muestra enseña su código HEX en negro o en blanco, según cuál se lea mejor, para que la etiqueta sea legible tanto en colores claros como oscuros.

Ideas para usar la paleta de una imagen

• Identidad de marca y diseño web: crea el tema de un sitio a partir de una foto de portada o de un logotipo para que la interfaz combine con la imagen.
• Presentaciones y redes sociales: elige colores de texto y de fondo que encajen con una imagen de portada.
• Interiorismo, moda y arte: captura el ambiente de una foto, un cuadro o una muestra de tela.
• Visualización de datos: toma los colores de los gráficos de una ilustración usada en el mismo informe.

Los colores extraídos son medias de muchos píxeles, así que pueden verse algo menos vivos que el punto más saturado de la foto. Si necesitas el color exacto de un píxel concreto, usa mejor un cuentagotas de color para imágenes.