L'analizzatore di colore e immagine di PixelVault estrae palette, istogrammi e informazioni sul contrasto da qualsiasi immagine, interamente nel tuo browser. Aggiungi una foto, un'illustrazione o uno screenshot e ottieni all'istante i suoi colori dominanti come codici hex copiabili, completi della percentuale che ciascun colore occupa. È un modo veloce per estrarre una palette da un'immagine che ami senza installare nulla né caricare il tuo file.
Dai colori dominanti puoi generare armonie complementari, analoghe, triadiche e monocromatiche per costruire uno schema coerente, ed esportare l'intera palette come semplice HEX, variabili CSS, variabili SCSS, JSON o una configurazione Tailwind — pronta da incollare direttamente nel tuo progetto. Per un'analisi più approfondita, gli istogrammi RGB e di luminanza rivelano l'esposizione e l'equilibrio tonale, un'anteprima in scala di grigi mostra come si legge un'immagine senza colore e la verifica del contrasto WCAG ti dice se una coppia di testo e sfondo supera i livelli AA e AAA per l'accessibilità.
Come funziona
PixelVault campiona l'immagine a risoluzione ridotta e raggruppa i colori simili per trovare quelli dominanti, converte tra spazi colore per costruire le armonie e legge i valori dei pixel per calcolare gli istogrammi. I rapporti di contrasto usano la formula della luminanza relativa WCAG 2.1. Tutto questo avviene sui pixel già caricati nel tuo browser.
Perché l’elaborazione locale è importante
Analizzare localmente tiene le tue immagini — lavori per clienti, progetti non ancora pubblicati, foto private — fuori dalla rete. Non c'è alcun caricamento né alcun server che possa conservarne una copia, e i risultati sono istantanei perché i pixel sono già nella pagina.
Formati supportati
- JPG — Analizzato direttamente.
- PNG — Trasparenza rispettata durante il campionamento dei colori.
- WebP — Pienamente supportato.
Casi d’uso comuni
- Estrai una palette di colori da una foto o da un riferimento di design.
- Genera schemi di colore coordinati per un brand o una UI.
- Verifica il contrasto tra testo e sfondo per l'accessibilità.
- Esamina esposizione e tono con gli istogrammi RGB e di luminanza.