Palette di colori da un'immagine

Costruire una palette da una foto

Ogni designer c'è passato: una fotografia ha esattamente l'atmosfera che serve al progetto, e il lavoro consiste nel tirare fuori quell'atmosfera dall'immagine e metterla in un foglio di stile.

Andare a occhio non funziona. Un colore che sullo schermo sembra un «grigio caldo» raramente è il grigio che avresti digitato. L'unico modo di azzeccarlo è prendere il pixel vero.

Trascina la foto, muoviti sopra con la lente e fai clic sulle tinte che vuoi. Ognuna finisce nella tua palette qui sotto, con i valori HEX, RGB e HSL pronti da copiare.

Come si usa

• Fai clic su Fai clic per caricare, trascina una foto sulla pagina, oppure incolla l'URL di un'immagine
• Muovi il puntatore sull'immagine — la lente mostra il pixel che c'è sotto
• Fai clic per aggiungere quel colore alla palette
• Prendine quanti ne servono — cinque o sei di solito fanno una palette
• Fai clic su un campione della tua palette per riportarlo su: il campione grande e i valori HEX, RGB e HSL passano a quello, e il suo hex viene copiato
• Usa Copia HEX / RGB / HSL per prendere il formato che ti serve

Perché i colori li scegli tu

Alcuni strumenti indovinano una palette in automatico raggruppando i colori più frequenti. Sembra meglio di quanto sia. Il colore più *frequente* in una fotografia è di solito un'ampia zona spenta — cielo, muro, ombra — mentre la tinta che dà davvero carattere all'immagine è spesso piccola: la ruggine su una porta, il verde di una sola foglia, un riflesso su una tazza.

Tu vedi qual è quale. La lente ti lascia prendere esattamente quel pixel, a ingrandimento pieno, così la palette è quella che intendevi e non quella prodotta da una media.

La palette è un posto in cui tornare

I campioni non sono solo il registro di ciò su cui hai cliccato. Fai clic su uno e diventa il colore corrente — il campione grande e tutti e tre i valori passano a quello, e quello che stai guardando è cerchiato così sai qual è.

È questo che rende pratico confrontare due tinte: prendile entrambe dalla foto, poi clicca dall'una all'altra leggendo i valori, invece di rimetterti a cercare nell'immagine il pixel di un minuto fa.

Tre formati, perché posti diversi ne vogliono di diversi

Ogni colore che scegli è mostrato in tutti e tre insieme:

• HEX — #3f7a5e. CSS, programmi di grafica, quasi ovunque
• RGB — rgb(63, 122, 94). Comodo quando ti servono i canali separati
• HSL — hsl(154, 32%, 36%). Quello da usare per costruire una scala: tieni la tinta, sposta la luminosità, e hai un chiaro e uno scuro che stanno insieme

A cosa serve

• Tirare fuori un colore di marca da un logo quando nessuno trova il manuale
• Costruire una palette per un sito o per delle slide partendo da una foto di apertura
• Abbinare vernice, tessuto o filo a una foto dell'oggetto reale
• Ottenere l'HEX esatto di un colore in uno screenshot
• Trovare i colori di un dipinto o di una fotografia da cui vuoi partire
• Verificare cosa sia davvero un colore, invece di come appare accanto a un altro

Buono a sapersi

• Non viene caricato nulla. L'immagine è letta nella pagina e non lascia mai il tuo dispositivo
• Funziona con PNG, JPG, GIF e WebP
• Puoi incollare l'URL di un'immagine invece di un file — ma alcuni server impediscono ad altri siti di leggerne i pixel (CORS). In quel caso scarica l'immagine e carica il file
• I colori sono letti dai pixel reali a dimensione piena, non dall'anteprima ridotta, quindi il valore è esatto
• Funziona su telefono e tablet come su computer
• È lo stesso contagocce di Contagocce da immagine — usa quella pagina quando ti serve un solo colore

Strumenti correlati

• Contagocce da immagine — lo stesso strumento, impostato su un colore singolo
• Selettore di colore — scegliere un colore da una ruota invece che da una foto
• Verifica contrasto colori — controllare che la palette sia leggibile prima di usarla
• Generatore di gradienti CSS — fondere due dei tuoi nuovi colori
• Generatore di nuvole di parole — un altro posto dove far lavorare una palette