Strumenti95

MODIFICA / UNA GUIDA PRATICA PER IMMAGINI

Come scegliere i colori dell'immagine e creare una tavolozza

Passa da un colore che noti a valori che puoi usare.

Una foto può suggerire una direzione cromatica utile, ma una tavolozza automatica è solo un punto di partenza. Image Color Picker combina un selettore di pixel ingrandito, campioni modificabili ed esportazioni per design o codice. Questa guida utilizza il risultato reale dell'estrazione di sei colori dal campione botanico.

Segui la guida
UN INPUT REALE E IL RISULTATO SCARICATO
Prima Foto originale di fiori viola e foglie verdi su uno sfondo pesca caldo.

collage-botanical.jpg: 1200 x 900 px, 199,152 byte.

Dopo Tavolozza reale a sei colori con campioni etichettati pesca, tortora, oliva e viola estratti dalla foto botanica.

palette.png: 600 x 500 px, 9,163 byte.

Il campione botanico originale e la tavolozza reale a sei colori PNG. I colori sono raggruppati da un campione ridotto; la scheda contiene i valori HEX estratti, non una foto ricolorata.
Pubblicità
VIDEO TUTORIAL RAPIDO How to pick an image color and export a palette Upload an image, inspect a pixel with the magnifier, add its color to the extracted palette, select Start and download a PNG palette. Narrazione in inglese Guarda il video

How to pick an image color and export a palette

Pubblicità

Estrai prima la tavolozza di esempio, quindi usa il prelievo preciso e le modifiche manuali per decidere quali colori appartengono al tuo progetto. Apri Selettore colore immagine.

01

Carica ed estrai una tavolozza iniziale

Apri Image Color Picker e carica un'immagine supportata, oppure prova il campione. L'estrazione automatica carica la sorgente sul server. Il campione in questa guida è collage-botanical.jpg, una foto 1200 x 900 di fiori, foglie e uno sfondo color pesca.

Lascia Colori da estrarre su 6 e seleziona Dominante per l'esempio. Dominante favorisce i colori principali dell'immagine, mentre Vibrante dà più influenza agli accenti colorati. Una richiesta può utilizzare da 3 a 12 colori; un'immagine con meno gruppi visibili distinti potrebbe restituirne meno.

Il risultato Dominante effettivo contiene #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. Il gruppo più grande è #E3B49F a circa il 28.88% dei pixel visibili campionati. L'estrazione ha utilizzato un campione 512 x 384; quelle percentuali non sono un censimento esatto dell'immagine a piena risoluzione.

Un colore della tavolozza può essere una media dei colori vicini. Preleva un pixel particolare quando hai bisogno del valore di un piccolo dettaglio.

02

Preleva e rifinisci i singoli colori

Fai clic o tocca l'immagine per ispezionare un pixel con la lente d'ingrandimento. Metti a fuoco l'immagine e usa i tasti freccia per spostarti di un pixel, Maiusc più una freccia per spostarti di dieci, quindi Invio per prelevare. Copia HEX, RGB o HSL con il suo pulsante di copia individuale, oppure usa Aggiungi alla tavolozza.

Seleziona un campione per modificarne il valore HEX o il colore, spostalo a sinistra o a destra, oppure rimuovilo. L'aggiunta di un colore personalizzato accetta un valore HEX a tua scelta. Blocca colore preserva un campione selezionato quando Aggiorna tavolozza o un'impostazione di estrazione modificata genera un'altra tavolozza iniziale.

Campionamento e trasparenza offre Colore sorgente e Composito su uno sfondo. Colore sorgente include l'opacità nei codici copiati quando pertinente; Composito mostra il pixel miscelato sullo sfondo di Campione scelto. I campioni della tavolozza sono valori RGB opachi. I colori modificati e prelevati non hanno una percentuale di sorgente stimata.

Le immagini decodificabili dal browser utilizzano campioni sRGB del browser. Se viene utilizzata un'anteprima normalizzata, il selettore etichetta esplicitamente i suoi colori e le coordinate come approssimativi.

L'esempio in questa guida

Colori da estrarre: 6; Dominante; nessuna modifica manuale o blocco; Salva come: PNG. L'estrazione automatica ha campionato 512 x 384 pixel.

Immagine sorgente
1200 x 900 px
Colori estratti
6 colori opachi
Scheda tavolozza
600 x 500 px
PNG scaricato
9,163 byte
03

Controlla una coppia testo e sfondo

Apri Verifica contrasto colore. Imposta Testo e Sfondo con i controlli colore, inserisci codici HEX o usa il colore prelevato per entrambi i lati. Il campione di testo dal vivo ti consente di confrontare la coppia e il rapporto è accompagnato dai risultati separati Normale AA, Normale AAA, Grande AA e Grande AAA.

Scegli una coppia per lo scopo previsto invece di presumere che ogni colore estratto possa essere utilizzato come testo. Un pesca chiaro e un viola chiaro possono funzionare insieme in una foto pur costituendo una combinazione testo-sfondo scadente.

Questo controllo verifica solo quella coppia di colori per il contrasto del testo. Non è un audit di accessibilità completo e non decide se la tipografia, l'interazione da tastiera o il resto del design siano utilizzabili.

Un rapporto di contrasto conforme è un controllo utile, non una garanzia che un'intera pagina sia accessibile.

04

Copia i valori o esporta la tavolozza

Per un passaggio rapido, copia un singolo codice o usa Copia colori HEX tavolozza. Per un file, scegli Salva come e seleziona Avvia. PNG crea un'immagine della tavolozza etichettata; SVG mantiene i campioni e le etichette come contenuto vettoriale; CSS fornisce variabili di colore numerate; JSON contiene valori HEX, RGB e HSL.

L'esempio a sei colori non modificato esporta palette.png a 600 x 500 pixel e 9,163 byte. L'ordine dei campioni corrisponde alla tavolozza. La tua tavolozza finale potrebbe contenere da 1 a 12 colori dopo la modifica, anche quando il conteggio iniziale automatico era diverso.

Scarica prima di uscire o aggiornare. L'esportazione finale carica la sorgente e i colori scelti per l'elaborazione sul server. Crea un nuovo file di tavolozza e non ricolora né sostituisce la foto originale.

PNG e SVG sono comodi riferimenti visivi. CSS e JSON sono utili quando il passaggio successivo richiede valori di colore riutilizzabili.

DETTAGLI UTILI

Domande comuni

Il contagocce restituisce gli stessi colori dell'estrazione automatica?

Non necessariamente. Un valore prelevato descrive un particolare pixel sorgente o di anteprima. L'estrazione automatica raggruppa i pixel campionati e può restituire colori medi.

I pixel trasparenti vengono conteggiati?

I pixel completamente trasparenti sono esclusi dall'estrazione. I pixel parzialmente trasparenti hanno un peso ridotto. Il campionamento della sorgente può mostrare l'opacità, ma i campioni della tavolozza esportati sono opachi.

Cosa succede ai colori bloccati quando aggiorno?

I colori bloccati rimangono nella tavolozza mentre i nuovi colori estratti riempiono le altre posizioni. A un colore mantenuto o modificato non viene assegnata una percentuale di immagine inventata.

Posso usarlo per un colore del brand esatto?

Inserisci direttamente un valore HEX noto o preleva un pixel sorgente adatto. L'illuminazione della foto, la compressione, la gestione del colore e le anteprime normalizzate possono modificare i valori campionati, quindi una tavolozza fotografica automatica non è una prova di una specifica del brand originale.

TOCCA A TE

Crea una tavolozza che puoi portare nel tuo prossimo progetto

Prova un esempio o usa il tuo file e rivedi il risultato prima di condividerlo.

Apri Selettore colore immagine

Dettaglio immagine

Lingua38

English العربية Français Italiano Deutsch Español Português Nederlands Русский Türkçe 日本語 中文 हिन्दी Bahasa Indonesia Bahasa Melayu 한국어 Tiếng Việt ไทย Polski Svenska Українська Norsk বাংলা Ελληνικά فارسی اردو Čeština Dansk Magyar Română Suomi Български Filipino ქართული Slovenčina Azərbaycanca עברית Slovenščina

Scegli la tua lingua. I video tutorial utilizzano attualmente la narrazione in inglese.