Colori HTML: cosa sapere su colori hex e RGB

Componenti fondamentali nel linguaggio dei web designer e degli sviluppatori, è facile ottenere una comprensione indicativa dei colori esadecimali (hex color) e dei colori RGB, e poi andare avanti. Tuttavia, anche se si sa come funzionano i codici dei colori HTML, vale la pena guardare più da vicino la scienza e la storia dietro di loro.

Come funzionano i codici dei colori HTML

I codici colore comunicano i livelli precisi di rosso, verde e blu che i pixel mostrano per produrre un dato colore.

I codici colori RGB usano tre valori numerici (uno per il rosso, uno per il giallo e uno per il blu) che arrivano fino a tre cifre.
Il codice esadecimale dei colori o hex code, invece, utilizza tre coppie di caratteri preceduti da un cancelletto.
Nel linguaggio di marcatura, vedrai i codici di colore RGB scritti in questo modo:

{color:rgb(255,0,0);}

E i codici esadecimali in questo modo:

{color: #FF0000;}

Quando vediamo un colore sullo schermo di un dispositivo, questo è composto da una combinazione di luce rossa, verde e blu trasmessa dai pixel sullo schermo. Con gli schermi di oggi, capaci di risoluzioni sempre più alte, per i web designer e gli sviluppatori è disponibile una gamma di colori veramente sbalorditiva.

Colori HTML: differenza tra colori esadecimali e RGB

I colori hex sono espressi come combinazioni di sei numeri e/o lettere. Questi codici esadecimali sono fondamentalmente un altro modo per rappresentare i valori RGB. Hanno la stessa funzione, con un po’ di conversione matematica in mezzo. 

Invece delle lettere, i valori di colore RGB usano tre serie di tre numeri che spaziano in un intervallo tra 0 e 255. Per esempio, diamo un’occhiata al colore “foglia di tè”:

Codice esadecimale: #008080

RBG: rgb(0, 128, 128)

Questi element value possono sembrare diversi a prima vista, ma il colore sarà identico quando aggiunto al tuo codice HTML.

Convertire i colori esadecimali in RGB

Per effettuare la conversione occorre un po’ di aritmetica mentale.

Suddividi il valore esadecimale nelle tre coppie di numeri/lettere. 

A questo punto prendi il primo numero o lettera di ogni coppia e moltiplicalo per 16 e al risultato somma il valore del secondo elemento della coppia. Per fare un esempio sempre con il colore foglia di tè (colore hex #008080), il calcolo da fare è questo:

La prima coppia è 00, quindi: (0*16) + 0 = 0

La seconda coppia è 80, quindi: (8*16) + 0 = 128

La terza coppia è sempre 80, quindi il risultato è 128. 

Il codice RGB sarà quindi rgb(0,128,128)

Come convertire i colori RGB in esadecimali

Anche in questo caso ci sarebbe un calcolo da fare, ma perché complicarsi la vita quando puoi utilizzare un tool di conversione online? 

Trovare i codici colore su una pagina con Google Developer Tools

Mentre le estensioni gratuite del browser sono ampiamente disponibili per permetterti di campionare i colori su una pagina web, gli strumenti di sviluppo del tuo browser includono già tutto ciò di cui hai bisogno.

• Per iniziare in Chrome o Firefox, apri gli strumenti di sviluppo prendendo i tasti COMMAND, OPTION e I.
• Per Microsoft Edge, premi F12.
• Dal menu di Safari, vai su Preferenze, clicca su Avanzate, e poi seleziona “Mostra il menu di sviluppo nella barra dei menu”.

Facciamo un esempio su Chrome.

Nel campo Filter, digita “color” per trovare un colore nel CSS.

Nel CSS per qualsiasi colore, clicca sulla casella che appare a sinistra del cancelletto o di “rgb”. Ciò aprirà la finestra per prelevare il colore.

Fai clic sull’icona del contagocce per assicurarti che sia abilitata, non in grigio.

Puoi cliccare in qualsiasi punto della pagina per ottenere i valori esadecimali e RGBA di quel colore.

 

Ed ecco svelati i principali concetti sui colori HTML. Ricorda che con Website Builder di GoDaddy puoi creare un sito web in meno di un’ora anche se non conosci nulla in fatto di codici di programmazione!