Extractor de paleta de colores de imagen gratis

Ejemplo práctico

Pulsa «Probar una muestra» bajo la zona de arrastre. La etiqueta del archivo muestra sample-image.png y el control deslizante dice «Número de colores (6)». La muestra es un degradado verde azulado, azul cielo y violeta con una fila de círculos pastel y la palabra LibraTool, así que la mayoría de las muestras son azules. En nuestra prueba, la lista empezó con #189AE3 al 38.5 %, #0D9CB6 al 28.7 % y #4C69EB al 26.1 %, seguidos de tres pequeños con 3.1 %, 2.2 % y 1.4 %. La primera muestra dice rgb(24, 154, 227) · hsl(202, 81%, 49%) · 38.5 %, y su línea de contraste da 6.8:1 para texto negro y 3.1:1 para texto blanco. Arrastra el control a 2 y obtienes #238DD7 al 92.9 % y #ADC0CA al 7.1 %. De vuelta en 6, elige CSS en «Exportar como» y pulsa «Copiar código» para un bloque :root que empieza por --color-1: #189ae3. «Descargar franja PNG» guarda sample-image_palette.png. Tus códigos hex pueden diferir en unos pocos pasos, porque los navegadores dibujan el texto de la muestra de forma ligeramente distinta.

Qué ajustes usar y los límites

• Añade la imagen de la forma que te resulte más rápida. Suelta un archivo en la zona, pulsa «Explorar archivos» o pega una captura con Ctrl+V. En pantallas táctiles se ocultan las indicaciones de soltar y pegar, y «Explorar archivos» es la vía de entrada. Admite JPEG, PNG, WebP y GIF, y una foto HEIC de iPhone se convierte antes, con el mensaje «Convirtiendo tu foto de iPhone…». «O pega la URL de un archivo» obtiene la imagen de una dirección, lo que solo funciona si ese sitio lo permite. Volver a pegar mientras hay una imagen abierta la sustituye. «Probar una muestra» carga una imagen de prueba de 1200 × 800.
• Fija el «Número de colores» con el control deslizante. El control va de 2 a 16 y empieza en 6, y su etiqueta muestra el número, como en «Número de colores (6)». Los números bajos dan la paleta general, y los más altos recogen pequeños acentos. Puedes ver menos muestras de las que indica el control, porque los colores que se redondean al mismo hex se fusionan y los grupos vacíos se descartan. La misma imagen y el mismo número siempre dan la misma paleta, ya que la búsqueda parte de una semilla fija. Cada muestra indica su proporción de la imagen, como 38.5 %, y la mayor va primero.
• Recuerda que las muestras son promedios. La imagen se reduce a un máximo de 200 px en su lado más largo, se ignoran los píxeles mayormente transparentes (alfa por debajo de 128) y el resto se agrupan por distancia en RGB durante hasta 20 rondas. Cada muestra es el promedio de un grupo. Eso significa que puede no aparecer exactamente en ningún lugar de tu imagen, y un acento fino puede quedar mezclado en un grupo vecino. Cuando necesites un color exacto, haz clic en la imagen en lugar de fiarte de una muestra.
• Haz clic en la imagen para tomar un píxel exacto. Bajo la imagen dice «Haz clic en la imagen para tomar una muestra de color de píxel». Cada clic lee un píxel de la imagen a tamaño completo, no de la copia reducida, aunque la vista previa sea menor que el original o tenga márgenes vacíos. Las muestras tomadas aparecen como etiquetas con el código hex. Haz clic en una etiqueta para copiarla, o pulsa la × para quitarla. Un color que ya tomaste no se añade dos veces, solo se conservan los últimos 12, y los clics en el margen no hacen nada. Las muestras tomadas son independientes de las muestras de la paleta y no forman parte de las exportaciones.
• Usa la línea de contraste para elegir un color de texto. Bajo cada muestra, la línea de contraste da la relación para texto negro y para texto blanco sobre ese color, con un decimal. Las relaciones usan la fórmula de luminancia relativa de WCAG. El Color Palette Generator del sitio califica 4.5:1 como AA, así que tómalo como mínimo para el texto del cuerpo. En la muestra, #4C69EB obtiene 4.5:1 con negro y 4.6:1 con blanco, así que ninguno es cómodo, mientras que #DAEFFB obtiene 17.7:1 con negro.
• Elige la exportación que encaje con tu código. Elige CSS, Tailwind, SCSS o JSON en «Exportar como», revisa el cuadro de vista previa y pulsa «Copiar código». CSS da variables :root llamadas --color-1 y siguientes, SCSS da $color-1 y siguientes, y Tailwind da palette-1 y siguientes, todo en hex en minúsculas. JSON da cada color como hex en mayúsculas, números rgb y la proporción con un decimal. «Copiar paleta completa» copia los códigos hex separados por comas. «Descargar franja PNG» guarda una imagen de 1000 × 200 con cada color tan ancho como su proporción, con un nombre como photo_palette.png.

Problemas comunes y cómo solucionarlos

Dice «No se pudo cargar la imagen. El archivo puede estar dañado o en un formato no compatible.»

El navegador aceptó el archivo pero no pudo decodificarlo como imagen. Las causas habituales son un archivo dañado o descargado a medias, o una imagen que tu navegador no sabe dibujar. Abre el original en otro programa y guárdalo o expórtalo de nuevo como JPEG o PNG, y luego añade el archivo nuevo. La lista de muestras se queda vacía mientras se muestra este mensaje.

Dice «report.pdf es un archivo PDF que esta herramienta no puede abrir.» (con tu propio nombre de archivo y tipo).

La zona de arrastre lee los primeros bytes de un archivo, así que cambiar un PDF a .jpg no sirve. Esta herramienta abre fotos JPEG, PNG, WebP, GIF y HEIC de iPhone. Los archivos AVIF, BMP, TIFF y SVG se rechazan. Un archivo no identificable recibe «Este formato de archivo no es compatible.» y su nombre. Convierte antes la imagen a JPEG o PNG. Después del mensaje puede aparecer un enlace a una herramienta que abra el archivo. Un archivo de 0 bytes, a menudo un marcador de posición de OneDrive o iCloud, recibe su propio mensaje pidiéndote que lo descargues primero.

Dice «Ese sitio no permite que otras webs descarguen sus archivos. Descarga primero el archivo en tu dispositivo y luego suéltalo aquí.»

Esto aparece tras «O pega la URL de un archivo» y «Obtener». Tu navegador pide la imagen al otro sitio, y la mayoría de los sitios no dejan que otra web descargue sus archivos. Guarda la imagen en tu dispositivo y suéltala en la zona. Un mensaje distinto, «El enlace devolvió un error (HTTP 404)» con tu propio número de estado, significa que falló la dirección en sí, así que revísala o guarda el archivo y suéltalo aquí.

El control dice «Número de colores (12)» pero aparecen menos muestras.

Los colores que se redondean al mismo hex se fusionan y los grupos vacíos se descartan, así que las imágenes planas como logotipos, capturas de pantalla y gráficos sencillos dan menos muestras de las que pide el control. No pasa nada malo. También se ignoran los píxeles mayormente transparentes, y una imagen totalmente transparente no da ninguna muestra. Para una paleta más simple, baja el control. Para matices más sutiles, súbelo hasta 16 en una foto.

Dice «No se pudo copiar al portapapeles.»

El navegador rechazó la copia, lo que puede ocurrir cuando la página no es segura, se muestra dentro de un marco o el navegador ha bloqueado el acceso al portapapeles. El mensaje permanece hasta que muevas el control o cargues otra imagen. Haz clic una vez en la página y vuelve a intentarlo. Si sigue fallando, selecciona el texto del cuadro de vista previa en «Exportar como» y cópialo a mano, o usa «Descargar franja PNG» para guardar la paleta como imagen.

Cómo se compara

El cuentagotas de una aplicación de diseño lee píxeles exactos, y esta herramienta lo hace en cada clic. Lo que añade es la lista de colores dominantes, obtenida agrupando los colores de toda la imagen. Usa la imagen entera, así que un fondo grande dominará la lista, y no hay forma de seleccionar un área ni de quitar el fondo antes. Trabaja con una copia de 200 px como máximo, no pone nombre a los colores y no ordena por tono. Los colores se quedan en tu dispositivo, ya que la imagen se lee en el navegador. Para construir una paleta a partir de un solo color en lugar de una foto, usa el Color Palette Generator.