Extractor de paleta de colors d'imatge de franc
Extreu els colors dominants de qualsevol imatge usant quantificació de color k-means. Obtén codis hexadecimales dels 2-16 colors principals de la teva foto o logotip.
Deixeu un fitxer aquí o feu clic per cercar-lo
JPG, PNG, WebP, GIF, HEIC, HEIF · processat al teu dispositiu
o premeu Ctrl+V per enganxar des del porta-retalls
Consell: pots enganxar una captura amb Ctrl+V
Els teus fitxers no surten mai del teu dispositiu. Tot el processament es fa localment al teu navegador.
Usos habituals
- Extreure colors de marca del logoObteneu els codis hexadecimals exactes dels colors dominants en qualsevol logo o imatge de marca.
- Crear paletes de color web des de fotosGenerar paletes de color de lloc web coincidències a partir de fotos heroi o imatges de fons.
- Extreure colors de fotos inspiradoresTireu paletes de color de fotos de disseny interior o de moda per usar en els vostres propis projectes.
- Analitzar paletes de pintura i artEstudiar les paletes de color de pintures famoses o art propi extrayent els colors dominants.
- CSS tema d'imatgesGenerar temes de variables CSS a partir de imatges: útil per a temes dinàmics o esquemes de color generats automàticament.
Com funciona
L'extracció de colors s'executa completament al teu navegador utilitzant un algorisme de clustering k-means++ escrit a mà aplicat a dades de píxels en brut llegides des de l'API Canvas — sense servidor, sense biblioteca de tercers. La mateixa imatge i configuració de nombre de colors sempre produeixen la mateixa paleta perquè l'algorisme utilitza un generador de números pseudoaleatoris determinista (mulberry32) en lloc de Math.random.
- 1Canvas llegeix les dades de píxelsLa imatge es dibuixa en un element HTML Canvas fora de pantalla i es redueix a com a màxim 200px al seu costat més llarg. El getImageData() de l'API Canvas retorna cada píxel com a bytes RGBA en brut, i els píxels completament transparents (alfa < 128) es descarten abans que comenci el clustering.
- 2k-means++ agrupa els píxelsUn inicialitzador k-means++ sembra els centroides de manera determinista, i després l'algorisme itera fins a 20 vegades: cada píxel s'assigna al seu centroide més proper a l'espai RGB, i després els centroides es tornen a calcular com la mitjana de tots els píxels assignats. Els clústers que col·lapsen al mateix valor hexadecimal es fusionen, així que cada mostra al resultat és única.
- 3Es calculen metadades per colorCada centroide es converteix a HEX, HSL i el seu percentatge del total de píxels. La luminància relativa WCAG es calcula segons la fórmula estàndard, i les ràtios de contrast contra el negre i el blanc es mostren al costat de cada mostra.
- 4Sortida d'exportació i comptagotesLa paleta es pot copiar com a propietats personalitzades CSS, variables SCSS, un fragment de configuració de Tailwind, o JSON. Un comptagotes de clic per mostrejar mapeja el teu clic a la previsualització de nou a les coordenades exactes de píxel d'origen en un canvas de resolució completa, afegint el color d'aquell píxel a una llista separada de colors seleccionats. Es pot descarregar una franja de paleta PNG via Canvas toBlob().
La teva imatge mai es puja — es descodifica i es processa completament a la memòria del teu navegador, i només la mida del fitxer (en KB) s'informa a l'analítica.
Eines relacionades
Generador de colors aleatoris
Genera colors aleatoris d'un en un o com una paleta de cinc, bloqueja els que t'agradin, copia els valors HEX, RGB o HSL i exporta la paleta com a PNG o CSS.
Generador de paleta de colors
Genera paletes de colors complementàries, anàlogues, triàdiques i monocromàtiques a partir de qualsevol color base. Copia els codis hexadecimales amb un clic.
Selector de color i generador de paletes
Tria colors, converteix entre HEX/RGB/HSL i genera paletes harmonioses.