Colore

Podcast su CSS - 006: Color Part One

Il colore è una parte importante di qualsiasi sito web e in CSS sono disponibili molte opzioni per i tipi di colore, le funzioni e i trattamenti.

In che modo decidi quale tipo di colore utilizzare? Come si rendono i colori semitrasparenti? In questa lezione scoprirai le opzioni a tua disposizione per prendere le decisioni giuste per il tuo progetto e il tuo team.

CSS presenta vari tipi di dati, come stringhe e numeri. Il colore è uno di questi tipi e ne utilizza altri tipi, ad esempio i numeri, per le proprie definizioni.

Colori numerici

È molto probabile che la tua prima esposizione ai colori in CSS avvenga tramite colori numerici. Possiamo lavorare con i valori numerici dei colori in diverse forme.

Colori esadecimali

h1 {
  color: #b71540;
}

La notazione esadecimale (spesso abbreviata in esadecimale) è una sintassi abbreviata per l'RGB, che assegna un valore numerico al rosso verde e al blu, che sono i tre colori primari.

Nota: secondo il Web Almanac, hex è il tipo di sintassi dei colori più diffuso.

Gli intervalli esadecimali sono 0-9 e A-F. Quando vengono utilizzati in una sequenza di sei cifre, vengono convertiti negli intervalli numerici RGB che sono 0-255, che corrispondono rispettivamente ai canali di colore rosso, verde e blu.

Puoi anche definire un valore alfa con qualsiasi colore numerico. Un valore alfa è una percentuale di trasparenza. Nel 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 esattamente quelli che ti aspetti. Ecco alcuni valori comuni chiave aggiunti al codice esadecimale nero #000000:

• 0% di alfa (completamente trasparente) è 00: #00000000
• Il 50% di alfa è 80: #00000080
• Il 75% alfa è BF: #000000BF

Per convertire un esadecimale a due cifre in decimale, prendi la prima cifra e moltiplicala per 16 (perché l'esadecimale è in base 16), quindi somma la seconda cifra. Utilizzando BF come esempio per 75% alfa:

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

Nota: puoi anche scrivere codici esadecimali in una forma abbreviata a tre cifre. Un codice esadecimale a tre cifre è una scorciatoia per una sequenza equivalente di sei cifre. Ad esempio, #a4e è identico a #aa44ee. Per aggiungere alfa, #a4e8 si espanderebbe in #aa44ee88.

RGB (rosso, verde, blu)

h1 {
  color: rgb(183, 21, 64);
}

I colori RGB vengono definiti con la funzione colore rgb(), utilizzando numeri o percentuali come parametri. I numeri devono essere compresi nell'intervallo 0-255 e le percentuali devono essere comprese tra 0% e 100%. RGB funziona sulla scala 0-255, quindi 255 equivale al 100% e da 0 a 0%.

Per impostare il nero in RGB, definiscilo come rgb(0 0 0), ovvero zero rosso, zero verde e zero blu. Il nero può essere definito anche come rgb(0%, 0%, 0%). Il bianco è esattamente l'opposto: rgb(255, 255, 255) o rgb(100%, 100%, 100%).

Una versione alpha può essere impostata in rgb() in uno dei due seguenti modi. Aggiungi un elemento / dopo i parametri rosso, verde e blu oppure utilizza la funzione rgba(). L'alfa può essere definita con una percentuale o un decimale compreso tra 0 e 1. Ad esempio, per impostare un nero alfa al 50% nei browser moderni, scrivi: rgb(0 0 0 / 50%) o rgb(0 0 0 / 0.5). Per un supporto più ampio, utilizzando la funzione rgba(), scrivi: rgba(0, 0, 0, 50%) o rgba(0, 0, 0, 0.5).

Nota: le virgole sono state rimosse dalla notazione rgb() e hsl() perché le funzioni colore più recenti, come lab() e lch(), utilizzano gli spazi al posto delle virgole come delimitatore. Questa modifica garantisce maggiore coerenza non solo con le funzioni colore più recenti, ma anche con il CSS in generale. Per una migliore compatibilità con le versioni precedenti, puoi comunque utilizzare le virgole per definire rgb() e hsl().

HSL (tonalità, saturazione, luminosità)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL è l'acronimo di tonalità, saturazione e luminosità. Hue descrive il valore sulla ruota dei colori, da 0 a 360 gradi, a partire dal rosso (sia 0 che 360). Una tonalità pari a 180 o al 50% rientra nell'intervallo blu. È l'origine del colore che vediamo.

La saturazione indica il livello di vivacità della tonalità selezionata. Un colore completamente desaturato (con una saturazione di 0%) apparirà in scala di grigi. Infine, la leggerezza è il parametro che descrive la scala dal bianco al nero della luce aggiunta. Una leggera luminosità di 100% darà sempre il bianco.

Con la funzione colore hsl(), puoi definire un vero nero scrivendo hsl(0 0% 0%) o persino hsl(0deg 0% 0%). Questo perché il parametro tonalità definisce il grado nella ruota dei colori che, se utilizzi il tipo di numero, è 0-360. Puoi anche utilizzare il tipo di angolo, ovvero (0deg) o (0turn). Sia la saturazione che la luminosità sono definite in percentuali.

Nota: il tipo di angolo in CSS è ottimo per definire la tonalità, perché rappresenta molto bene l'angolo della ruota dei colori. Questo tipo accetta gradi, svolte, radianti e gradianti.

Supporto dei browser

• 2
• 12
• 3.6
• 4

Fonte

Alfa è definita in hsl(), come per rgb() aggiungendo / dopo i parametri di tonalità, saturazione e luminosità oppure utilizzando la funzione hsla(). L'alfa può essere definita con una percentuale o un decimale compreso tra 0 e 1. Ad esempio, per impostare un nero alfa al 50%, usa: 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).

Nota: in CSS saranno disponibili alcuni tipi di colore più recenti. Questi includono lab() e lch(), che consentono di specificare una gamma di colori molto più ampia rispetto a quella possibile in RGB.

Parole chiave basate sui colori

Ci sono 148 colori denominati in CSS. Si tratta di semplici nomi inglesi come viola, pomodoro e verga d'oro. Alcuni dei nomi più popolari, secondo l'Almanacco web, 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 in modo che sia currentColor, anch'esso sarà rosso. Se per l'elemento che definisci currentColor non è stato definito un valore per color, currentColor verrà calcolato a cascata

Nota: le parole chiave di sistema sono colori definiti dal tema del tuo sistema operativo. Alcuni esempi di questi colori sono Background, che è il colore di sfondo del desktop, oppure Highlight, che è il colore di evidenziazione degli elementi selezionati. Queste sono solo due delle tante opzioni. Tutte le parole chiave colore non fanno distinzione tra maiuscole e minuscole, tuttavia, spesso vedrai colori di sistema con lettere maiuscole per distinguerle dalle parole chiave standard basate sui colori.

Dove utilizzare il colore nelle regole CSS

Se una proprietà CSS accetta il tipo di dati <color> come valore, accetta uno qualsiasi dei metodi precedenti per esprimere il colore. Per applicare uno stile al testo, usa le proprietà color, text-shadow e text-decoration-color, che accettano tutte 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. I colori possono essere utilizzati anche nei gradienti, come 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 formato di colore, ad esempio esadecimale, rgb o hsl.

Nota: C'è molto da imparare con i gradienti, quindi abbiamo scritto un'intera lezione su come utilizzarli.

Infine, border-color e outline-color impostano il colore dei bordi e dei contorni delle caselle. La proprietà box-shadow accetta anche il colore come uno dei valori.

Verifica la tua comprensione

Verifica la tua conoscenza dei colori

Quali dei seguenti sono colori validi?

rbga(400 0 1)

rbga è un errore ortografico di rgba e il valore 400 è più grande di quanto potrebbe accettare comunque, rendendolo non valido.

#0f08

🎉

#OOFZ2

Non si tratta di un valore esadecimale, ma include solo 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)

🎉 L'hai trovato, il secondo e il terzo valore dovrebbero essere in percentuale.

hsl(2rad 50% 50%)

Questo è un valore hsl valido.

hsl(0 0% 0% / 20%)

Questo è un valore hsl valido.

Risorse

• Una pratica demo che mostra come utilizzare gli angoli con HSL
• Una guida completa sui colori
• Una guida completa sui colori con ampia gamma di colori
• [video] Una spiegazione su come leggere i codici esadecimali
• Come funzionano i codici esadecimali