I colori HTML sono importanti per chi si occupa di web e lavora con i siti personali o dei clienti. Vero, tutto parte da un buon hosting WordPress veloce e performante. Ma continua con plugin affidabili e un template capace di restituire l’estetica necessaria per comunicare i valori.
Ecco perché può essere necessario scoprire i colori da riportare in alcune sezioni del sito. Non sempre l’estetica di un tema è già pronta per accogliere le tue esigenze. Ma come si modifica l’aspetto e in che modo si scelgono i colori sul web? Devi conoscere il valore esadecimale della cromia che vuoi usare, in questo articolo voglio lasciarti una breve guida sull’argomento.
Argomenti
Per rappresentare le variazioni cromatiche sul web con precisione e senza fraintendimenti, cercando di trovare il modo per concordare il risultato tra i diversi dispositivi, puoi usare il valore esadecimale. Che, appunto, sono supportati da tutti i browser.
Per spiegare questo passaggio bisogna fare una breve sintesi. I colori HTML sono definiti attraverso il sistema RGB (red, green, blue) che sintetizza i primari additivi. Il valore di ogni elemento passa da 0 a 225 che indicano rispettivamente minima e massima presenza di quel determinato colore.
Per definire tutto in maniera più conveniente vengono usate tre coppie di numeri esadecimali. Così otteniamo una situazione del genere, ecco la tabella per farti un esempio.
| Colore | Valore | Definizione |
| Nero | #000000 | Assenza di tutti colori. |
| Bianco | #FFFFFF | Presenza di tutti i colori. |
| Rosso | #FF0000 | Presenza solo del rosso. |
| Giallo | #FFFF00 | Rosso + verde – blu. |
Lo puoi intuire, esistono migliaia di combinazioni che coprono lo spettro dei colori. In questo modo è possibile attribuire a ogni elemento di una pagina web delle caratteristiche. Ecco come appare, ad esempio, dal punto di vista del codice HTML l’attribuzione di colore a parola.
<font color="#FFFF00">giallo</font>Ovviamente questa è la soluzione più semplice, di solito si interviene lato CSS per attribuire a ogni elemento del sito web una caratteristica cromatica. E per far combaciare tutto può far comodo avere una serie di strumenti per scoprire, rilevare e ottenere gli esadecimali.
Da leggere: quali sono gli status code di una pagina web?
La prima esigenza: hai bisogno di uno schema che sintetizzi le sfumature cromatiche per i colori HTML. Sai qual è la verità pura e semplice: impossibile racchiuderli tutti. O meglio, avresti bisogno di un archivio infinito. Di solito nelle tabelle trovi gli esadecimali base:
| Nome | Esadecimale | RGB |
|---|---|---|
| Bianco | #FFFFFF | RGB(255, 255, 255) |
| Grigio | #808080 | RGB(128, 128, 128) |
| Nero | #000000 | RGB(0, 0, 0) |
| Rosso | #FF0000 | RGB(255, 0, 0) |
| Marrone | #800000 | RGB(128, 0, 0) |
| Giallo | #FFFF00 | RGB(255, 255, 0) |
| Verde | #008000 | RGB(0, 128, 0) |
| Blu | #0000FF | RGB(0, 0, 255) |
Non conviene, però, incasellare tutti questi codici. Per questo esistono diverse applicazioni online che sintetizzano il lavoro. In che modo? Offrono delle tavolozze per catturare il colore che ti serve e determinare l’esadecimale, la combinazioni di lettere e numeri con cancelletto.
Il web è pieno di tool per generare colori HTML, ma il più famoso e utile (ma anche completo ed efficace) si trova sul sito di www.w3schools.com. Questo colors picker, infatti, ti consente di inserire l’input sia testuale che visivo. Da qui determina l’esadecimale e il valore RGB.
Una delle funzioni più richieste: trovare i colori HTML da un’immagine o una foto. In che modo si può fare? Con i vari Photoshop e Gimp è facile, hai il pick color e tutti i dati dei colori scelti. Ma come prelevare il colore di un elemento visual da internet in pochi secondi?
Puoi usare imagecolorpicker.com, applicazione online semplice e immediata. Basta andare sul sito, caricare l’immagine o la foto e selezionare il cursore dove serve. In questo modo ottieni i codici HTML, RGB e HSV. Puoi ottenere il visual da analizzare inserendo anche URL immagine o del sito web. In modo da catturare una schermata della risorsa in questione.
Sia Firefox che Chrome ti consentono di analizzare il codice per identificare i codici esadecimali di ogni elemento delle pagine web. Ma questi sono trucchi per webmaster, se vuoi velocizzare le operazioni e scoprire i colori HTML delle risorse online puoi usare Colorzilla.
Puoi trovare quest’estensione per entrambi i browser. Cosa fa esattamente? Semplice, aggiunge un contagocce nell’angolo in alto a destra del browser: clicca e porta il cursore sull’immagine o la grafica. Qui puoi ottenere tutte le informazioni utili sulla sfumatura cromatica.
Da leggere: usare Lighthouse di Chrome
Questi sono i passaggi essenziali da sapere per portare avanti il tuo lavoro. Se hai bisogno di scoprire il codice esadecimale dei colori HTML non puoi ignorare queste risorse. Ne conosci altre? Vuoi dare il tuo contributo sul tema? Ti aspetto nei commenti dell’articolo.
