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.
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.
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
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.
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.
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.
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.