Colore

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%:

  1. B è uguale a 11, che se moltiplicato per 16 equivale a 176
  2. F è uguale a 15
  3. 176 + 15 = 191
  4. Il valore alfa è pari a 191-75% di 255
di Gemini Advanced.

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).

di Gemini Advanced.

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.

Una ruota dei colori con etichette per i valori dei gradi con incrementi di 60 gradi per aiutare a visualizzare il valore di ogni angolo

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.

La funzione colore HSL suddivisa visivamente. La tonalità utilizza la ruota dei colori. La saturazione mostra che il grigio si fonde con quello verde acqua. La luminosità si illumina dal nero al bianco.

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 di background-color
  • currentColor è il valore dinamico calcolato contestuale della proprietà color. Se il colore del testo è red e imposti border-color su currentColor, sarà anche rosso. Se l'elemento per cui definisci currentColor non ha un valore per color definito, currentColor verrà calcolato dalla cascata
di Gemini Advanced.

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?

rbga(400 0 1)
rbga è un errore ortografico di rgba e 400 è più grande di quanto accetterebbe comunque, rendendolo non valido.
#0f08
🎉
#OOFZ2
Non è un valore esadecimale, si tratta solo di 5 numeri e include una Z, il che lo rende non valido.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Individua il colore hsl non valido.

hsl(5, 0%, 90%)
Questo è un valore hsl valido.
hsl(.5turn 40% 60%)
Questo è un valore hsl valido.
hsl(0, 0, 0)
🎉 Ce l'hai trovata, il secondo e il terzo valore devono essere percentuali.
hsl(2rad 50% 50%)
Questo è un valore hsl valido.
hsl(0 0% 0% / 20%)
Questo è un valore hsl valido.

Risorse