Sicuramente ti sarà capitato di imbatterti nell’inserimento di colori scrivendo css, così come ne avrai trovati altri già inseriti apportando delle modifiche a qualcosa di già esistente. Avrai notato che spesso vengono utilizzati diversi modi per definirli nel codice; vediamo quali sono.
Colori dichiarati per nome
Per una questione di praticità, prima di tutti i modi più “tecnici”, anni indietro fu implementata la possibilità di inserire i colori nel codice css scrivendo direttamente il nome di questi ultimi (blue, red, yellow, green, ecc.). All’inizio era disponibile solo una ristretta cerchia di colori definiti da un “nome”, poi col passare del tempo e con l’avvento di CSS3, il set di colori tradotti in nomi è aumentato a dismisura fino a raggiungere la cifra di 140 nomi di colori, supportati da tutti i browsers. Ti lascio un elenco visivo da consultare qui.
ESEMPIO
See the Pen Color by name by Cosimo Marasciulo (@cooosmo) on CodePen.
Codifica HEX – colori esadecimali
La codifica dei colori in esadecimale (HEX da adesso in poi, per comodità) è strutturara da una stringa a 6 cifre preceduta dal simbolo #, divise in 3 coppie di numeri basate su sistema esadecimale appunto, quindi da 00 a FF, dove ogni coppia corrisponde ad una lettera del sistema RGB (Red Green Blue).
Quindi, traducendo la codifica, si va dalla coppia di zeri che significano assenza di colore, alla doppia effe, per indicare il colore pieno. Una stringa di soli zeri, #000000 significa totale assenza di colori, quindi banalmente tradotta con nero; al contrario una stringa di sole effe, #ffffff significherà presenza totale di tutti i colori, ovvero il bianco. Alternando invece una coppia di effe ed il resto delle stringhe di zeri otterremo i colori primati che danno vita alla codifica RGB: con #ff0000 otteniamo il rosso, con #00ff00 otteniamo il verde, infinire con #0000ff otteniamo il blu. Ovviamente cambiando le varie combinazioni ed implementando gli altri valori del sistema esadecimale, otterremo tutte le altre varianti di colore.
ESEMPIO
See the Pen CSS Color by name by Cosimo Marasciulo (@cooosmo) on CodePen.
Codifica RGB e RGBA – Red, Green, Blue, Alpha
Anche la codifica RGB è molto utilizzata nel campo del web design, specialmente quando abbiamo a che fare con la sua variante RGBA, ma andiamo con ordine. La sigla RGB come anticipato indica i colori primari che compongono il nome della codifica stessa (rosso, verde e blu). Essa è rappresentata da un set di 3 valori (racchiusi tra parentesi tonde ,separati da una virgola e preceduti dalla sigla rgb) compresi tra 0 e 255; dove zero è ancora una volta l’assenza di colore (quindi riconducibile al colore nero) e 255 è la presenza massima di uno dei colori primari, quindi di consenza una stringa con tutti i valori a 255, rgb(255,255,255) indicherà il colore bianco. Alla stessa maniera, come nel caso precedente, la stringa rgb(255,0,0) indica il rosso, la stringa rgb(0,255,0) indica il verde, infine la stringa rgb(0,0,255) sta ad indicare il blu.
Parliamo adesso della variante rgba, dove la lettera finale sta per Alpha, ma che in pratica fa riferimento al valore di opacità. L’opacità è un valore percentuale tradotto però nel codice con un numero decimale (o intero) compreso tra 0 (opacità allo 0%) ed 1 (opacità al 100%). Per inserirlo nella stringa rgb basta aggiungere il valore subito dopo il terzo elemento. In caso di valore decimale, la virgola è sostituita dal simbolo punto. Un esempio pratico: rgb(255,255,255,0.7) per indicare un nero con opacità al 70%.
ESEMPIO
See the Pen CSS RGB & RGBA Color by Cosimo Marasciulo (@cooosmo) on CodePen.
Codifica HSL e HSLA – Hue, Saturation, Lightness, Alpha
Un’altra possibile codifica dei colori in ambito CSS è senza dubbio HSL, seguita dalla variante HSLA (come nel caso precedente). C’è da dire però che queste ultime due sono molto meno usate e di conseguenza molto meno presenti sui siti web, poiché questa tipologia di codifica viene utilizzata però più nel settore della grafica (seppur come le altre già citate finora). Ad ogni modo, come ribadito nel titolo, la sigla hsl sta per Hue, Saturation, Lightness. Qui entriamo nel campo della teoria del colore, ma cercherò di spiegare brevemente senza dilungarmi troppo. Vi parlerò sicuramente di questo argomento in maniera più approfondita in un altro articolo.
In questo sistema di colori la voce hue indica un particolare tono appartenente alla ruota dei colori (color wheel); il suo valore va da 0 a 360, dove 0 (o 360) corrispondono al rosso, 120 al verde ed infine 240 al blu. La voce saturation, come intuibile dal nome indica la saturazione, ovvero l’intensità di un determinato tono; meno è denso, più tenderà al grigio. La saturazione viene espressa con un valore percentuale dove 0% corrisponde ad un’immagine in completa scala di grigi, mentre 100% alla vividezza massima con assenza totale di grigi. Per quanto riguarda lightness, questo valore indica la luminosità in termini di “chiarezza”. Anche questo valore è espresso in percentuale, dove 0% indica nero e 100% bianco.
ESEMPIO
See the Pen CSS HSL & HSLA Color by Cosimo Marasciulo (@cooosmo) on CodePen.
Colori css con currentcolor
Un ultimo modo per indicare i colori all’interno dei nostri CSS è quello di utilizzare l’attributo currentcolor. All’interno di un tag div, dichiarando un colore per una regola, possiamo utilizzare currentcolor per poter assegnare il medesimo colore ad un’altra regola appartenente allo stesso contenitore. Un tipico esempio è quello di colore del testo e bordo all’interno di un pulsante.
ESEMPIO
See the Pen CSS CURRENT COLOR Attr by Cosimo Marasciulo (@cooosmo) on CodePen.
Hai bisogno di aiuto o di una consunza?
Contattami senza impegno!
Classe 1990, Web Designer e consulente di Digital Marketing per professione, curo blog per passione.
Cerco di leggere almeno un libro al mese, ho un debole per l’arte e per la natura.
