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 specificare e manipolare i colori.

Come si decide 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.

Scegliere i colori

Colori con nome

Il modo più semplice per scegliere un colore è selezionarne uno dei 148 colori con nome in CSS. Si tratta di nomi in inglese semplice, come purple, tomato e goldenrod. Alcuni tra i nomi più popolari, secondo il Web Almanac, sono black, white, red, blue e gray. I nostri preferiti includono goldenrod, aliceblue e hotpink.

Colori numerici

Sebbene i colori con nome possano essere pratici, probabilmente dovrai utilizzare colori specifici che non sono disponibili in quel set. Puoi specificare i colori con valori numerici in diverse forme.

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.

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 a 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

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

HSL (tonalità, saturazione, 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.

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

Colori ad alta definizione

RGB e HSL definiscono i colori nella gamma sRGB. I monitor più recenti supportano molti più colori di quelli che possono essere descritti da questi formati e non rientrano nella gamma sRGB. Puoi scegliere questi colori con una serie di funzioni CSS.

La funzione color()

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

La funzione CSS color() consente di scegliere un colore in uno spazio di colore specifico. Il primo argomento è lo spazio di colore da utilizzare, che definisce le opzioni per i seguenti canali. Come per rgb(), puoi impostare il canale alfa impostando un numero compreso tra 0 e 1 o una percentuale dopo un /.

Ad esempio, il colore RGB rosso scuro nello snippet di codice precedente, definito come rgb(183 21 64), può essere definito con le percentuali come rgb(72% 8% 25%). Puoi utilizzare la funzione color() con la parola chiave srgb per specificare lo stesso colore con color(srgb .72 .08 .25).

srgb imposta lo spazio di colore e ci dice che i tre argomenti successivi sono rosso, verde e blu. I valori vanno da 0 a 1 anziché da 0 a 255.

Come per rgb(), possiamo impostare l'alpha con un / e una percentuale o un numero decimale tra 0 e 1.

Esistono molti spazi di colore che puoi utilizzare con la funzione color(), ognuno con punti di forza e casi d'uso diversi.

Display P3

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

La gamma Display P3 contiene il 50% di colori in più rispetto a sRGB. Puoi specificare tutti i colori della gamma Display P3 con lo spazio di colore Display P3 utilizzando la funzione color().

Per impostare il nero in Display P3, definiscilo come color(display-p3 0 0 0). Dopo aver specificato lo spazio colore display-p3 per la funzione color(), hai tre canali: rosso, verde e blu, in modo simile a color(srgb). Tuttavia, poiché i valori dei canali rappresentano coordinate in uno spazio di colore più ampio, gli stessi valori dei canali avranno significati diversi.

color(srgb 1 .5 0) è un colore arancione equivalente a color(display-p3 0.93596 0.52724 0.1983). Possiamo rendere l'arancione ancora più brillante estendendo lo spazio sRGB a color(display-p3 1 .5 0).

Oklab

Oklab è definito con la funzione oklab(), con i canali Luminosità, a e b. È utile per creare gradienti uniformi e per regolare la saturazione di un colore, mantenendone la tonalità e la luminosità.

h1 {
  color: oklab(75% 0.1 0.1)
}

Il canale di luminosità va da 0 a 1 o da 0% a 100%. I colori con una luminosità di 0 saranno sempre neri.

Il canale a va da -0.4 a 0.4 o da 0% a 100%. I valori più bassi sono più verdi, mentre quelli più alti sono più rossi.

Il canale b va da -0.4 a 0.4 o da 0% a 100%. I valori più bassi sono più blu, mentre quelli più alti sono più gialli.

OkLCh

OkLCh è la forma polare o cilindrica di OKLab ed è definita con i canali Luminosità, Croma e Tonalità. È utile per regolare i colori in modo uniforme per la percezione. Ciò significa che le modifiche alla tonalità non influiscono sull'aspetto chiaro o saturo di un colore.

h1 {
  color: oklch(80% 0.1 200)
}

Hai lavorato con luminosità e tonalità in HSL e la crominanza è simile alla saturazione. Puoi impostare il nero con oklch(0 0 0) e il bianco con oklch(1 0 0).

Il canale di luminosità va da 0 a 1 o da 0% a 100%. I colori con una luminosità di 0 saranno sempre neri.

Il canale di crominanza imposta l'intensità di un colore: 0 o 0% corrisponde a una saturazione ridotta, mentre valori più elevati avranno più colore. Un valore di 100% è uguale a .4, ma è possibile uscire rapidamente dalla gamma con valori vicini a .4.

La tonalità è specificata in gradi, come hsl().

OkLCh non è limitato da una gamma come Display P3, quindi devi assicurarti di creare colori che possano essere visualizzati. oklch(80% 50% 200) è un blu brillante che numericamente sembra un colore ragionevole, ma non rientra nella gamma Display P3.

Altri spazi

Esistono molti modi per specificare i colori in CSS e non è necessario conoscerli tutti. I formati rgb() ed esadecimale sono di uso comune negli strumenti di progettazione e nel codice esistente e sono utili da conoscere. È inoltre utile conoscere un formato che può essere manipolato in modo prevedibile. Puoi modificare direttamente i valori hsl o oklch e avere un'idea del colore risultante.

Scopri di più nella pagina Accedere ad altri colori e nuovi spazi.

Colori di sistema

Oltre ai colori con nome come viola o verde acqua, 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 border-color sarà red. Se per l'elemento in cui definisci currentColor non è stato definito un valore per il colore, currentColor verrà calcolato dalla struttura a cascata.

Manipolazione dei colori

Anche se potresti avere una tavolozza di colori da utilizzare sul tuo sito, potresti aver bisogno di varianti di questi colori per gli stati di passaggio del mouse, i bordi e altri elementi dell'interfaccia utente. Puoi specificare ogni colore, ma il CSS offre anche modi per trasformare i colori e creare queste varianti.

color-mix()

Per utilizzare il risultato della miscelazione di due colori, puoi utilizzare il metodo color-mix(). Questa opzione è utile per mescolare un colore con bianco o nero per creare una variante più chiara o più scura.

Per utilizzare color-mix(), devi definire i due colori, la modalità di combinazione (il metodo di interpolazione) e la quantità di ciascun colore.

Per gli spazi di colore che hanno una tonalità, puoi anche decidere in quale direzione muoverti sulla tavolozza dei colori. Per impostazione predefinita viene utilizzato il percorso shorter, ma puoi anche scegliere longer o increasing e decreasing.

Insieme, lo spazio colore e la direzione costituiscono il metodo di interpolazione.

Puoi anche specificare la quantità di ciascun colore da mescolare.

Sintassi del colore relativo

Puoi anche lavorare in modo più diretto con un colore utilizzando la sintassi dei colori relativi, che consente di prendere qualsiasi colore ed eseguire calcoli per creare un nuovo colore.

h1 {
  color: oklch(from red l c h);
}

Se utilizzi la funzione oklch(), lavorerai con i canali luminosità, crominanza e tonalità. Dopo la parola chiave from puoi specificare qualsiasi colore in qualsiasi sintassi. In questo modo, puoi utilizzare ogni valore del canale come lettera. Il risultato sarà un colore rosso, senza alcuna modifica.

Per apportare modifiche, puoi utilizzare la funzione calc() per modificare i valori del canale o semplicemente sostituire completamente il canale. Qui utilizziamo lo stesso colore red, ma lo definiamo con oklch(62% 0.25 29).

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

Il canale di luminosità è 62% / 2 o 31%. Il canale di crominanza è invariato, quindi è 0.25. Il canale di tonalità è 180. Viene creato il nuovo colore oklch(31% 0.25 180), un nuovo colore verde scuro.

Spesso utilizzerai una proprietà personalizzata come colore di input. In questo modo puoi creare dinamicamente varianti di colore.

Puoi farlo con qualsiasi funzione di colore ed è utile farlo con le funzioni di colore che hanno canali che descrivono le modifiche che vuoi apportare. Ad esempio, se vuoi regolare la luminosità di un colore, scegli oklch o hsl, poiché puoi modificare direttamente il canale Luminosità.

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

Utilizzando la sintassi dei colori relativa (RCS), puoi creare una tavolozza di colori da utilizzare per il tuo sito.

Colori fuori gamma

I tuoi contenuti verranno mostrati su schermi diversi che potrebbero o meno supportare i colori a gamma estesa. Se specifichi un colore non supportato da uno schermo, verrà eseguito un processo chiamato mappatura della gamma per trovare un colore simile che possa essere visualizzato sullo schermo. Se vuoi definire colori specifici in questi casi, puoi utilizzare la media query color-gamut.

Dove utilizzare il colore nelle regole CSS

Se una proprietà CSS accetta il tipo di dato <color> come valore, accetterà uno qualsiasi dei metodi descritti in precedenza 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.

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

Testa le tue conoscenze sui colori

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