7 minuti di lettura
La guida completa ai valori esadecimali dei colori
I colori esadecimali sono il linguaggio visivo del web. Quando vuoi che una pagina web (o un’app) mostri un certo colore, utilizzi il codice esadecimale.
Che cos’è un codice colore esadecimale?
Un codice colore esadecimale è un codice a 6 simboli composto da un massimo di tre elementi a 2 simboli. Ciascuno degli elementi a 2 simboli esprime un valore di colore compreso tra 0 e 255.
- Elemento 1: Valore rosso
- Elemento 2: Valore verde
- Elemento 3: Valore blu
Il codice viene scritto utilizzando una formula che trasforma ogni valore in un codice alfanumerico univoco di 2 cifre. Ad esempio, il codice RGB (224, 105, 16) è E06910 in codice esadecimale.
Perché? È complicato e ha a che fare con il sistema di numerazione in base 16. Se sei curioso, ecco una buona spiegazione . Se ti stai solo chiedendo cosa significhi tutto questo per te come designer, ci sono un paio di cose importanti da sapere:
- Usando i codici esadecimali, puoi mostrare più di 16 milioni di colori unici, che si pensa siano più di quanto l’occhio umano possa percepire.
- Puoi usare strumenti per la selezione del colore o convertitori per creare il codice per te.
Perché usare il codice esadecimale invece dei numeri? Perché se hai usato i numeri, ogni valore rosso, verde o blu da 0 a 255 potrebbe essere una, due o tre possibili cifre. In totale, il codice potrebbe essere composto da un minimo di tre cifre o fino a nove. Ciò potrebbe causare confusione per i sistemi che leggono i codici ma soprattutto tra gli umani che eseguono la codifica. Avere ogni valore con sei simboli, invece, riduce la possibilità di errori.
Cosa sono i codici colore esadecimali?
I codici colore esadecimali sono valori che indicano al display la quantità di colore da mostrare. I valori sono un codice speciale che rappresenta i valori di colore da 0 a 255.
Se rosso, verde e blu sono tutti al minimo 0 (rappresentato come “00” nel codice), il colore espresso è il colore nero. Se rosso, verde e blu sono tutti al massimo 255 (rappresentati come “ff” nel codice), il colore espresso è il colore bianco.
I valori di colore esadecimale possono combinarsi per mostrare più di 16 milioni di colori diversi. Quindi, ovviamente, la maggior parte sarà da qualche parte nel mezzo. Puoi sempre usare un convertitore per convertire i valori numerici RGB in codice esadecimale per te.
Ma può essere utile memorizzare alcuni dei colori esadecimali più comuni. Questa conoscenza potrebbe tornare utile se stavi progettando con un programmatore.
Codici colore esadecimali popolari
| Colore | RGB | Codice colore esadecimale |
| Nero | (0, 0, 0) | #000000 |
| Blu | (0, 0, 255) | #0000FF |
| Grigio | (128, 128, 128) | #808080 |
| Verde | (0, 128, 0) | #008000 |
| Viola | (128, 0, 128) | #800080 |
| Rosso | (255, 0, 0) | #FF0000 |
| Bianco | (255, 255, 255) | #FFFFFF |
Codici colore esadecimali univoci
| Colore | RGB | Codice colore esadecimale | Uso |
| AliceBlue | (240, 248, 255) | #F0F8FF | Sfondo per un eCommerce o una pagina aziendale |
| Corallo | (255, 127, 80) | #FF7F50 | Colore che comunica calma |
| Mattone | (178, 34, 34) | #B22222 | Colore deciso e aggressivo |
| Rosa caldo | (255, 105, 180) | #FF69B4 | Colore giocoso |
| Limone | (255, 250, 205) | #FFFACD | Sfondo romantico per un matrimonio o altra pagina personale |
Come funzionano i colori esadecimali?
I colori esadecimali si basano sul modello di colore RGB in uso sin dai primi giorni della fotografia.
La teoria alla base del modello è che puoi creare praticamente qualsiasi colore che l’occhio può vedere assegnando diverse combinazioni di valori di colore rosso, verde e blu. Il modello di colore RGB è utilizzato da televisori, fotocamere digitali e videoproiettori oltre a praticamente tutti gli schermi di computer e telefoni esistenti.
Sul web e nella maggior parte delle applicazioni digitali, viene utilizzata una scala di valori di colore da 0 a 255. Tu (o un programmatore) dite allo schermo quanto rosso, blu e verde mostrare. Quella combinazione crea il colore che vede un utente.
Hai molta libertà nella scelta del colore. Il numero totale di combinazioni possibili è 16.777.216, che è più di quanto l’occhio umano possa effettivamente distinguere.
Qual è la differenza tra l’utilizzo di codici RGB ed esadecimali?
I codici colore esadecimali sono preferiti dai programmatori perché sono prevedibili. Sono sempre sei cifre, indipendentemente dal colore. I valori RGB possono essere di soli tre cifre e fino a nove.
Non è necessario utilizzare codici esadecimali nel web design. Se stai codificando una pagina in HTML, puoi anche utilizzare i valori RGB o anche i nomi dei colori.
Ecco come apparirebbe l’HTML se stessi codificando, ad esempio, uno sfondo color acquamarina per una pagina web.
- Codice colore esadecimale: <div style=”background-color:#7FFFD4″></div>
- Codice colore RGB: <div style=”background-color:rgb(127, 255, 212)”></div>
- Codice del nome del colore: <div style=”background-color:aquamarine”></div>
Anche se puoi specificare il nome o il codice RGB non significa che dovresti. Per ridurre la possibilità di un errore nel tuo progetto, usa un selettore o un convertitore con ruota esadecimale a colori per generare il codice esadecimale che desideri. In questo modo, ci sono meno possibilità che un programmatore attuale o futuro cerchi di eseguire la conversione da solo e trasformi la tua splendida pagina web in qualcosa di sgradevole.
Lavorare con i colori esadecimali
Se sei abituato a lavorare con i colori in Adobe Illustrator o per la stampa, lavorare con i colori esadecimali sul web richiede un po’ di pratica. Ecco un paio di cose da sapere per far lavorare al meglio al tuo progetto.
Attenzione alle bande di colore
Con 16.777.216 potenziali colori, i codici colore esadecimali ti offrono molte opzioni per i colori contrastanti. Ma poiché ogni pixel deve visualizzare un colore univoco, i colori esadecimali non ti consentono di fondere molto bene tra le sfumature di colori diversi.
Quando i web designer cercano di creare gradienti utilizzando colori esadecimali, i risultati non sono sempre quelli previsti. Poiché le sfumature non si fondono, il display finisce per creare bande di colore distinte.
È più probabile che si verifichino bande di colore su dispositivi meno recenti che non sono in grado di mostrare milioni di colori. Nei CSS moderni, puoi programmare i gradienti per eliminare il problema delle bande di colore. Sugli schermi moderni, le bande di colore sono più comuni nelle foto di gradienti naturali come cieli e arcobaleni, dove i milioni di colori visibili ad occhio nudo vengono compressi per risparmiare spazio sul file.
Risparmia tempo con le palette di colori esadecimali
Quando stai sviluppando un look unico al volo, selezionare colori complementari tra i 16 milioni disponibili è un compito arduo. Fortunatamente, altri designer hanno svolto parte del lavoro per te creando database di palette di colori esadecimali e selettori interattivi.
Palette di colori esadecimali dei colori: Sfoglia e cerca migliaia di combinazioni di colori esadecimali create dalla community grazie alle palette di colori esadecimali.
Stai ancora scegliendo? Sfoglia pagina per pagina scegliendo tra i nomi delle palette. Ogni palette ha un nome per darti un’idea del suo stile e identifica tutti e sei i colori esadecimali. Fai clic sul nome del designer per vedere altre palette di colori che ha creato.
Le palette di colori esadecimali sono una risorsa fantastica per trovare ispirazione per la scelta dei colori esadecimali.
Coolors: Coolors unisce la possibilità di trovare nuova ispirazione con funzionalità per accelerare il processo di progettazione.
Puoi sfogliare le palette dei colori di tendenza per vedere cosa ha attirato l’attenzione degli altri designer. Ogni palette di tendenza può essere salvata tra i preferiti se ti registri e apri il tuo account.
Oppure usa il generatore di palette per creare palette in base ai colori che desideri utilizzare. Una caratteristica di Coolors che fa risparmiare tempo è la capacità di “bloccare” un colore (o colori), quindi generare ulteriori colori complementari con un tocco della barra spaziatrice. Puoi creare un nuovo look alla velocità della luce. Ti basta scegliere il colore o la palette che attira la tua attenzione.
Coolors è disponibile anche come app iOS o Estensione Adobe.
Abbina i colori esadecimali con altri elementi di design
Se stai lavorando a un sito esistente o hai altri elementi che desideri abbinare, devi sapere con quali colori esadecimali stai lavorando sul sito. È qui che un uno strumento per la selezione del colore diventa davvero inestimabile. Grazie a ImageColorPicker, puoi caricare qualsiasi immagine e vedere quali colori esadecimali include.
Un’altra buona risorsa è ColorPick Eyedropper, un’estensione del browser web Google Chrome che ti consente di vedere il colore esadecimale per qualsiasi elemento di una pagina web. Se ti piace un colore su un determinato sito, usa il contagocce per vedere di cosa si tratta.
Se sei tu a scegliere le immagini e altri elementi per il sito, vorrai un modo semplice per identificare le risorse che corrispondono alla tua tavolozza di colori esadecimale. Con iStock puoi aggiungere un colore esadecimale come filtro a qualsiasi ricerca. Inserisci il codice o seleziona dal selettore di colori, quindi digita le parole chiave di ricerca. Il sito restituirà immagini correlate che si avvicinano molto al colore che hai inserito.
Sei pronto per iniziare a trovare le immagini ideali per la tua combinazione di colori esadecimali? Vai qui per trovare i contenuti che completeranno il tuo progetto.
Questo articolo ti è stato utile?
Altre risorse per te
- 5 minuti di lettura
- 8 minuti di lettura