Selettore Colore Immagine e Palette
Selettore Colore Immagine e Palette
Clicca per selezionare colori dall'immagine, estrai automaticamente colori dominanti e palette, copia HEX/RGB ed esporta variabili CSS. Supporta PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF.
Trascina e rilascia l'immagine qui o clicca per selezionare
Supporta PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF
🚀 Avvio rapido
- Importa immagine: Trascina e rilascia o clicca per selezionare
- Cambia pannello: Desktop mostra pannello laterale; Mobile tocca pulsante in basso
- Clicca per selezionare: Clicca ovunque sull'immagine per ottenere il colore del pixel
- Copia colore: Dopo selezione copia formato HEX/RGB/CSS
- Imposta numero colori: Trascina slider o clicca preset (4/6/8/12/16/24/32)
- Estrai palette: Clicca pulsante estrai per ottenere lista colori dominanti
- Esporta CSS: Dopo estrazione esporta file variabili CSS
- Esporta JSON: Dopo estrazione esporta file dati JSON
- Reimposta: Cancella immagine corrente e risultati
📌 Scenari comuni
- Selezione colore design/poster: Estrai colori primari e di accento per schema colori
- Tema/sistema di design: Esporta variabili CSS o JSON per progetto
- Stile componenti: Estrai colori abbinati per pulsanti, tag, grafici
- Coerenza del brand: Estrai palette colori standard da risorse del brand
🎛️ Opzioni Selettore Colore e Palette
- Numero colori: 2–32, comunemente 8/12; foto/gradienti suggeriscono 16–32
- Pulsanti preset: 4/6/8/12/16/24/32 cambio con un clic
- Ordinamento: Per percentuale da alto a basso, colori più comuni prima
- Numero accanto al colore: Mostra percentuale pixel nell'immagine
🧭 Consigli d'uso
- Inizia con 8/12 per vedere effetto complessivo, poi aumenta a 16/24/32 se necessario
- Quando usi nel progetto, rinomina --color-1 in nomi semantici (es., --color-primary)
- Mantieni pagina in primo piano durante estrazione immagini grandi per evitare limitazione browser
⚠️ Limitazioni e compatibilità
- Limite file singolo 128MB, immagini molto grandi possono causare rallentamento
- Estrazione palette fa downsampling automatico per prestazioni, risultati sono colori rappresentativi
- Decodifica HEIC/HEIF dipende dal supporto browser, converti in JPG/PNG se fallisce
- Pixel trasparenti vengono ignorati o elaborati come RGBA effettivo
🔒 Privacy e sicurezza
- Tutta l'elaborazione avviene nel browser; i dati non lasciano mai il tuo dispositivo
❓ Domande frequenti
Come usare il file CSS esportato?
Metti il :root { --color-1: ... } esportato nel CSS globale, poi riferisci con var(--color-1).
A cosa serve il JSON esportato?
Per riutilizzo script/sistema di design, es., generare Design Tokens o config tema. Ogni colore include hex/css/rgb e count.
Quale numero di colori è consigliato?
UI generale: 8 o 12; icone minimaliste: 4–6; foto/gradienti: 16–32. Usa preset per confrontare rapidamente.
Perché i colori selezionati e della palette sono diversi?
Selezione con clic ottiene pixel singolo; palette quantifica intera immagine per colori rappresentativi enfatizzando tendenza complessiva.
Perché il pulsante esporta è grigio?
Devi prima cliccare 'Estrai Palette', esporta disponibile dopo completamento estrazione.
Come viene generato il nome file esportato?
Default usa nome file originale (senza estensione) + .palette-numero + .css/.json, con caratteri illegali puliti automaticamente.