Impara i codici HTML dei colori e personalizza il tuo sito

Quando personalizzi i colori del tuo sito WordPress (font, sfondi, bordi ecc.), solitamente trovi una tabella dalla quale selezionare il colore che desideri. Cliccando su un colore, appare un codice formato da un simbolo (#) seguito da numeri e lettere. Talvolta trovi invece un codice formato da tre numeri fra parentesi.

Scoprendo cosa significano questi codici, potrai personalizzare alla perfezione il tuo sito WordPress grazie ai codici dei colori HTML.

I colori esadecimali

Il formato più diffuso per impostare i colori HTML su un sito web è il codice esadecimale.

“Esadecimale” significa che il codice è basato su 16 cifre, poiché si usano i numeri da 0 a 9 e le lettere dalla A alla F (10 numeri e 6 lettere). Esiste una precisa logica che permette di formare i colori con questo sistema.

Per prima cosa, è presente il simbolo #, per indicare che si tratta di un colore HTML con questo formato.

I sei caratteri che seguono possono essere:

• numeri da 0 a 9
• lettere dalla A alla F

La costruzione del codice è basata sul sistema RGB: Red, Green, Blue. I primi due caratteri indicano la quantità di rosso che è presente in quella tonalità di colore, i due caratteri centrali indicano la quantità di verde, mentre gli ultimi due la quantità di blu.

Si parte con il colore #000000, perciò:

• quantità di rosso: 00 – assente
• quantità di verde: 00 – assente
• quantità di blu: 00 – assente

Risultato: assenza di colore, cioè nero.

Ora partiamo dal nero per ottenere gli altri colori. Le cifre possono aumentare da 00 fino a 99, dopodiché si possono utilizzare le lettere, da AA fino a FF.

Se il nero corrisponde a #000000 (assenza di colore), per ottenere il bianco dovremmo avere la massima quantità di colore, quindi il codice HTML del bianco è #FFFFFF.

Ora scopriamo gli altri colori.

Per ottenere il rosso:

• quantità di rosso : massima – FF
• quantità di verde: 00
• quantità di blu: 00

Il codice esadecimale del rosso è #FF0000.

Secondo il sistema RGB, quindi, per ottenere il verde avremo #00FF00 e per il blu #0000FF.

Variando la quantità di rosso, verde o blu presente nel codice, potrai ottenere tutte le sfumature che desideri.

Il formato RGB

Esiste anche un altro tipo di codice per usare i colori HTML su un sito web, ed è il formato RGB. Il principio è molto simile a quello visto per i colori esadecimali.

Il formato RGB è indicato con la sigla rgb seguita da tre numeri fra parentesi, separati da virgola, che vanno da 0 a 255. Il colore rgb(0, 0, 0) indica il nero, mentre rgb(255, 255, 255) è il bianco.

Il primo numero indica la quantità di rosso, il secondo si riferisce al verde e il terzo al blu.

Trovare il codice di un preciso colore

Esistono diversi strumenti che ti permettono di scoprire il codice esatto di un colore.

Puoi andare prima di tutto sul ColorPicker di W3Schools.

Seleziona un colore dalla tabella, poi scegli la sfumatura. Vedrai anche un’anteprima di come il testo bianco o quello nero appaiono usando questo colore come sfondo.

Per usare il colore scelto, ti basterà copiare il suo codice.

Se vuoi fare invece il processo inverso, ossia hai un codice e vuoi sapere esattamente a quale colore corrisponde, puoi inserirlo nel campo Color value.

E se volessi scoprire qual è l’esatto colore che vedi su una pagina web? In tal caso, puoi installare un’estensione  del browser chiamata Colorzilla. Ti permetterà di cliccare su un punto qualsiasi della pagina e scoprire il codice HTML di quel colore.

Conclusione

Conoscere i codici HTML dei colori può aiutarti a gestire al meglio la grafica del tuo sito web e a personalizzarlo in ogni aspetto con precisione e professionalità.

E ora dimmi…

Qual è il tuo colore preferito, in codice esadecimale?

Per qualsiasi domanda, ti aspetto nei commenti.