Accedi a più colori e nuovi spazi

Questo documento fa parte della guida ai colori CSS ad alta definizione.

CSS Color 4 illustra una serie di nuove funzionalità e strumenti per CSS e colori. Il seguente codepen mostra tutte le sintassi dei colori nuova e precedente:

Leggi il riepilogo degli spazi colore classici.

La specifica di livello 4 ha introdotto 12 nuovi spazi colore per la ricerca dei colori, rispetto alle 7 nuove gamut condivise in precedenza:

• Lineare sRGB
• LCH
• okLCH
• LAB
• okLAB
• Display p3
• Rec2020
• RGB A98
• ProFoto RGB
• XYZ
• D50 XYZ
• XYZ d65

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() {#linear-s creativa}

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

LCH introduce la sintassi per accedere ai colori che non rientrano nella gamma RGB. È inoltre la prima a semplificare la creazione di colori fuori gamma per un display. Questo perché qualsiasi colore dello spazio CIE (lch, oklch, lab, oklab) può 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 luminosità è un valore compreso tra 0 e 100. È una leggerezza speciale "percettivamente lineare ", incentrata sull'uomo. La crominanza è simile alla saturazione; può variare da 0 a 230, ma tecnicamente non ha limiti.

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);
}

A98 RGB {#a98- GTIN}

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.

Termine chiave: il punto di bianco è un attributo di uno spazio colore, dove è presente il vero bianco all'interno dello spazio. Per gli schermi elettronici, la D65 è il punto bianco più comune ed è l'abbreviazione di 6500 Kelvin. Nella conversione del colore è importante che i punti bianchi corrispondano in modo che la temperatura del colore (caldo o freddo) non venga alterata.

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);
}

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%));
}

Fortunatamente per te, la specifica Color 4 offre istruzioni per i browser su come gestire queste interpolazioni degli spazi colorati. Per .gradient, i browser notano gli spazi colore differenziati e usano lo spazio colore predefinito oklab.

Puoi pensare che il browser utilizzerà lch come spazio colore, dato che è il primo colore, ma non è così. Ecco perché 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.

Controllare l'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)

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

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 prende la route shorter che può, a meno che non venga specificato per seguire 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 delle distanze di interpolazione della tonalità, il percorso breve e quello lungo vengono simulati per illustrare la differenza. La distanza corta presenta meno tonalità, poiché viene percorsa per la minore distanza possibile, quando la lunga distanza viene 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

Data la forma e la disposizione dei colori uniche, ogni spazio colore ha un gradiente diverso. Nei seguenti esempi, osserva come ogni spazio colore gestisce questa situazione in modo diverso, soprattutto nel colore blu/bianco. Nota che quanti di essi diventano viola al centro, una variazione di tonalità durante l'interpolazione.

Alcuni gradienti in questi spazi sono 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%));
}

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.

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

1. OKLCH in CSS: perché siamo passati da RGB e HSL di Andrey Sitnik
2. Color Format (Formati cromatici) di Josh W. Comeau
3. Ok, OKLCH di Chris Coyier

Passaggi successivi

Ora che hai acquisito familiarità con i nuovi spazi colore e i nuovi strumenti, puoi eseguire la migrazione al colore HD.

Una maggiore vivacità, manipolazioni e interpolazioni coerenti e nel complesso offrono un'esperienza più colorata agli utenti.

Leggi altre risorse colore nella guida.