Colore

The CSS Podcast - 006: Color Part One

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

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

CSS ha diversi tipi di dati, come stringhe e numeri. Il colore è uno di questi tipi e utilizza altri tipi, come i numeri, per le proprie definizioni.

Colori numerici

È molto probabile che la tua prima esperienza con i colori in CSS sia tramite i colori numerici. Possiamo lavorare con valori di colore numerici in alcune forme diverse.

Colori esadecimali

h1 {
  color: #b71540;
}

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

Nota: secondo l'Almanaco del web, il codice esadecimale è il tipo di sintassi dei colori più utilizzato.

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

Puoi anche definire un valore alfa con qualsiasi colore numerico. Un valore alpha è una percentuale di trasparenza. Nel codice esadecimale, aggiungi altre due cifre alla sequenza di sei cifre, ottenendo una sequenza di otto cifre. Ad esempio, per impostare il nero in codice esadecimale, scrivi #000000. Per aggiungere una trasparenza del 50%, imposta il valore su #00000080.

Poiché la scala esadecimale è 0-9 e A-F, i valori di trasparenza probabilmente non sono quelli che ti aspetti. Di seguito sono riportati alcuni valori chiave comuni aggiunti al codice esadecimale nero, #000000:

• Il valore alfa 0%, che è completamente trasparente, è 00: #00000000
• Un alpha del 50% è 80: #00000080
• Il valore alpha del 75% per BF è #000000BF

Per convertire un numero esadecimale di due cifre in un numero decimale, prendi la prima cifra e moltiplicala per 16 (poiché il numero esadecimale è in base 16), quindi aggiungi la seconda cifra. Utilizzando BF come esempio per un'alfa del 75%:

1. B è uguale a 11, che moltiplicato per 16 è uguale a 176
2. F è uguale a 15
3. 176 + 15 = 191
4. Il valore alpha è 191, ovvero il 75% di 255

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

RGB (rosso, verde, blu)

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

I colori RGB sono definiti con la funzione di colore rgb(), utilizzando numeri o percentuali come parametri. I numeri devono rientrare nell'intervallo 0-255 e le percentuali devono essere comprese tra 0% e 100%. RGB funziona sulla scala 0-255, quindi 255 è equivalente al 100% e 0 allo 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 è l'esatto opposto: rgb(255, 255, 255) o rgb(100%, 100%, 100%).

Un'alpha viene impostata in rgb() in uno dei due modi. Aggiungi un / dopo i parametri rosso, verde e blu oppure 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 un nero alpha 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 di colore più recenti, come lab() e lch(), utilizzano gli spazi anziché le virgole come delimitatori. Questa modifica offre maggiore coerenza non solo con le funzioni di colore più recenti, ma con il CSS in generale. Per una maggiore compatibilità con le versioni precedenti, puoi comunque utilizzare le virgole per definire rgb() e hsl().

HSL (tonalità, saturazione e luminosità)

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

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

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

Utilizzando la funzione di colore hsl(), puoi definire un nero reale scrivendo hsl(0 0% 0%) o anche hsl(0deg 0% 0%). Questo perché il parametro di tonalità definisce il grado sulla 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 con percentuali.

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

Browser Support

• 2
• 12
• 3.6
• 4

Source

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

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

Parole chiave per i colori

In CSS sono disponibili 148 colori con nome. Si tratta di nomi in inglese semplice, come viola, pomodoro e achillea. Alcuni dei nomi più popolari, secondo l'Almanacco del web, sono nero, bianco, rosso, blu e grigio. I nostri preferiti includono 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 in base al contesto della proprietà color. Se il colore del testo è red e imposti border-color su currentColor, anche il testo sarà rosso. Se per l'elemento in cui definisci currentColor non è definito un valore per color, currentColor verrà calcolato tramite la ricorsione.

Nota: le parole chiave di sistema sono i colori definiti dal tema del sistema operativo. Alcuni esempi di questi colori sono Background, il colore di sfondo del computer, o Highlight, il colore di evidenziazione degli elementi selezionati. Queste sono solo due delle molte opzioni disponibili. Tutte le parole chiave dei colori sono insensibili alle maiuscole, ma spesso i colori di sistema vengono visualizzati con le lettere maiuscole per distinguerli dalle parole chiave dei colori standard.

Dove utilizzare il colore nelle regole CSS

Se una proprietà CSS accetta il tipo di dato <color> come valore, accetta uno dei metodi precedenti per esprimere il colore. Per applicare stili al testo, utilizza le proprietà color, text-shadow e text-decoration-color, che accettano tutte il colore come valore o 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, ad esempio linear-gradient. I gradienti sono un tipo di immagine che può essere definito tramite programmazione in CSS. I gradienti accettano due o più colori in qualsiasi combinazione di formato di colore, ad esempio esadecimale, RGB o hsl.

Nota: ci sono molte cose da imparare sui gradienti, quindi abbiamo scritto un'intera lezione su come utilizzarli.

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

Verificare di aver compreso

Metti alla prova le tue conoscenze sui colori

Quali dei seguenti sono colori validi?

rbga(400 0 1)

rbga è un errore ortografico di rgba e 400 è un valore maggiore di quello accettato, quindi non è valido.

#0f08

🎉

#OOFZ2

Non è un valore esadecimale, sono 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)

🎉 Ci sei riuscito, 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

• Una pratica demo che mostra come utilizzare gli angoli con HSL
• Una guida completa sul colore
• Una guida completa sul colore a gamma estesa
• [Video] Spiegazione su come leggere i codici esadecimali
• Come funzionano i codici esadecimali