CSS Color 4 porta sul web strumenti e funzionalità a un'ampia gamma di colori: più colori, funzioni di manipolazione e gradienti migliori.
Per più di 25 anni, sRGB
(standard rosso verde blu) è stato l'unico
gamma di colori per i gradienti e i colori CSS, con offerte di spazi colore
come rgb(), hsl() ed esadecimale. È la capacità di gamma di colori più
comune tra i display; un denominatore comune. Ci siamo abituati a specificare colori per questa gamma.
Man mano che i display riescono a mostrare un'ampia gamma di colori, il CSS ha bisogno di un modo per specificare i colori compresi in questi intervalli più ampi. Gli attuali formati di colore non prevedono alcuna lingua per ampi intervalli di colori.
Se il CSS non si aggiornava mai, rimarrebbe per sempre bloccato nelle gamme di colori degli anni '90, non obbligato mai a corrispondere all'ampia gamma di offerte presenti nelle immagini e nei video. Intrappolato, mostra solo il 30% dei colori che l'occhio umano può vedere. Ringraziamo il CSS Color Level 4 per averci aiutato a uscire da questa trappola; scritto principalmente da Lea Verou e Chris Liley.
A partire dal 2016, Chrome 111 supporta le gamut e gli spazi colore CSS Color 4, a cui si aggiunge Safari, che supporta display-p3. Ora il CSS supporta i display in HD (alta definizione), specificando i colori delle gamut HD e offrendo al contempo spazi colore con specializzazioni. Questa guida ti spiegherà come iniziare a sfruttare questo nuovo mondo di colori.
Fai una prova
Nei browser supportati, la scelta tra i colori è del 50% in più. Pensavi che 16 milioni di colori sembrassero molti, aspetta di vedere quanti colori è possibile mostrare in alcuni di questi nuovi spazi. Inoltre, pensa a tutti quei gradienti che basavano su una profondità in bit non sufficiente, si risolve anche questo problema.
Oltre all'aumento dei colori, ovvero i colori più vividi di cui è capace il display, i nuovi spazi colore offrono strumenti e metodi unici per gestire e creare sistemi colore. Ad esempio, prima c'era HSL e il suo canale sulla "leggerezza", che erano i migliori sviluppatori web. Ora in CSS abbiamo la "leggerezza percettiva" di LCH.
Inoltre, i gradienti e le combinazioni ricevono alcuni miglioramenti: supporto dello spazio colore, opzioni di interpolazione delle tonalità e meno banding. L'immagine seguente mostra alcuni degli upgrade per il mix. Le due combinazioni di colori principali sono in sRGB. Le due combinazioni di colori inferiori sono in Display P3. Display p3 ha colori più vivaci e le combinazioni danno un risultato completo in bianco e nero al centro. Dove sRGB sembra un po' desaturato e le miscele al centro non sono risultati completi in bianco o nero.
https://codepen.io/web-dot-dev/pen/poZgXQb
Questa guida illustra dove è stato finito il colore, dove sta andando e come CSS abiliterà e supporterà gli sviluppatori web nella gestione dei colori.
Panoramica
Il problema dei colori e del web è che i CSS non sono pronti per l'alta definizione, mentre i display che la maggior parte delle persone ha in tasca, sui giri o montati sulle pareti sono disponibili con un'ampia gamma di colori e con colori ad alta definizione. La capacità dei colori della visualizzazione è cresciuta più velocemente di CSS, ora che CSS
C'è molto di più che "più colori". Alla fine di questo articolo sarai in grado di specificare più colori, migliorare i gradienti e scegliere gli spazi colore e la gamma di colori migliori per ogni attività.
Che cos'è una gamma di colori?
Una gamma rappresenta la dimensione di un elemento. La frase "milioni di colori" è un commento sulla gamma di un display o sulla gamma di colori tra cui scegliere. Nell'immagine seguente, vengono confrontate tre gamut e maggiore è la dimensione, più colori offre.
Una gamma di colori può anche avere un nome. Come un pallone da basket contro una palla da baseball o una tazza di caffè vintage contro un grande; un nome per la taglia può aiutare le persone a comunicare. Imparare i nomi di questa gamma di colori aiuta a comunicare e comprendere rapidamente una gamma di colori.
Questo articolo illustra sette nuove gamut, tutte con una gamma più ampia rispetto a sRGB, e descrive le loro diverse funzionalità per aiutarti a scegliere quale utilizzare:
Gamma visiva umana
Le gamut cromatiche vengono spesso confrontate con la gamma visiva umana; la totalità dei colori che riteniamo possa essere vista dall'occhio umano. L'HVS è spesso raffigurato con un diagramma di cromaticità, come questo:
La forma più esterna è quella che possiamo vedere come esseri umani, mentre il triangolo interno è l'intervallo di funzioni rgb(), noto anche come spazio colore sRGB.
Come hai visto qui sopra, confrontando le dimensioni della gamma, troverai i triangoli qui sotto. Questo è il modo in cui il settore comunica sulle gamut di colori e confrontarle.
Cos'è uno spazio colore?
Gli spazi colore sono disposizioni di una gamma che stabiliscono una forma e un metodo di accesso ai colori. Molti sono semplici forme 3D, come cubi o cilindri. Questa disposizione dei colori determina quali colori sono vicini e il funzionamento di accesso e interpolazione dei colori.
RGB è come uno spazio colore rettangolare, in cui i colori sono accessibili specificando le coordinate su tre assi. HSL è uno spazio colore cilindrico, in cui i colori sono accessibili con un angolo di tonalità e coordinate su 2 assi
La specifica di livello 4 introduce 12 nuovi spazi colore per la ricerca dei colori delle sette nuove gamut condivise in precedenza:
Si aggiungono ai quattro spazi colore precedentemente disponibili:
Riepilogo della gamma di colori e dello spazio colore
Uno spazio colore è una mappatura di colori in cui una gamma di colori corrisponde a una gamma di colori. Considera una gamma cromatica come un totale di particelle e uno spazio colore come una bottiglia fatta per contenere questo intervallo di particelle.
Ecco un'immagine interattiva di Alexey Ardov che mostra gli spazi cromatici. In questa demo, punta, trascina ed esegui lo zoom. Modifica lo spazio colore per vedere gli altri spazi.
- Utilizza Gamma di colori per parlare di una gamma di colori, ad esempio gamma bassa o gamma ridotta rispetto a gamma alta o ampia.
- Usa gli spazi colore per parlare della disposizione dei colori, della sintassi utilizzata per specificare un colore, manipolare il colore e interpolare tramite i colori.
Come accedere a più colori, nuovi spazi e risultati di debug
CSS Color 4 illustra una serie di nuove funzionalità e strumenti per CSS e colori. Innanzitutto, un riepilogo di dove si trovava il colore prima di queste nuove funzionalità. Poi una panoramica dei nuovi spazi colore, sintassi e strumenti.
Il seguente codepen mostra insieme tutte le sintassi dei colori nuova e precedente:
Una recensione degli spazi colore classici
Dagli anni 2000 puoi utilizzare quanto segue per tutte le proprietà CSS che accettano un colore come valore: esadecimale (numeri esadecimali), rgb(), rgba(), per nome come hotpink o con parole chiave come currentColor.
Intorno al 2010, a seconda del browser, il CSS potrebbe utilizzare hsl() colori. Poi, nel 2017, è apparso hex con alfa. Ultimamente, solo di recente, hwb() ha iniziato a ricevere assistenza nei browser.
Tutti questi spazi colore classici fanno riferimento a colori all'interno della stessa gamma, sRGB.
Esadecimale
Lo spazio colore esadecimale specifica R, G, B e A con numeri esadecimali. I seguenti esempi di codice mostrano tutti i modi in cui questa sintassi può specificare il rosso, il verde e il blu opacità più.
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
Lo spazio colore RGB offre l'accesso diretto ai canali rosso, verde e blu. Consente di specificare un importo compreso tra 0 e 255 o una percentuale compresa tra 0 e 100. Questa sintassi era presente prima che alcune normalizzazione della sintassi fossero incluse nelle specifiche, per cui le sintassi senza virgole e virgole sono presenti. In futuro, le virgole non saranno più necessarie.
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
HSL
Uno dei primi spazi colore a orientarsi verso il linguaggio e la comunicazione umani, HSL (saturazione e chiarezza della tonalità) offre tutti i colori nella gamma sRGB, senza richiedere al tuo cervello di sapere come interagiscono il rosso, il verde e il blu. Come RGB, anche la sintassi inizialmente era composta da virgole, ma più avanti le virgole non sono più necessarie.
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
HWB
Un altro spazio cromatico sRGB orientato alla descrizione del colore da parte delle persone è HWB (tonalità, bianco, nero). Gli autori possono scegliere la tonalità e mescolare il bianco o il nero per trovare il colore desiderato.
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
Scopri i nuovi spazi colore sul web
Gli spazi colore riportati di seguito consentono di accedere a gamut più ampie rispetto a sRGB. Lo spazio colore display-p3 offre quasi il doppio dei colori rispetto a quelli RGB, mentre Rec2020 ne offre quasi il doppio rispetto a display-p3. Ci sono tanti colori!
La funzione color()
La nuova funzione color() può essere utilizzata per qualsiasi spazio colore che specifica i colori con i canali R, G e B. color() richiede prima un parametro dello spazio colore, poi una serie di
valori del canale per RGB e, facoltativamente, alcuni valori alpha.
Troverai che molti dei nuovi spazi colore utilizzano questa funzione perché la presenza di funzioni specializzate come rgb, srgb, hsl, hwb e così via stava diventando un lungo elenco, quindi più facile far diventare lo spazio colore come parametro.
Vantaggi
- Uno spazio normalizzato per accedere agli spazi colore che usano canali RGB.
- Può scalare a qualsiasi spazio colore basato su RGB ad ampia gamma.
Svantaggi
- Non funziona con HSL, HWB, LCH, okLCH o okLAB
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
sRGB tramite color()
Questo spazio colore offre le stesse funzionalità di rgb(). Offre inoltre decimali compresi tra 0 e 1, utilizzati esattamente come tra 0% e 100%.
Vantaggi
- Quasi tutti i display supportano la gamma di questo spazio colore.
- Assistenza per gli strumenti di progettazione.
Svantaggi
- Non percepitamente lineare (come è
lch()) - Nessun colore con un'ampia gamma di colori.
- Le sfumature spesso attraversano una zona morta.
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
sRGB lineare tramite color()
Questa alternativa lineare all'RGB offre un'intensità del canale prevedibile.
Vantaggi
- Accesso diretto ai canali RGB, utile per dispositivi come motori di gioco o programmi di luci.
Svantaggi
- Non percepitamente lineare.
- Bianco e nero sono racchiusi sui bordi.
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
Le sfaccettature verranno trattate in dettaglio più avanti, ma rapidamente è utile vedere un gradiente da bianco a bianco srgb e linear-srgb per illustrare le differenze:
LCH
Nel primo spazio di questo post presentiamo la sintassi per accedere ai colori al di fuori della gamma RGB. È inoltre la prima a semplificare la creazione di colori a partire dalla gamma di un display. Questo perché qualsiasi colore dello spazio CIE (lch, oklch, lab, oklab) è in grado di rappresentare l'intero spettro cromatico visibile dall'uomo.
Questo spazio colore è modellato sulla visione umana e offre una sintassi per specificare uno qualsiasi di questi colori e altro ancora. I canali LCH sono leggerezza, crominanza e tonalità. Hue è un'angolazione, come in HSL e HWB. La leggerezza è un valore compreso tra 0 e 100, ma non come la leggerezza di HSL, è una leggerezza speciale, "percettiva lineare", La crominanza è simile alla saturazione; può variare da 0 a 230, ma è tecnicamente illimitata.
Vantaggi
- Manipolazione del colore prevedibile grazie alla sua percezione lineare, per lo più (vedi oklch).
- Utilizza canali che già conosci.
- Spesso presenta sfumature vivaci.
Svantaggi
- È facile uscire dalla gamma.
- In rare occasioni, per evitare la variazione della tonalità, potrebbe essere necessario modificare il punto centrale della sfumatura.
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
LABORATORIO
Un altro spazio colore creato per accedere alla gamma CIE, sempre con una dimensione di leggerezza percepita lineare (L). Le lettere A e B in LAB rappresentano gli assi unici della visione dei colori umana: rosso-verde e blu-giallo. Se ad A viene assegnato un valore positivo, aggiunge il rosso e il verde se è inferiore a 0. Se a B viene dato un numero positivo, viene aggiunto il giallo, con i valori negativi verso il blu.
Vantaggi
- Gradienti percettibilmente coerenti.
- High Dynamic Range.
Svantaggi
- Possibilità di variazione della tonalità.
- Difficile dare all'autore o indovinare il colore durante la lettura dei valori.
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
OKLCH
Questo spazio colore è corretto per LCH. Come nel caso di LCH, (L) continua a rappresentare la leggerezza percepita lineare, la C per la crominanza e la H per la tonalità.
Questo spazio ti sembra familiare se hai collaborato con HSL o LCH. Scegli un angolo sulla ruota dei colori per H, scegli la luminosità o l'oscurità regolando L, ma in questo caso la crominanza diventerà la saturazione. Sono abbastanza identici, ad eccezione del fatto che gli aggiustamenti alla leggerezza e alla crominanza tendono a venire in coppia, altrimenti può essere facile richiedere colori ad alta crominanza al di fuori di una gamma target.
Vantaggi
- Non ci sono sorprese quando si lavora con le tonalità di blu e viola.
- Leggerezza percettiva lineare.
- Utilizza canali che già conosci.
- High Dynamic Range.
- Ha un selettore dei colori moderno progettato da Evil Martians.
Svantaggi
- È facile uscire dalla gamma.
- Nuovi e relativamente inesplorati.
- Pochi selettori del colore.
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
OKLAB
Questo spazio è corretto per il lab. È anche rivendicato come uno spazio ottimizzato per la qualità dell'elaborazione delle immagini, che per noi in CSS significa qualità di manipolazione delle funzioni di colore e gradienti.
Vantaggi
- Spazio predefinito per animazioni e interpolazioni.
- Leggerezza percettiva lineare.
- Non c'è alcuna variazione di tonalità come i lab.
- Gradienti percettibilmente coerenti.
Svantaggi
- Nuovi e relativamente inesplorati.
- Pochi selettori del colore.
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
Display P3
La gamma e lo spazio colore del display P3 sono diventati popolari da quando Apple li supportava dal 2015 su iMac. Apple supporta anche display-p3 nelle pagine web tramite CSS dal 2016, cinque anni prima di qualsiasi altro browser. Se proviene da sRGB, questo è un ottimo spazio colore da utilizzare man mano che sposti gli stili a un intervallo dinamico più alto.
Vantaggi
- Un supporto eccellente, considerato la base di riferimento per i display HDR.
- Il 50% di colori in più rispetto a sRGB.
- DevTools offre un ottimo selettore colori.
Svantaggi
- Alla fine verrà superata dagli spazi Rec2020 e CIE.
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Rec2020
Rec2020 fa parte del passaggio a UHDTV (televisore ultra-alta definizione), offrendo un'ampia gamma di colori per l'utilizzo nei contenuti multimediali in 4K e 8K. Rec2020 è un'altra gamma basata su RGB, più grande di display-p3, ma non così comune tra i consumatori come Display P3.
Vantaggi
- Colori Ultra HD.
Svantaggi
- Non così comune tra i consumatori (non ancora).
- Non comunemente presenti nei dispositivi portatili o nei tablet.
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
RGB A98
A98 RGB, abbreviazione di Adobe 1998 RGB, è stato creato da Adobe per mostrare la maggior parte dei colori ottenibili dalle stampanti CMYK. Offre più colori rispetto a sRGB, soprattutto nelle tonalità del ciano e del verde.
Vantaggi
- Più grandi degli spazi colore sRGB e Display P3.
Svantaggi
- Non si tratta di uno spazio comune dedicato ai designer digitali.
- Non sono molte persone che portano le tavolozze da CMYK.
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
ProFoto RGB
Creato da Kodak, questo spazio con ampia gamma di colori offre in modo unico colori primari a gamma molto ampia e presenta variazioni di tonalità minime quando si cambia la luminosità. Sostiene inoltre di coprire il 100% dei colori delle superfici reali come documentato da Michael Pointer nel 1980.
Vantaggi
- La tonalità minima cambia quando viene modificata la luminosità.
- Colori primari brillanti.
Svantaggi
- Circa il 13% dei colori offerti è immaginario, ovvero non rientra nello spettro visibile umano.
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ, XYZ-d50, XYZ-d65
Lo spazio colore CIE XYZ comprende tutti i colori visibili a una persona con una vista media. Ecco perché viene utilizzato come riferimento standard per altri spazi colore. Y è la luminanza, X e Z sono possibili cromi all'interno della luminanza Y specificata.
La differenza tra d50 e d65 è il punto di bianco, dove d50 utilizza i punti di bianco d50 e d65 utilizza il punto di bianco d65.
Vantaggi
- L'accesso alla luce lineare offre casi d'uso pratici.
- Ideale per la miscelazione fisica dei colori.
Svantaggi
- Non perceptivamente lineari come lo sono lch, oklch, lab e oklab.
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
Spazi colore personalizzati
La specifica CSS Color 5 include anche un percorso per insegnare al browser uno spazio colore personalizzato. Si tratta di un profilo ICC che indica al browser come risolvere i colori.
@color-profile --foo {
src: url(path/to/custom.icc);
}
Una volta caricato, accedi ai colori da questo profilo personalizzato con la funzione color() e specifica i relativi valori del canale.
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
Interpolazione dei colori
Il passaggio da un colore all'altro si trova nell'animazione, nei gradienti e nella combinazione di colori. In genere, questa transizione viene specificata come colore iniziale e colore finale, in corrispondenza del quale il browser deve interpolare. In questo caso, l'interpolazione significa generare una serie di colori tra un colore e l'altro per creare una transizione fluida anziché istantanea.
Con un gradiente, l'interpolazione è una serie di colori lungo una forma. Con l'animazione si tratta di una serie di colori nel tempo.
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
Con un gradiente, i colori tra i due colori vengono visualizzati contemporaneamente:
Novità nell'interpolazione dei colori
Con l'aggiunta di nuove gamut e spazi colore, ci sono nuove opzioni
per l'interpolazione. La transizione di un colore in hsl da blu a bianco genera un risultato molto diverso da sRGB.
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
Non riesci a vedere la demo di Codepen?
Poi cosa succede se passi da un colore in uno spazio a un colore in uno spazio completamente diverso:
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
Non riesci a vedere la demo di Codepen?
Fortunatamente per te, la specifica Color 4
offre istruzioni per i browser su come gestire queste interpolazioni
degli spazi colorati. Nel caso precedente per .gradient, i browser noteranno gli spazi colore distinti e utilizzeranno lo spazio colore predefinito oklab.
Potresti pensare che il browser userebbe lch come spazio colore, dato che è il primo colore, ma non è così ed è per questo che mostro un secondo gradiente di confronto .lch. Il gradiente .lch è un gradiente dallo spazio colore lch.
Meno banding grazie al colore a 16 bit
Prima che questo colore funzionasse, tutti i colori venivano salvati in un numero intero a 32 bit per rappresentare tutti e quattro i canali: rosso, verde, blu e alpha. Si tratta di 8 bit per canale e di 2^ 24 colori possibili (senza alfa). 2 ^ 24 = 16.777.216, "milioni di colori".
Dopo questo processo di colore, quattro valori in virgola mobile a 16 bit, ogni canale avrà un proprio valore in virgola mobile invece di essere raggruppato. ovvero 64 bit di dati totali, che generano molti più di milioni di colori.
Questa operazione è necessaria per il supporto dei colori HD. Ciò aumenta la quantità di informazioni sui colori che possono essere memorizzate, il che ha un buon effetto collaterale: significa che il browser può utilizzare più colori in un gradiente.
La presenza di bande in gradiente si verifica quando i colori non sono sufficienti per creare una sfumatura uniforme e quando le "strisce" di colore diventano visibili. La banding è notevolmente attenuata con l'upgrade a colori a risoluzione più alta.
Controllo dell'interpolazione
La distanza più breve tra due punti è sempre una linea retta. Con l'interpolazione dei colori, per impostazione predefinita i browser seguono il percorso breve. Considera uno scenario in cui ci sono due punti in un cilindro di colore HSL. Un gradiente acquisisce i passaggi di colore spostandosi lungo la linea tra i due punti.
linear-gradient(to right, #94e99c, #e06242)
Vista dall'alto verso il basso di un cilindro HSL con una linea tra gli arresti di colore
La linea sfumatura riportata sopra va dritta dal colore verdastro al rosso, passando per il centro dello spazio colore. Sebbene quanto spiegato in precedenza sia utile per la comprensione iniziale, non è esattamente quello che accade. Ecco il gradiente nel seguente codepen, che non è chiaramente bianco al centro, come mostrato nella dimostrazione di simulazione.
Tuttavia, l'area centrale del gradiente ha perso la sua vitalità. Questo perché i colori più vivaci si trovano sul bordo della forma dello spazio colore, non nel centro dell'interpolazione. Questa è comunemente nota come "zona morta". Esistono diversi modi per risolvere questo problema.
Specificare più interruzioni del gradiente per evitare la zona morta
Una tecnica per evitare oggi la zona morta consiste nell'aggiungere ulteriori interruzioni di colore nel gradiente che guida intenzionalmente l'interpolazione per rimanere all'interno degli intervalli vibranti di uno spazio colore. È letteralmente una soluzione alternativa, perché le fermate aggiuntive aiutano a aggirare la zona morta.
Esiste uno strumento gradiente creato da Erik Kennedy che calcola intervalli di colore aggiuntivi per te, per aiutarti a evitare la zona morta anche negli spazi colore che tendono a gravitare verso questa zona. Utilizzandola passando gli stessi colori del primo esempio, ma modificando l'interpolazione dei colori in HSL, si ottiene questo risultato:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
Vista dall'alto verso il basso di un cilindro HSL con una linea curva con 9 interruzioni di colore
Con i punti di arresto guidati, l'interpolazione non è più una linea retta, ma sembra curva intorno alla zona morta, aiutando a mantenere la saturazione e creando un gradiente molto più vivace.
Sebbene lo strumento funzioni perfettamente, cosa accadrebbe se potessi avere un controllo simile o maggiore direttamente da CSS?
Come dirigere l'interpolazione dei colori
Nel colore 4, è stata aggiunta la possibilità di controllare la strategia di interpolazione tonalità
e rappresenta un nuovo modo per aggirare (:wink:) la zona morta. Pensa a un angolo
di tonalità e considera un gradiente di 2 stop che cambia solo l'angolo, ad esempio
cambiando la tonalità da 140deg a 240deg.
Interpolazione delle tonalità più brevi e più lunghe
Per impostazione predefinita, il gradiente seguirà la route shorter che può, a meno che tu non specifichi la route longer. Le opzioni di interpolazione di tonalità indirizzano la rotazione dell'angolo, ad esempio dire a qualcuno di girare a sinistra anziché a destra (eh, Zoolander):
Nell'esempio visivo precedente delle distanze di interpolazione del colore, il percorso breve e quello lungo sono simulati per illustrare la differenza. La distanza corta presenta meno tonalità, perché viene percorsa per la minore distanza possibile, dove la lunga distanza verrà percorsa su più tonalità.
Interpolazione delle tonalità crescente e decrescente
In Colore 4 esistono altre due strategie di interpolazione delle tonalità, ma sono esclusive degli spazi colore cilindrici. Per quanto riguarda i due colori degli esempi precedenti, l'immagine ora mostra come funziona l'aumento e la diminuzione.
Il codice Codepen riportato sopra ha utilizzato ColorJS per dimostrare il risultato previsto. Il CSS che scriveresti per ottenere lo stesso effetto senza una libreria JavaScript sarebbe:
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
Per chiudere l'interpolazione delle tonalità, ecco un divertente parco giochi in cui puoi modificare la tonalità tra due interruzioni di colore e vedere gli effetti dell'interpolazione delle tonalità e come gli spazi colore cambiano i risultati della sfumatura. Gli effetti possono essere molto diversi; considerali come quattro nuovi trucchi per la barra degli strumenti del colore.
Sfumature in spazi cromatici diversi
Ogni spazio colore, data la sua forma e la sua disposizione unica, darà come risultato un gradiente diverso. Guarda gli esempi di seguito, in particolare le opzioni "dal blu al bianco". Osserva come ogni spazio colore viene gestito in modo diverso. Nota il colore viola al centro, questo fenomeno è chiamato "sfumatura " durante l'interpolazione.
Non riesci a vedere la demo di Codepen?
L'immagine mostrata è solo uno dei tanti esempi tratti da Codepen. Ti consigliamo di provare Canary o Safari Tech Preview per provarli.
Alcuni gradienti in questi spazi saranno più vivaci di altri o si spostano meno
attraverso le zone morte.
Spazi come lab raggruppano i colori in modo ottimizzato per la saturazione, a differenza degli spazi ottimizzati per la scrittura dei colori da parte degli esseri umani come hwb().
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
La demo precedente, sebbene poco chiara nei risultati, mostra un'interpolazione più coerente con il lab. La sintassi dei lab non è semplice da leggere, però ci sono numeri negativi che non sono molto familiari se provengono da RGB o HSL. Buone notizie: possiamo usare hwb per una sintassi familiare, ma chiedere che il gradiente venga interpolato completamente all'interno di un altro spazio colore, ad esempio oklab.
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
Non riesci a vedere la demo di Codepen?
Questo esempio utilizza gli stessi colori in hwb, ma specifica lo spazio colore per l'interpolazione in hwb o oklab. hwb è un ottimo spazio colore per zone morbide o luminose molto
vibranti (vedi il colore ciano nell'esempio in alto). oklab è ottimo per gradienti perceptivamente lineari che rimangono
saturati. Questa funzionalità è molto divertente: puoi provare diversi spazi
colore per vedere il gradiente che preferisci.
Ecco un codepen che sperimenta con gradienti e spazi colore, combinando strategie di corrispondenza per esplorare le possibilità. Anche una transizione dal nero al bianco è diversa per ogni spazio colore.
Non riesci a vedere la demo di Codepen?
Blocco gamut
Esistono scenari in cui un colore può richiedere qualcosa al di fuori di una gamma. Considera il seguente colore:
rgb(300 255 255)
Il valore massimo per un canale colore nello spazio colore rgb è 255, ma qui
300 è stato specificato per il rosso. Che cosa succede? Blocco del gamut.
Il blocco avviene quando le informazioni aggiuntive vengono semplicemente rimosse. 300 diventerà 255
internamente al motore dei colori. Ora il colore è bloccato all'interno del suo spazio.
Scelta di uno spazio colore
Dopo aver imparato a conoscere questi spazi cromatici e i loro effetti, molte persone si sentono sopraffatte e vogliono sapere quale scegliere. Dai miei studi e dalla mia esperienza, non vedo un solo spazio colore per tutte le mie attività. Ognuno di essi ha dei momenti in cui produce il risultato desiderato.
Se esistesse uno spazio migliore, non verrebbero introdotti così tanti nuovi spazi.
Tuttavia, posso dire che gli spazi CIE, lab, oklab, lch e oklch, sono i miei punti di partenza. Se il risultato non è quello che sto cercando, proverò altri spazi. Per mescolare i colori e creare gradienti, sono d'accordo con la scelta predefinita delle specifiche di oklab. Per i sistemi di colori e i colori in generale dell'interfaccia utente, mi piace oklch.
Ecco un paio di articoli in cui abbiamo condiviso le loro strategie di colore
aggiornate per questi nuovi spazi colore e nuove caratteristiche. Ad esempio, Andrey Sitnik
ha fatto tutto su oklch, forse ti convincono a fare lo stesso:
- OKLCH in CSS: perché siamo passati da RGB e HSL di Andrey Sitnik
- Color Format (Formati cromatici) di Josh W. Comeau
- Ok, OKLCH di Chris Coyier
Migrazione al colore CSS HD
Esistono due strategie principali per aggiornare il colore del progetto web in modo da supportare display con un'ampia gamma di opzioni:
Riduzione significativa
Utilizza i nuovi spazi colore e lascia che sia il browser e il sistema operativo a stabilire quale colore mostrare in base alle funzionalità di visualizzazione.Miglioramento progressivo
Utilizza@supportse@mediaper valutare le funzionalità del browser dell'utente e, se le condizioni sono soddisfatte, fornisci colori a gamma ampia.
Se un browser non riconosce il colore display-p3:
color: red;
color: color(display-p3 1 0 0);
Se un browser riconosce il colore display-p3:
color: red;
color: color(display-p3 1 0 0);
Ciascuna di esse presenta vantaggi e svantaggi. Ecco un elenco rapido dei pro e dei contro:
Riduzione granulare
- Pro
- Il percorso più semplice.
- Il browser gamut mappa o bloccherà su sRGB se non è un display ad ampio gamut, quindi la responsabilità è sul browser.
- Svantaggi
- Il browser può applicare una mappatura gamut a un colore che non ti piace.
- Il browser potrebbe non comprendere la richiesta di colore e non riuscire del tutto. Tuttavia, questo può essere mitigato specificando il colore due volte, lasciando che la cascata di riserva al colore precedente che comprende.
Miglioramento progressivo
- Pro
- Maggiore controllo con la fedeltà dei colori gestita.
- Una strategia aggiuntiva che non influisce sui colori correnti.
- Svantaggi
- Devi gestire due sintassi dei colori diverse.
- Devi gestire due gamut di colori separate.
Verifica del supporto della gamma e dello spazio colore in corso
Il browser consente di verificare il supporto delle funzionalità a un'ampia gamma di gamma e del supporto della sintassi dei colori da CSS e JavaScript. L'esatta gamma di colori di cui l'utente non ha disponibile, viene fornita una risposta generalizzata per garantire la privacy dell'utente. Viene però reso disponibile il supporto esatto dello spazio colore, in quanto non è specifico delle funzionalità dell'hardware dell'utente, come la gamma.
Query di supporto per la gamma di colori
I seguenti esempi di codice controllano la gamma di colori del display dell'utente che visita il sito.
Controllo da CSS
La richiesta di assistenza meno specifica è la
query multimediale
dynamic-range:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
È possibile richiedere assistenza approssimativa o superiore con la
query multimediale
color-gamut:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Sono disponibili altre due query supporti per controllare l'assistenza:
Controllo da JavaScript
Per JavaScript, è possibile chiamare la funzione window.matchMedia() e passare una query multimediale per la valutazione.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
Il pattern precedente può essere copiato per il resto delle query supporti.
Domande di assistenza per lo spazio colore
I seguenti esempi di codice controllano il browser dell'utente che visita il sito e la selezione di spazi colore con cui lavorare.
Controllo da CSS
È possibile richiedere assistenza per i singoli spazi colore utilizzando una
query @supports:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
Controllo da JavaScript
Per JavaScript, la funzione CSS.supports() può essere chiamata e passata una proprietà e una coppia di valori per vedere se il browser comprende.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Unione dell'hardware e dei controlli di analisi
Nell'attesa che ogni browser implementi queste nuove funzionalità cromatiche, è consigliabile verificare sia la funzionalità hardware sia quella di analisi del colore. Spesso è quello che uso quando perfezioniamo progressivamente i colori all'alta definizione:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Debug del colore con Chrome DevTools
Chrome DevTools è aggiornato e dispone di nuovi strumenti per aiutare gli sviluppatori a creare, convertire ed eseguire il debug dei colori HD.
Selettore colori aggiornato
Il selettore colori ora supporta tutti i nuovi spazi colore. Permettendo agli autori di interagire con i valori del canale come farebbero.
Confini gamut
È stata aggiunta anche una linea di confine della gamma, che traccia una linea tra sgsuite e display-p3. Chiarimento della gamma di colori selezionati.
Ciò consente agli autori di distinguere visivamente i colori in HD da quelli non HD.
È particolarmente utile quando si lavora con la funzione color() e i nuovi spazi colore, perché sono in grado di produrre colori sia non HD che HD. Se vuoi controllare la gamma di colori, apri il selettore colori e guarda!
Conversione dei colori in corso...
DevTools è in grado di convertire da molti anni i colori tra i formati supportati,
come hsl, hwb, rgb ed esadecimale. shift + click su un campione di colore quadrato nel
riquadro Stili per eseguire questa conversione. I nuovi strumenti per il colore non si limitano a scorrere le conversioni, ma visualizzano un popup in cui gli autori possono visualizzare e
scegliere la conversione desiderata.
Durante la conversione, è importante sapere se la conversione è stata ridotta per adattarla allo spazio. Ora DevTools presenta un'icona di avviso sul colore convertito che ti avvisa di questo ritaglio.
Scopri altre funzionalità di debug dei CSS in DevTools nel loro recente annuncio.
Conclusione
Gli spazi colore non RGB sul web sono ancora agli inizi, ma credo che nel tempo vedremo un aumento dell'utilizzo da parte di designer e sviluppatori. Ad esempio, sapere quale spazio colore utilizzare per creare un sistema di progettazione è un ottimo strumento per essere presenti nella barra degli strumenti dei creator. Ogni spazio colore offre funzionalità uniche e un motivo per cui è stato aggiunto alla specifica CSS; si può iniziare a piccoli passi con le aggiunte in base alle esigenze.
Divertiti a giocare con questi nuovi giocattoli colorati! Una maggiore vivacità, manipolazioni e interpolazioni coerenti e nel complesso offrono un'esperienza più colorata agli utenti.
Letture aggiuntive
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/