Estrattore Palette Colori da Immagine gratis

Esempio pratico

Premi «Prova un esempio» sotto l'area di rilascio. Il chip del file mostra sample-image.png, e il cursore dice «Numero di colori (6)». L'esempio è un gradiente verde acqua, azzurro cielo e viola con una fila di cerchi pastello e la scritta LibraTool, quindi la maggior parte dei campioni sono blu. Nella nostra prova l'elenco iniziava con #189AE3 al 38.5%, #0D9CB6 al 28.7% e #4C69EB al 26.1%, seguiti da tre piccoli del 3.1%, 2.2% e 1.4%. Il primo campione dice rgb(24, 154, 227) · hsl(202, 81%, 49%) · 38.5%, e la sua riga di contrasto dà 6.8:1 per il testo nero e 3.1:1 per il bianco. Trascina il cursore a 2 e ottieni #238DD7 al 92.9% e #ADC0CA al 7.1%. Tornato a 6, scegli CSS in «Esporta come» e premi «Copia codice» per un blocco :root che inizia con --color-1: #189ae3. «Scarica striscia PNG» salva sample-image_palette.png. I tuoi codici hex possono differire di qualche passo, perché i browser disegnano il testo dell'esempio in modo leggermente diverso.

Quali impostazioni usare, e i limiti

• Aggiungi l'immagine nel modo più rapido. Trascina un file sull'area, premi «Sfoglia file» oppure incolla uno screenshot con Ctrl+V. Sugli schermi tattili i suggerimenti per trascinare e incollare sono nascosti e «Sfoglia file» è la via d'ingresso. Accetta JPEG, PNG, WebP e GIF, e una foto HEIC di iPhone viene prima convertita, con il messaggio «Conversione della tua foto iPhone…». «Oppure incolla l'URL di un file» recupera l'immagine da un indirizzo, il che funziona solo se quel sito lo permette. Incollare di nuovo mentre un'immagine è aperta la sostituisce. «Prova un esempio» carica un'immagine di prova di 1200 × 800.
• Imposta «Numero di colori» con il cursore. Il cursore va da 2 a 16 e parte da 6, e la sua etichetta mostra il numero, come in «Numero di colori (6)». I numeri bassi danno la palette generale, e quelli più alti colgono piccoli accenti. Puoi vedere meno campioni di quanti dica il cursore, perché i colori che si arrotondano allo stesso hex vengono uniti e i gruppi vuoti vengono scartati. La stessa immagine con lo stesso numero dà sempre la stessa palette, perché la ricerca parte da un seme fisso. Ogni campione mostra la sua quota dell'immagine, come 38.5%, e la quota maggiore viene per prima.
• Ricorda che i campioni sono medie. L'immagine viene ridotta a un massimo di 200 px sul lato più lungo, i pixel quasi trasparenti (alfa sotto 128) vengono ignorati e gli altri vengono raggruppati per distanza in RGB per un massimo di 20 giri. Ogni campione è la media di un gruppo. Questo significa che potrebbe non comparire esattamente in nessun punto dell'immagine, e un accento sottile può essere fuso in un gruppo vicino. Quando ti serve un colore esatto, fai clic sull'immagine invece di affidarti a un campione.
• Fai clic sull'immagine per scegliere un pixel esatto. Sotto l'immagine c'è scritto «Fai clic sull'immagine per campionare un colore di pixel». Ogni clic legge un pixel dall'immagine a dimensione piena, non dalla copia ridotta, anche quando l'anteprima è più piccola dell'originale o ha margini vuoti. Le scelte compaiono come chip con il codice hex. Fai clic su un chip per copiarlo, oppure premi × per rimuoverlo. Un colore già scelto non viene aggiunto due volte, ne vengono mantenuti solo gli ultimi 12 e i clic sul margine non fanno nulla. Le scelte sono separate dai campioni e non fanno parte delle esportazioni.
• Usa la riga di contrasto per scegliere il colore del testo. Sotto ogni campione la riga di contrasto dà il rapporto per il testo nero e per il testo bianco su quel colore, con un decimale. I rapporti usano la formula WCAG della luminanza relativa. Il Color Palette Generator del sito classifica 4.5:1 come AA, quindi consideralo un minimo per il testo del corpo. Nell'esempio, #4C69EB ottiene 4.5:1 con il nero e 4.6:1 con il bianco, quindi nessuno dei due è comodo, mentre #DAEFFB ottiene 17.7:1 con il nero.
• Scegli l'esportazione adatta al tuo codice. Scegli CSS, Tailwind, SCSS o JSON in «Esporta come», controlla la casella di anteprima, poi premi «Copia codice». CSS dà variabili :root chiamate --color-1 e successive, SCSS dà $color-1 e successive, e Tailwind dà palette-1 e successive, tutte con hex in minuscolo. JSON dà ogni colore come hex in maiuscolo, numeri rgb e la quota con un decimale. «Copia intera palette» copia i codici hex separati da virgole. «Scarica striscia PNG» salva un'immagine di 1000 × 200 con ogni colore largo quanto la sua quota, con un nome come photo_palette.png.

Problemi comuni e come risolverli

Dice «Impossibile caricare l'immagine. Il file potrebbe essere corrotto o in un formato non supportato.»

Il browser ha accettato il file ma non è riuscito a decodificarlo come immagine. Le cause abituali sono un file danneggiato o scaricato a metà, oppure un'immagine che il tuo browser non sa disegnare. Apri l'originale in un altro programma e salvalo o esportalo di nuovo come JPEG o PNG, poi aggiungi il nuovo file. L'elenco dei campioni resta vuoto finché questo messaggio è visibile.

Dice «report.pdf è un file PDF, che questo strumento non può aprire.» (con il nome e il tipo del tuo file).

L'area di rilascio legge i primi byte di un file, quindi rinominare un PDF in .jpg non serve. Questo strumento apre JPEG, PNG, WebP, GIF e foto HEIC di iPhone. I file AVIF, BMP, TIFF e SVG vengono rifiutati. Un file non identificabile riceve «Tipo di file non supportato» e il suo nome. Converti prima l'immagine in JPEG o PNG. Dopo il messaggio può comparire un link a uno strumento che apre il file. Un file da 0 byte, spesso un segnaposto di OneDrive o iCloud, riceve un proprio messaggio che chiede di scaricarlo prima.

Dice «Quel sito non permette ad altri siti web di scaricare i suoi file. Scarica prima il file sul tuo dispositivo, poi trascinalo qui.»

Compare dopo «Oppure incolla l'URL di un file» e «Recupera». Il tuo browser chiede l'immagine all'altro sito, e la maggior parte dei siti non permette ad altri siti web di scaricare i propri file. Salva l'immagine sul tuo dispositivo e trascinala invece sull'area. Un messaggio diverso, «Il link ha restituito un errore (HTTP 404)» con il tuo numero di stato, significa che l'indirizzo stesso è fallito, quindi controllalo oppure salva il file e trascinalo qui.

Il cursore dice «Numero di colori (12)» ma compaiono meno campioni.

I colori che si arrotondano allo stesso hex vengono uniti e i gruppi vuoti vengono scartati, quindi immagini piatte come loghi, screenshot e grafiche semplici danno meno campioni di quanti ne chieda il cursore. Non c'è nulla che non vada. Anche i pixel quasi trasparenti vengono ignorati, e un'immagine interamente trasparente non dà alcun campione. Per una palette più semplice, abbassa il cursore. Per sfumature più sottili, alzalo fino a 16 su una foto.

Dice «Impossibile copiare negli appunti.»

Il browser ha rifiutato la copia, cosa che può accadere quando la pagina non è sicura, è mostrata in un frame, oppure il browser ha bloccato l'accesso agli appunti. Il messaggio resta finché non sposti il cursore o carichi un'altra immagine. Fai clic una volta sulla pagina e riprova. Se continua a fallire, seleziona il testo nella casella di anteprima sotto «Esporta come» e copialo a mano, oppure usa «Scarica striscia PNG» per salvare invece la palette come immagine.

Come si confronta

Il contagocce di un'app di design legge pixel esatti, e questo strumento lo fa a ogni clic. Ciò che aggiunge è l'elenco dei colori dominanti, ottenuto raggruppando i colori dell'intera immagine. Usa l'immagine intera, quindi uno sfondo grande domina l'elenco e non c'è modo di selezionare un'area o di rimuovere prima lo sfondo. Lavora su una copia di al massimo 200 px, non dà nomi ai colori e non ordina per tonalità. I colori restano sul tuo dispositivo, perché l'immagine viene letta nel browser. Per costruire una palette da un solo colore invece che da una foto, usa il Color Palette Generator.