Come scegliere un colore esatto da un'immagine: HEX, RGB e HSL

Per ottenere il colore esatto di un'immagine, leggi il valore di un singolo pixel invece di stimarlo a occhio. Apri l'immagine nel selettore di colori, passa il mouse sul punto, fai clic e copia il codice HEX. La lettura è il valore memorizzato di quel pixel, quindi resta uguale ogni volta che scegli lo stesso punto dello stesso file.

Selettore colori da immagineServe il codice esatto del coloreUsalo gratis

Cosa memorizza un pixel

Ogni pixel è un piccolo quadrato di colore. Su uno schermo o in un file immagine è memorizzato come tre numeri, per rosso, verde e blu, ciascuno da 0 a 255. Il rosso puro è 255, 0, 0. Questi tre numeri contengono le stesse informazioni in ogni formato, quindi lo stesso colore può essere scritto in più modi.

HEX, RGB e HSL

• HEX scrive ogni numero in esadecimale, due caratteri per canale. #FF0000 è il rosso puro. Le pagine web, il CSS e la maggior parte degli strumenti di design lo usano.
• RGB scrive gli stessi numeri in decimale, come rgb(255, 0, 0). È lo stesso colore del codice HEX.
• HSL descrive il colore nel modo in cui di solito se ne parla. La tonalità è l'angolo sulla ruota dei colori, la saturazione indica quanto il colore è intenso e la luminosità indica quanto è chiaro o scuro. hsl(0, 100%, 50%) è il rosso puro.

Usa HEX quando incolli un colore nel codice, RGB quando uno strumento lo richiede e HSL quando vuoi una versione più chiara o più scura della stessa tonalità. Cambiare solo la luminosità in HSL mantiene la tonalità, cosa più difficile da fare a mano con HEX. Per verificare il contrasto tra due colori, consulta HEX, RGB, HSL, CMYK e contrasto.

Ecco un colore usato in un foglio di stile:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Perché il codice può non corrispondere allo schermo

• L'immagine è compressa. Il JPEG risparmia spazio smussando i dettagli fini, quindi i pixel vicino a un bordo possono differire leggermente dal colore che vedi al centro di un'area.
• I bordi si fondono. Dove due colori si incontrano, i pixel intermedi sono miscele. Non sono un colore a sé stante.
• I profili colore differiscono. Il selettore legge i valori che il browser decodifica, che sono in sRGB. Una foto salvata con un profilo a gamma ampia può apparire diversa in altri programmi.
• Il ridimensionamento sfuma i pixel. Uno screenshot fatto con una scala di visualizzazione diversa può avere pixel fusi. Quando puoi, fai lo screenshot a dimensione piena.
• Le immagini molto grandi vengono lette da una copia. Le immagini con il lato più lungo oltre 6000 pixel vengono lette da una copia di 6000 pixel, quindi un singolo pixel può differire un po' dal file a dimensione piena.

Scegli dal centro di un'area uniforme

Individua una zona di un solo colore, poi spostati verso il suo centro. La lente d'ingrandimento mostra gli 11 per 11 pixel intorno al puntatore, così puoi vedere se il punto è misto o uniforme. Con la tastiera, sposta il mirino di un pixel alla volta con i tasti freccia, oppure di dieci alla volta con Shift, e premi Invio per selezionare. Controlla la lettura prima di copiarla.

Usa la tavolozza per uno schema

Una foto raramente ha un solo colore che ti interessa. La tavolozza elenca fino a sei dei suoi colori principali. Funziona arrotondando ogni pixel a 16 livelli per canale, contando i gruppi e tenendo quelli più frequenti che differiscono tra loro. Ogni campione mostra la media del proprio gruppo. Tocca un campione per copiarne il codice HEX. Considera la tavolozza un punto di partenza, perché è una media e non un colore di marchio misurato.

Conversione tra formati

Se uno strumento di design chiede un formato diverso, incolla il codice HEX in un convertitore di colori. Converte tra HEX, RGB e HSL senza cambiare il colore, quindi il risultato corrisponde al codice che hai scelto.

Ultime selezioni e privacy

Lo strumento conserva le tue ultime selezioni nella pagina così puoi confrontarle. Restano solo nella memoria di questa scheda e scompaiono quando la chiudi. L'immagine viene letta direttamente nel tuo browser e non viene mai inviata a un server.

Come farlo con fixmint

1. Apri il selettore di colori da immagine e trascina la foto al suo interno.
2. Passa il puntatore sul punto. Oppure metti a fuoco l'immagine e usa i tasti freccia per spostare il mirino un pixel alla volta, tenendo premuto Shift per dieci pixel.
3. Fai clic, oppure premi Invio, per selezionare il colore. Controlla la lettura prima di copiarla.
4. Usa il pulsante Copia accanto a HEX, RGB o HSL per copiare il valore che ti serve.
5. Se uno strumento di design chiede un altro formato, incolla il valore nel convertitore di colori.

Risposte rapide

Perché il colore appare diverso sul mio schermo? Il tuo schermo mostra una versione gestita con profilo colore e ridimensionata del file. Scegli dal centro di un'area uniforme e confronta il codice HEX con un campione di riferimento.

Quale formato devo copiare? HEX per le pagine web e per la maggior parte degli strumenti di design. Usa RGB o HSL quando uno strumento li richiede.

Lo strumento carica la mia immagine? No. L'immagine viene decodificata e letta direttamente nel tuo browser.