Saltar ao contido principal
LibraTool logoLibraTool

Extractor de paleta de cores de imaxe de balde

Extrae as cores dominantes de calquera imaxe usando cuantización de cor k-means. Obtén os códigos hexadecimais das 2 a 16 cores principais da túa foto ou logo.

Funciona sen conexión unha vez cargado

Solta aquí un ficheiro ou fai clic para buscalo

JPG, PNG, WebP, GIF, HEIC, HEIF · procesado no teu dispositivo

ou preme Ctrl+V para pegar desde o portapapeis

Explorar ficheiros

Consello: podes pegar unha captura con Ctrl+V

Os teus ficheiros nunca saen do teu dispositivo. Todo o procesamento realízase localmente no teu navegador.

Usos habituais

  • Extrae cores de marca dun logoObtén os códigos hexadecimais exactos das cores dominantes en calquera logo ou imaxe de marca.
  • Constrúe paletas de cores web a partir de fotosXera paletas de cores web que coincidan a partir de fotos de herois ou imaxes de fondo.
  • Extrae cores de fotos de inspiraciónExtrae paletas de cores de fotos de deseño de interiores ou moda para usar nos teus proxectos.
  • Analiza paletas de pintura e arteEstuda paletas de cores de pinturas famosas ou a túa arte extrayendo as cores dominantes.
  • Tema CSS de imaxesXera temas de variables CSS de imaxes - útil para temas dinámicos ou esquemas de cores xerados automaticamente.

Como funciona

A extracción de cores execútase enteiramente no teu navegador usando un algoritmo de agrupamento k-means++ escrito a man aplicado a datos de píxeles en bruto lidos da API Canvas — sen servidor, sen biblioteca de terceiros. A mesma imaxe e configuración de conto de cores sempre producen a mesma paleta porque o algoritmo usa un xerador de números pseudoaleatorios determinista (mulberry32) en lugar de Math.random.

  1. 1
    Canvas le os datos de píxeles
    A imaxe debúxase nun elemento Canvas HTML fóra de pantalla e reduce a mostraxe a un máximo de 200px no seu lado máis longo. O getImageData() da API Canvas devolve cada píxel como bytes RGBA en bruto, e os píxeles totalmente transparentes (alfa < 128) descártanse antes de comezar o agrupamento.
  2. 2
    k-means++ agrupa os píxeles
    Un inicializador k-means++ sementa os centroides de forma determinista, e despois o algoritmo itera ata 20 veces: cada píxel asígnase ao seu centroide máis próximo no espazo RGB, e despois os centroides recalcúlanse como a media de todos os píxeles asignados. Os grupos que colapsan ao mesmo valor hexadecimal fusiónanse, así que cada mostra no resultado é única.
  3. 3
    Calcúlanse os metadatos por cor
    Cada centroide convértese a HEX, HSL e a súa parte do total de píxeles (porcentaxe). A luminancia relativa WCAG calcúlase segundo a fórmula estándar, e as proporcións de contraste contra negro e branco móstranse xunto a cada mostra.
  4. 4
    Saída de exportación e conta-gotas
    A paleta pódese copiar como propiedades personalizadas CSS, variables SCSS, un fragmento de configuración de Tailwind ou JSON. Un conta-gotas de clic para mostrar mapea o teu clic na vista previa de volta ás coordenadas exactas do píxel orixe nun lenzo de resolución completa, engadindo a cor dese píxel a unha lista separada de cores escollidas. Pódese descargar unha franxa de paleta PNG mediante Canvas toBlob().

A túa imaxe nunca se sube — decodifícase e procésase enteiramente na memoria do teu navegador, e só o tamaño do ficheiro (en KB) infórmase á analítica.

Ferramentas relacionadas

🎨

Xerador de cores aleatorias

Xera cores aleatorias unha a unha ou como paleta de cinco, bloquea as que che gusten, copia os valores HEX, RGB ou HSL e exporta a paleta como PNG ou CSS.

Próbao
🎨

Xerador de paletas de cor

Xera paletas de cor complementarias, análogas, triádicas e monocromáticas a partir de calquera cor base. Copia os códigos hexadecimais cun só clic.

Próbao
🎨

Selector de cores e xerador de paletas

Escolle cores, converte entre HEX/RGB/HSL e xera paletas harmoniosas.

Próbao

Preguntas frecuentes