Podcast CSS - 006: Parte uno sui colori
.
Il colore è una parte importante di qualsiasi sito web e in CSS ci sono molte opzioni per i tipi di colore, funzioni e trattamenti.
Come puoi decidere quale tipo di colore utilizzare? Come si rendono i colori semitrasparenti? In questa lezione imparerai quali sono le opzioni a tua disposizione per prendere le decisioni giuste per il tuo progetto e per il tuo team.
Il CSS dispone di vari tipi di dati diversi, come stringhe e numeri. Il colore è uno di questi tipi e ne utilizza altri, come i numeri per le proprie definizioni.
Colori numerici
È molto probabile che la tua prima esposizione ai colori in CSS avvenga attraverso colori numerici. Possiamo lavorare con i valori numerici dei colori in forme diverse.
Colori esadecimali
h1 {
color: #b71540;
}
La notazione esadecimale (spesso abbreviata in esadecimale) è una sintassi abbreviata per RGB, che assegna un valore numerico al rosso verde e al blu, che sono i tre colori principali.
Gli intervalli esadecimali sono 0-9 e A-F. Quando è utilizzato in una sequenza di sei cifre, vengono convertiti in intervalli numerici RGB compresi tra 0 e 255 che corrispondono rispettivamente ai canali di colore rosso, verde e blu.
Puoi anche definire un valore alpha con qualsiasi colore numerico.
Un valore alpha è una percentuale di trasparenza.
Con il codice esadecimale, aggiungi altre due cifre alla sequenza di sei cifre,
creando una sequenza di otto cifre.
Ad esempio, per impostare il nero nel codice esadecimale, scrivi #000000
.
Per aggiungere una trasparenza del 50%, impostala su #00000080
.
Poiché la scala esadecimale è 0-9 e A-F, i valori di trasparenza probabilmente non sono come ti aspetteresti.
Ecco alcuni valori comuni chiave aggiunti al codice esadecimale nero #000000
:
- 0% alfa (che è completamente trasparente) è 00:
#00000000
- Il 50% di alfa è 80:
#00000080
- Il 75% degli alfa è BF:
#000000BF
Per convertire un esadecimale a due cifre in un decimale, prendere la prima cifra e moltiplicarla per 16 (poiché il valore esadecimale è in base 16), quindi aggiungi la seconda cifra. Utilizzo di BF come esempio per alfa al 75%:
- B è uguale a 11, che se moltiplicato per 16 equivale a 176
- F è uguale a 15
- 176 + 15 = 191
- Il valore alfa è pari a 191-75% di 255
RGB (rosso, verde, blu)
h1 {
color: rgb(183, 21, 64);
}
I colori RGB vengono definiti mediante
rgb()
Funzione colore,
utilizzando numeri o percentuali come parametri.
I numeri devono essere compresi nell'intervallo 0-255 e le percentuali sono comprese tra 0% e 100%.
RGB funziona nella scala da 0 a 255,
quindi 255 è equivalente a 100% e da 0 a 0%.
Per impostare il nero in RGB, definiscilo come rgb(0 0 0)
,
che è zero rosso, zero verde e zero blu.
Il nero può anche essere definito come rgb(0%, 0%, 0%)
.
Il bianco è esattamente il contrario: rgb(255, 255, 255)
o rgb(100%, 100%, 100%)
.
Una versione alpha è impostata in rgb()
in uno dei due modi seguenti.
Aggiungi /
dopo i parametri rosso, verde e blu,
o utilizza la funzione rgba()
.
Il valore alpha può essere definito con una percentuale o un numero decimale compreso tra 0 e 1.
Ad esempio, per impostare il 50% di nero alfabetico nei browser moderni, scrivi: rgb(0 0 0 / 50%)
o rgb(0 0 0 / 0.5)
.
Per un supporto più ampio, usando la funzione rgba()
:
scrittura: rgba(0, 0, 0, 50%)
o rgba(0, 0, 0, 0.5)
.
HSL (Tonalità, saturazione, luminosità)
h1 {
color: hsl(344, 79%, 40%);
}
HSL sta per tonalità, saturazione e leggerezza. Tonalità descrive il valore sulla ruota dei colori, da 0 a 360 gradi, a partire dal rosso (che è sia 0 che 360). Una tonalità di 180, o 50%, è nell'intervallo del blu. È l'origine del colore che vediamo.
La saturazione è la vivacità della tonalità selezionata.
Verrà visualizzato un colore completamente desaturato (con una saturazione di 0%
) in scala di grigi.
Infine, la leggerezza è il parametro che descrive la scala dal bianco al nero della luce aggiunta.
Una leggerezza di 100%
ti darà sempre il bianco.
Con la funzione colore hsl()
,
puoi definire il vero nero scrivendo hsl(0 0% 0%)
, o anche hsl(0deg 0% 0%)
.
Questo perché il parametro tonalità definisce il grado sulla ruota dei colori,
che, se utilizzi il tipo numerico, è 0-360.
Puoi anche utilizzare il tipo di angolo, ovvero (0deg
) o (0turn)
.
Sia la saturazione che la luminosità sono definite in percentuali.
Alfa è definita in hsl()
,
come rgb()
aggiungendo /
dopo i parametri di tonalità, saturazione e luminosità oppure utilizzando il
hsla()
.
Il valore alpha può essere definito con una percentuale o un numero decimale compreso tra 0 e 1.
Ad esempio, per impostare il 50% di nero alfa, utilizza hsl(0 0% 0% / 50%)
o hsl(0 0% 0% / 0.5)
.
Utilizzando la funzione hsla()
, scrivi: hsla(0, 0%, 0%, 50%)
o hsla(0, 0%, 0%, 0.5)
.
Parole chiave con colori
Esistono 148 colori denominati in CSS. Questi sono nomi inglesi semplici come viola, pomodoro e asteracea. Alcuni dei nomi più popolari, secondo il Web Almanac, sono nero, bianco, rosso, blu e grigio. I nostri preferiti sono goldenrod, aliceblue e hotpink.
Oltre ai colori standard, sono disponibili anche parole chiave speciali:
transparent
è un colore completamente trasparente. È anche il valore iniziale dibackground-color
currentColor
è il valore dinamico calcolato contestuale della proprietàcolor
. Se il colore del testo èred
e impostiborder-color
sucurrentColor
, sarà anche rosso. Se l'elemento per cui definiscicurrentColor
non ha un valore percolor
definito,currentColor
verrà calcolato dalla cascata
Dove utilizzare il colore nelle regole CSS
Se una proprietà CSS accetta
<color>
come valore,
accetterà uno qualsiasi dei metodi descritti sopra per esprimere il colore.
Per applicare lo stile al testo, utilizza le proprietà color
, text-shadow
e text-decoration-color
che accettano tutti il colore come valore o il colore come parte del valore.
Per gli sfondi, puoi impostare un colore come valore per background
o background-color
.
È possibile utilizzare i colori anche nelle sfumature, ad esempio linear-gradient
.
I gradienti sono un tipo di immagine che può essere definito in modo programmatico in CSS.
I gradienti accettano due o più colori in qualsiasi combinazione di formati, ad esempio esadecimale, rgb o hsl.
Infine, border-color
e outline-color
impostano il colore per i bordi e i contorni dei riquadri.
La proprietà box-shadow
accetta anche il colore come uno dei valori.
Verifica le tue conoscenze
Metti alla prova le tue conoscenze sui colori
Quali dei seguenti colori sono validi?
#OOFZ2
rgb(255, 0, 0)
hotpink
#0f08
rbga(400 0 1)
hsl(180deg 50% 50%)
Individua il colore hsl non valido.
hsl(2rad 50% 50%)
hsl(.5turn 40% 60%)
hsl(0 0% 0% / 20%)
hsl(0, 0, 0)
hsl(5, 0%, 90%)