Sei alle prese con un sito web nuovo di zecca e hai deciso di investire migliori risorse sulla grafica? Vuoi scoprire il meraviglioso mondo dei colori ma ti sei reso conto che per un semplice rosso, bianco o nero esistono miriadi di codici alfanumerici di cui non comprendi il significato?
Probabilmente sei alle prese con un Pagebuilder, installato dopo aver perfezionato l’acquisto di dominio e hosting web, che quando ti permette di personalizzare il colore ti chiede di inserire un codice. Ebbene stiamo parlando di quelli che nel gergo vengono definiti colori HTML ma che sarebbe meglio chiamare con il nome di colori esadecimali.
In questa breve guida vedremo cosa sono, come si trovano i codici e in che modo puoi prelevarli dalle tue fonti di ispirazione web.
Cosa sono i colori esadecimali?
I colori esadecimali o colori HTML non sono altro che codici fatti di numeri e lettere. Ogni minima sfumatura o declinazione del colore, quindi, è indentificata da un preciso codice. Se sei spaventato perché credi che devi conoscerli tutti a memoria, non preoccuparti. Per quel che richiede l’abbellimento grafico di un sito web ti servirà conoscere i colori di base e, da quelli, tirare fuori le gradazioni che preferisci.
Quindi i colori HTML sono importantissimi per dare un tocco estetico comunicativo e performante al sito. Come saprai questi possono influenzare il comportamento delle persone per cui ti suggeriamo di non utilizzarli mai a casaccio. Al contrario usali per dare un’identità ben precisa al tuo sito e cerca di renderlo subito riconoscibile, comprensibile e facile da navigare.
Da un punto di vista tecnico, invece, le variazioni cromatiche sul web sono identificate in modo preciso da un valore esadecimale - tre coppie di numeri - oppure tramite il sistema RGB che identifica rispettivamente la quantità di Red, Green e Blue.
"Quanti sono i colori esadecimali?"
Ogni valore di rosso, verde e blu può oscillare da 0 a 225 che, quindi, ti dice le rispettive quantità di ognuno rispetto al colore che hai scelto. Chiaramente il nero presenta assenza di tutti i colori quindi i valori saranno tutti pari a zero.
Al contrario quando scegli il bianco i colori saranno tutti presenti al massimo e, quindi, questo viene identificato con 255, 255, 255. Il tuo builder potrebbe chiederti il codice del colore sia in formato RGB che HEX per cui, senza troppe complicazioni, ti riassumiamo qui di seguito una tabella colori con i codici per i colori standard:
- Nero: #000000 (HEX) 0, 0, 0, 1 (RGB)
- Bianco #FFFFFF (HEX) 225, 225, 225, 1 (RGB)
- Rosso #FF0000 (HEX) 255, 0, 0, 1 (RGB)
- Giallo #FFFF00 (HEX) 255, 255, 0, 1 (RGB)
Come trovare i codici HTML dei colori?
Come potrai immaginare da questa piccola sintesi, quindi, le combinazioni di colori sono infinite per cui nessuno è in grado di ricordarle tutte. Fortunatamente per identificare questi codici ci sono tantissimi software gratuiti online che ti mostrano i colori HTML in qualsiasi formato preferisci. Ci sono varie strade che puoi percorrere per trovare i codici che ti piacciono di più.
La prima è andare alla ricerca di siti web gratuiti come quelli che ti elenchiamo qui di seguito che permettono di realizzare meravigliose palette di colori per il tuo sito. Alcuni ti danno addirittura combinazioni cromatiche complementari, simili o opposte con le quali potrai sbizzarrirti per trovare gli accostamenti più interessanti. Altri ti forniscono la possibilità di convertire un HEX in valori RGB e viceversa, in base a quale codice utilizza il tuo builder.
L’altra opzione prevede di ispezionare una pagina web dove hai trovato colori che ti piacciono e copiare il colore HTML che troverai nel codice. Vediamole ad una ad una.
Usare il browser per scoprire i colori
Se sei atterrato su un sito web di cui ti interessano i colori e vuoi scoprirne il codice esadecimale puoi procedere seguendo questi step.
Vai sull’area dove trovi il colore di tuo interesse e clicca con il destro. Ti uscirà una finestra di funzioni da cui, in fondo, accederai a “Ispeziona”. Nella finestra che si apre apparirà evidenziato il codice dell’area su cui hai cliccato, come vedi dallo screen qui di seguito.
Ora clicca sui tre puntini in corrispondenza delle righe di codice evidenziate e ti comparirà un menu sul quale dovrai identificare la funzione “Edit as HTML”.
Ebbene, scorrendo verso il basso potrai leggere il colore HTML dell’area selezionata.
Usare i programmi per prelevare i colori dal web
In alternativa puoi usare i seguenti software per scovare i colori più interessanti per il tuo sito.
ColorPix
ColorPix è il software gratuito più popolare e più semplice da utilizzare. Difatti una volta installato consente di estrarre colori e sfumature dallo schermo, grazie alla funzione “magnifier”. Questa riconosce piccolissime porzioni di immagini per raccogliere con estrema precisione anche il pixel più minuscolo. I colori verranno poi convertiti automaticamente in tutti i formati, ovvero HEX, RGB, HSB e CMYK.
Paint
Paint è l’intramontabile programma con cui tutti abbiamo disegnato da bambini ed è anche un ottimo strumento per rilevare il codice RGB con cui convertire il colore in HEX. In pratica ti basta fare uno screen del colore di tuo interesse e incollarlo sul foglio di disegno.
A questo punto cliccherai sull’icona a forma di provetta che rileverà il colore e, successivamente, sulla tavolozza. Da qui ti verrà fuori una schermata come quella che vedi qui di seguito, dalla quale ricaverai i valori di rosso, verde e blu. Facilissimo, veloce e senza il bisogno di installare programmi.
Just Color Picker
Questa è una versione più moderna che serve ad estrapolare i colori dallo schermo tramite il puntatore in tutte le tipologie di codici esistenti. Just Color Picker può anche usare per creare anteprime utili a capire se l’effetto finale è di tuo gradimento per il sito in costruzione. Niente male.
Color Detector
Color Detector è molto simile agli altri perché permette di estrarre i codici dei colori attraverso uno strumento che fa lo screen dell’area desiderata. Nonostante la leggerezza e la semplicità di questo programma segnaliamo che non dispone di zoom, per cui catturare una sfumatura non è mai molto semplice.
Pubblicato: | Aggiornamento: