Accedi a più colori e nuovi spazi

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

Il Colore CSS 4 delinea una serie di nuove e strumenti per CSS e colore. Il codepen riportato di seguito mostra tutte le nuove con le vecchie sintassi dei colori:

Leggi il riepilogo degli spazi colore classici.

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

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

Scopri i nuovi spazi colore web

I seguenti spazi colore offrono accesso a gamut più grandi rispetto a sRGB. La lo spazio colore display-p3 offre quasi il doppio dei colori rispetto all'RGB, mentre Rec2020 offre quasi il doppio rispetto a display-p3. Sono moltissimi colori!

La funzione color()

Il nuovo color() può essere utilizzata per qualsiasi spazio colore che specifica i colori con R, G e B canali. color() prende prima un parametro dello spazio colore, poi una serie di valori di canale per RGB e, facoltativamente, alcuni alpha.

Molti dei nuovi spazi colore usano questa funzione perché funzioni specializzate come rgb, srgb, hsl, hwb e così via stavano diventando una un lungo elenco, è più facile fare in modo che lo spazio colore sia un parametro.

Vantaggi

• Uno spazio normalizzato per l'accesso agli spazi colore che utilizzano canali RGB.
• Può scalare fino a qualsiasi spazio colore basato su RGB ad ampia gamma.

Svantaggi

• Non funziona con HSL, HWB, LCH, okLCH o okLAB

di Gemini Advanced.

.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 numeri decimali compresi tra 0 e 1, utilizzati esattamente come da 0% a 100%.

Vantaggi

• Quasi tutti i display supportano l'intervallo di questo spazio colore.
• l'assistenza per gli strumenti di progettazione.

Svantaggi

• Non percettivamente lineare (come lch() è)
• Nessun colore ad ampia gamma di colori.
• I gradienti passano spesso attraverso 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-sIniziativa}

Questa alternativa lineare all'RGB offre un'intensità del canale prevedibile.

Vantaggi

• Accesso diretto ai canali RGB, utile per motori di gioco o spettacoli di luci.

Svantaggi

• Non percettivamente lineare.
• Bianco e nero ci sono 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);
}

I gradienti vengono discussi in dettaglio più avanti. ma rapidamente è importante vedere in bianco e nero srgb e linear-srgb gradiente per illustrarne le differenze:

LCH

LCH introduce la sintassi per accedere ai colori al di fuori della gamma RGB. È inoltre la prima a semplificare la creazione di spazi fuori gamma colore per un display. Il motivo è che tutti i colori degli spazi CIE (lch, oklch, lab, oklab) può rappresentare tutto lo spettro di colori visibile dall'uomo.

Questo spazio colore si basa sulla visione umana e offre per specificare uno qualsiasi di questi colori e altri ancora. I canali LCH sono la leggerezza, crominanza e tonalità. La tonalità è un angolo, ad esempio in HSL e HWB. La leggerezza è un valore tra 0 e 100. È una caratteristica speciale "percettivamente lineare", incentrato sulla persona leggerezza. La crominanza è simile alla saturazione; può variare da 0 a 230, ma è tecnicamente illimitato.

Vantaggi

• Manipolazione del colore prevedibile grazie a una forma percettivamente lineare, per lo più (vedi oklch).
• Usa canali già noti.
• Spesso presenta gradienti vivaci.

Svantaggi

• È facile uscire dalla gamma.
• In rare occasioni, potrebbe essere necessario regolare il punto centrale del gradiente per evitare la variazione della tonalità.

di Gemini Advanced.

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

LAB

Un altro spazio colore creato per accedere alla gamma CIE, sempre con una la dimensione della leggerezza lineare (L). In LAB, A e B rappresentano gli assi unici visione artificiale a colori: rosso-verde e blu-giallo. Quando A viene assegnato un valore positivo aggiunge il rosso e aggiunge il verde quando è inferiore a 0. Quando a B viene dato un numero positivo aggiunge il giallo, dove i valori negativi sono verso il blu.

Vantaggi

• Gradienti percettamente coerenti.
• High Dynamic Range.

Svantaggi

• Possibile variazione di tonalità.
• È difficile stabilire se stabilire 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 è correttore per LCH. E come LCH, (L) continua a rappresentare la leggerezza percettivamente lineare, C per la crominanza e la H per la tonalità.

Questo spazio ti sembra familiare se hai lavorato con HSL o LCH. Scegli un'angolazione sulla ruota dei colori per H, scegli una luminosità o quantità di oscurità regolando L, ma poi abbiamo la crominanza anziché la saturazione. Sono abbastanza identici, tranne per il fatto che le regolazioni della leggerezza e della crominanza tendono a sono disponibili in coppia, altrimenti può essere facile chiedere colori ad alta crominanza al di fuori di una gamma target.

Vantaggi

• Nessuna sorpresa quando si lavora con le tonalità blu e viola.
• Leggerezza percettivamente lineare.
• Usa canali già noti.
• High Dynamic Range.
• Ha un moderno selettore di colori di Evil Martians.

Svantaggi

• È facile uscire dalla gamma.
• Nuovi e relativamente inesplorati.
• Pochi selettori colori.

.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 è correttivo per il lab. Viene rivendicato come spazio ottimizzato anche per la qualità di elaborazione delle immagini, che per in CSS indica la qualità di manipolazione dei gradienti e delle funzioni colore.

Vantaggi

• Spazio predefinito per animazioni e interpolazioni.
• Leggerezza percettivamente lineare.
• Nessuna variazione di tonalità come quella dei lab.
• Gradienti percettamente coerenti.

Svantaggi

• Nuovi e relativamente inesplorati.
• Pochi selettori colori.

.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 di colori e lo spazio colore P3 del display sono diventati popolari da quando Apple supportava dal 2015 sul loro iMac. Apple supporta inoltre display-p3 nelle pagine web tramite CSS dal 2016, cinque anni avanti rispetto a qualsiasi altro browser. Se il colore proviene da sRGB, è un ottimo colore dello spazio per iniziare a lavorare man mano che sposti gli stili in un intervallo dinamico più alto.

Vantaggi

• Ottimo supporto, considerato la base per i display HDR.
• 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 alla UHDTV (televisore ultra alta definizione), che offre un'ampia gamma di colori per l'uso nei contenuti multimediali 4K e 8K. Rec2020 è un altro 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 è ancora così comune tra i consumatori.
• Non si trovano comunemente su dispositivi portatili o 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-barba}

Abbreviazione di Adobe 1998 RGB, A98 RGB è stato creato da Adobe per presentare la maggior parte delle colori ottenibili con le stampanti CMYK. Offre più colori rispetto allo sRGB, in particolare nelle tonalità del ciano e del verde.

Vantaggi

• Spazi colore più grandi degli spazi colore sRGB e Display P3.

Svantaggi

• Non è uno spazio comune all'interno dei progettisti digitali.
• Non molte persone 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 ampio gamut offre una gamma ultralarga di Colori e caratteristiche con variazioni di tonalità minime quando cambi la leggerezza. dichiara inoltre di coprire il 100% del colori delle superfici reali documentato da Michael Pointer nel 1980.

Vantaggi

• La tonalità minima cambia quando si cambia la leggerezza.
• Colori primari vivaci.

Svantaggi

• Circa il 13% dei colori offerti sono immaginari, ovvero non rientrano 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 vista media. Questo è il motivo per cui è utilizzato come riferimento standard per altri colori spazi di archiviazione. Y è la luminanza, X e Z sono possibili cromi all'interno di un valore di Y specificato illuminazione.

La differenza tra d50 e d65 è il punto bianco, dove d50 utilizza la d50 i punti bianchi e d65 usa il punto di bianco d65.

Termine chiave: il punto bianco è un attributo di uno spazio colore, rappresenta il punto in cui il bianco reale esiste nello spazio. Per gli schermi elettronici, D65 è il modello punto bianco comune ed è l'abbreviazione di 6500 Kelvin. Sono importanti a colori conversione della corrispondenza dei punti bianchi in modo che la temperatura di colore (caldo o freddo) non ne sono interessati.

Vantaggi

• L'accesso a luce lineare offre pratici casi d'uso.
• È l'ideale per mescolare fisicamente i colori.

Svantaggi

• Non percettivamente lineari come 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

Anche la specifica CSS Color 5 ha un percorso per insegnare al browser uno spazio colore personalizzato. Si tratta di un profilo ICC che indica al browser come per 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 specificare i relativi valori di canale.

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

Interpolazione colore

Il passaggio da un colore all'altro avviene in animazioni, gradienti e miscelazione dei colori. Questa transizione viene in genere specificata come colore iniziale e colore finale, in cui il browser dovrebbe interporsi tra loro. L'interpolazione in questo caso significa generare una serie di colori intermedi per creare una transizione fluida anziché istantanea.

Con un gradiente, l'interpolazione è una serie di colori lungo una forma. Con l'animazione mostra una serie di colori che col 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 intermedi vengono mostrati contemporaneamente:

Novità dell'interpolazione a colori

Con l'aggiunta di nuove gamut e spazi colore, ci sono nuovi opzioni per l'interpolazione. Transizione di un colore in hsl da blu a bianco si traduce in qualcosa di 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);
}

Quindi cosa succede se passi da un colore in uno spazio a uno in uno 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%));
}

Per tua fortuna, il Colore 4 contiene istruzioni per i browser su come gestire questi le interpolazioni dello spazio colore. Per .gradient, i browser notano la differenziazione spazi colore e utilizza lo spazio colore predefinito oklab.

Si potrebbe pensare che il browser utilizzerebbe lch come spazio colore, poiché si tratta il primo colore, ma non è così. Ecco perché mostro un secondo gradiente di confronto .lch. Il gradiente .lch è un gradiente dello spazio colore lch.

Minore strisce grazie al colore a 16 bit

Prima che questi colori funzionino, tutti i colori venivano salvati in un numero intero a 32 bit in rappresentano tutti e quattro i canali; rosso, verde, blu e alfa. Questo è il valore di 8 bit per canale e 2^ 24 colori possibili (ignorando alfa). 2 ^ 24 = 16.777.216, "milioni di colori".

Terminata la creazione di questo colore, con quattro valori in virgola mobile a 16 bit, ogni canale viene il suo galleggiante, invece di essere accorpato tra loro. ovvero 64 bit di dati totali, producendo molti più di milioni di colori.

Questa operazione è necessaria per supportare il colore HD. Ciò aumenta la quantità di colore informazioni che possono essere archiviate, il che ha un buon effetto collaterale perché più colori da usare in un gradiente per il browser.

La banda sfumata si verifica quando i colori non sono sufficienti per creare una sfumatura uniforme e "strisce" di colore diventano visibili. Il banding è notevolmente mitigato con eseguire l'upgrade a colori a risoluzione più alta.

Controlla l'interpolazione

La distanza più breve tra due punti è sempre una linea retta. Con colore l'interpolazione, i browser adottano il percorso breve per impostazione predefinita. Pensa a uno scenario dove sono presenti due punti in un cilindro colorato HSL. Un gradiente acquisisce la sua passi di colore viaggiando lungo la linea tra i due punti.

linear-gradient(to right, #94e99c, #e06242)

La linea di gradiente riportata sopra va dritta tra il colore verdastra e il rossiccio colore, passando per il centro dello spazio colore. Anche se quanto sopra è ottimo, per aiutare la comprensione iniziale, non è esattamente ciò che accade. Ecco il gradiente nel seguente codepen; chiaramente non è bianco al centro, ha mostrato la dimostrazione fittizia.

L'area centrale del gradiente ha però perso la sua vibrazione. Questo perché i colori più vivaci sono al bordo della forma dello spazio colore, non centrale in cui si avvicinava l'interpolazione. Questo è comunemente definito come la "zona morta". Là esistono alcuni modi per risolvere questo problema o per aggirare questo problema.

Specificare più tappe del gradiente per evitare la zona morta

Una tecnica per evitare la zona morta oggi consiste nell'aggiungere ulteriori stop di colore a il gradiente che guida intenzionalmente l'interpolazione per rimanere all'interno vivaci intervalli di uno spazio colore. È letteralmente una soluzione, poiché altre fermate lo aiutano a superare la zona morta.

È disponibile uno strumento gradiente creato da Erik Kennedy che calcola i colori aggiuntivi. si ferma al posto tuo, per aiutarti a evitare la zona morta anche negli spazi colore che tendono a gravita su di esso. Utilizzo dello stesso codice, trasmettendo gli stessi colori del primo esempio ma cambiando l'interpolazione del colore in HSL, si produce questo:

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

Con i punti di interruzione guidata, l'interpolazione non è più una linea retta, ma curva intorno alla zona morta, contribuendo a mantenere la saturazione, con conseguente un gradiente molto più vivace.

Sebbene lo strumento funzioni un ottimo lavoro, cosa accadrebbe se potessi ottenere risultati simili o direttamente dal CSS?

Direzione dell'interpolazione dei colori

Nel colore 4, la possibilità di controllare la strategia di interpolazione delle tonalità. ed è un nuovo modo per evitare (:wink:) la zona morta. Pensa a una tonalità angolo e considera un gradiente di 2 stop che cambia solo l'angolo, passando al colore passando da 140deg a 240deg, ad esempio.

Interpolazione tonalità più corta o più lunga

Per impostazione predefinita il gradiente prende il shorter può farcela, a meno che che hai specificato affinché prenda longer percorso. Tonalità Le opzioni di interpolazione indirizzano la rotazione angolare, ad esempio dicendo a qualcuno di girare a sinistra anziché a destra (heh, Zoolander):

Nell'esempio delle distanze di interpolazione tonalità, il percorso breve e il percorso lungo viene simulato per illustrare la differenza. La breve distanza ha in meno tonalità perché viene percorsa per una distanza minima possibile, in cui la lunga distanza ha percorso più tonalità.

Interpolazione delle tonalità crescente o decrescente

In Colore 4 sono disponibili altre due strategie di interpolazione delle tonalità, ma queste sono esclusive per i modelli cilindrici spazi colore. Restando con i due colori degli esempi precedenti, l'immagine ora mostra come funziona l'aumento e la diminuzione.

Il codepen riportato sopra ha utilizzato ColorJS per dimostrare il risultato previsto. Il CSS che scriveresti per ottenere lo stesso effetto senza un La 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 2 interruzioni di colore e osserva gli effetti di una scelta di interpolazione tonalità e come gli spazi colore cambiano i risultati dei gradienti. Gli effetti possono essere molto different; considera questi quattro nuovi trucchi nella tua cintura degli strumenti colorata.

Gradienti in spazi colore diversi

Ogni spazio colore, data la sua forma e disposizione cromatica uniche, genera un un gradiente diverso. Nei seguenti esempi, osserviamo come ogni spazio colore li gestisce in modo diverso, soprattutto in blu o bianco. Nota quanti diventano viola al centro; una variazione di tonalità durante l'interpolazione.

Alcuni gradienti in questi spazi sono più vivaci di altri o viaggiano meno attraverso zone morte. Gli spazi come lab racchiudono i colori in modo da ottimizzare la saturazione, al contrario di spazi ottimizzati per consentire agli esseri umani di scrivere i colori in 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 discreta nei risultati, mostra risultati più coerenti dell'interpolazione con un lab. La sintassi del lab però non è semplice da leggere, numeri negativi che non sono familiari quando provengono da rgb o hsl. Buono possiamo usare hwb per una sintassi familiare, ma chiedere che il gradiente sia sono interpolati interamente all'interno di un altro spazio colore, come 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%));
}

In questo esempio vengono utilizzati gli stessi colori in hwb ma specifica lo spazio colore per l'interpolazione in hwb o oklab. hwb è un ottimo spazio colore per vibrazione ma possibili zone morte o punti luminosi (si veda l'hot spot ciano nella esempio in alto). oklab è ottimo per i gradienti percettivamente lineari che rimangono satura. Si tratta di una funzione molto divertente, perché puoi provarla gli spazi per vedere il gradiente che preferisci.

Ecco un Codepen che sperimenta con sfumature e spazi colore, combinando strategie di corrispondenza per esplorare le possibilità. Anche una transizione dal nero al bianco è diversa in ogni spazio colore.

Blocco di Gamut

Esistono scenari in cui un colore potrebbe richiedere qualcosa al di fuori di una gamma di colori. Considera il seguente colore:

rgb(300 255 255)

Il massimo per un canale colore nello spazio colore rgb è 255, ma qui 300 è stato specificato per il rosso. Che cosa succede? Blocco di Gamut.

Il blocco si verifica quando le informazioni aggiuntive vengono semplicemente rimosse. 300 diventa 255 al motore a colori. Il colore è stato bloccato all'interno del suo spazio.

Scelta di uno spazio colore

Molte persone, dopo aver imparato a conoscere questi spazi cromatici e i loro effetti, si sentono sopraffatte e vuole sapere quale per scegliere. Dai miei studi e non vedo uno spazio colore come unico per tutte le mie attività. Ciascuna hanno momenti in cui producono il risultato desiderato.

Se ci fosse uno spazio migliore, non ci sarebbero così tanti nuovi spazi sono state introdotte.

Tuttavia, posso dire che gli spazi CIE (lab, oklab, lch e oklch) sono i miei punti di partenza. Se il risultato non è quello che cerco, testare altri spazi. Per mescolare i colori e creare sfumature, accetto scelta delle specifiche predefinita di oklab. Per i sistemi di colore e i colori generali dell'interfaccia utente, oklch.

Ecco un paio di articoli in cui gli utenti hanno condiviso il loro colore aggiornato strategie sulla base di questi nuovi spazi colore e funzionalità. Ad esempio, Andrey Sitnik ha dato il meglio di sé su oklch, forse ti convincono a fare lo stesso:

1. OKLCH in CSS: perché siamo passati da RGB e HSL Andrea Rossi
2. Formati di colore di Josh W. Comeau
3. Ok, OKLCH di Chris Coyier

Passaggi successivi

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

Una maggiore vivacità, manipolazioni e interpolazioni coerenti e nel complesso assicurano una un'esperienza più vivace per gli utenti.

Leggi altre risorse per i colori dalla guida.