Sintassi dei colori relativi CSS

Creare nuovi colori in base ai canali e ai valori di un altro colore.

Adam Argyle

Chrome 119 è una funzionalità per i colori molto potente di Livello di colore CSS 5. Sintassi relativa dei colori crea un percorso fluido per la manipolazione del colore all'interno di CSS, offrendo modi per autori e designer di:

• Lighten
• Scurire
• Satura
• Desatura
• Migliora crominanza
• Regola l'opacità
• Inversione
• Integrazione
• Converti
• Contrasto
• Tavolozze dei colori
  .
  • Monocromatico
  • Analoga
  • Triadica
  • Tededico
  • Monocromatico con rotazione della tonalità

Prima della sintassi del colore relativo, per modificare l'opacità di un colore è necessario creare proprietà personalizzate per i canali di un colore (di solito HSL) e assemblare in un colore finale e un colore variante finale. Ciò significa gestire molte pezzi di colore, che possono diventare rapidamente onerosi.

:root {
  --brand-hue: 300deg;
  --brand-saturation: 75%;
  --brand-lightness: 50%;

  --brand-hsl:
    var(--brand-hue)
    var(--brand-saturation)
    var(--brand-lightness);

  --brand-color: hsl(var(--brand-hsl));

  /* all this work just so I can set the opacity to 50% in a variant */
  --brand-color-variant: hsl(var(--brand-hsl) / 50%);
}

Dopo la sintassi relativa del colore, puoi creare un colore del brand con qualsiasi spazio colore o la sintassi di cui hai bisogno e crea una variante di opacità dimezzata con molto meno codice. È è molto più facile leggere l'intento degli stili e del sistema.

:root {
  --brand-color: hsl(300deg 75% 50%);
  --brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}

Questo post ti aiuterà a imparare la sintassi e a dimostrare le comuni manipolazioni dei colori.

Se preferisci i video, quasi tutto il seguente articolo è trattato in questa GUI Challenge.

Panoramica della sintassi

L'obiettivo della sintassi relativa dei colori è consentire di ricavare un colore da un altro colore. Il colore di base è chiamato colore di origine, questo è il colore che viene dopo la nuova parola chiave from. Il browser converti e separa il colore di origine in modo da offrire le parti come variabili da usare nella nuova definizione del colore.

Il diagramma precedente mostra il colore di origine green che viene convertito nel lo spazio colore del nuovo colore, trasformati in singoli numeri rappresentati come r, g, b e alpha che vengono poi utilizzate direttamente come valori del nuovo colore rgb().

Sebbene questa immagine mostri la ripartizione, il processo e le variabili, non è cambiare il colore. Le variabili vengono reinserite nel colore invariato, quindi producendo un fermoimmagine di colore verde.

Nota: per un riepilogo su come specificare i colori, visita la pagina relativa al colore ad alta definizione di Google per tutte le informazioni del colore web. In questo post si presume che tu abbia familiarità con i colori funzionali notazione, spazi colore come OKLCH e gamut di colori.

La parola chiave from

La prima parte della sintassi da imparare è l'aggiunta della parte from <color> alla che specifica un colore. Va subito prima di specificare i valori. Ecco un codice esempio in cui tutto ciò che è stato aggiunto è from green, subito prima dei valori per rgb().

.syntax-introduction_same-colors {
  color: green;
  color: rgb(0 128 0);
  color: rgb(from green r g b);    /* result = rgb(0 128 0) */
}

La parola chiave from, vista come primo parametro nella notazione funzionale, trasforma la definizione del colore in un colore relativo. Dopo la parola chiave from, CSS prevede un colore, un colore che ispiri il prossimo colore.

Conversione colore

In termini più semplici, converte il verde in canali r g e b per l'utilizzo in una nuova colore.

rgb(from green r g b)           /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b);   /* r=0 g=128 b=0 */

Colori di proprietà personalizzate

La lettura di rgb from green è molto chiara e facile da capire. Ecco perché le proprietà personalizzate e la sintassi dei colori relativi rappresentano un'ottima corrispondenza, perché può eliminare il mistero del colore from. Inoltre, in genere non è necessario conoscere il formato del colore del colore della proprietà personalizzata, mentre crei un nuovo colore nel formato che preferisci.

rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b)   /* clear */

Lavora nello spazio colore che preferisci

Puoi scegliere lo spazio colore con la notazione colore che preferisci.

rgb(from hsl(120 100% 25%) r g b)     /*  r=0   g=128  b=0    */
hsl(from hsl(120 100% 25%) h s l)     /*  h=120 s=100% l=25%  */
hwb(from hsl(120 100% 25%) h w b)     /*  h=120 w=0%   b=50%  */
lch(from hsl(120 100% 25%) l c h)     /*  l=46  c=68   h=134  */

La sintassi relativa del colore include quel passaggio di conversione; il colore dopo from è convertito nello spazio colore come specificato all'inizio del colore. Non è necessario che l'input e l'output corrispondano, il che è molto liberatorio.

Anche la possibilità di scegliere uno spazio colore è determinante, come la scelta di un colore. spazio tende a essere più concentrato sul tipo di alternanza di colori che non è un preferenza. La preferenza è nei risultati, non nel formato del colore o nel canale di testo. Questo aspetto diventerà molto più chiaro nelle sezioni che illustrano i casi d'uso, spazi colore diversi eccellono in diverse attività.

Mescolare, abbinare, omettere e ripetere le variabili

Una cosa strana ma entusiasmante di questa sintassi: le variabili non devono essere riordinata e può essere ripetuta.

rgb(from green g g g)    /* rgb(128 128 128) */
rgb(from green b r g)    /* rgb(0 0 128) */
rgb(from green 0 0 g)    /* rgb(0 0 128) */

Opacità come variabile

La sintassi fornisce anche l'opacità come variabile denominata alpha. È facoltativo, e segue / nella notazione colore funzionale.

rgb(from #00800080 r g b / alpha)             /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha)      /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha)    /* alpha=50% */

Utilizzare calc() o altre funzioni CSS sulle variabili

Finora abbiamo creato più volte il colore verde. Imparare la sintassi, acquisire familiarità con i passaggi di conversione e destrutturazione. Ora è per modificare le variabili, cambia l'output in modo che non sia uguale di testo.

green                              /*  h=120 s=100% l=25%  */
hsl(from green calc(h * 2) s l)    /*  h=240 s=100% l=25%  */

Ora è blu marino! La tonalità è raddoppiata, prendendo una tonalità di 120 per trasformarla in 240, alterando completamente il colore. Questa operazione ha ruotato la tonalità lungo il colore una ruota, un trucco intelligente reso molto semplice con gli spazi colore cilindrici ad esempio HSL, HWB LCH e OKLCH

Per vedere visivamente i valori dei canali, in modo da poter fare calcoli matematici senza dover tirare a indovinare o memorizzare le specifiche, prova questo strumento per i valori dei canali relativi alla sintassi dei colori relativi. Rivela il valore di ogni canale in base alla sintassi specificata, consentendoti di sapere esattamente con quali valori hai a disposizione.

Verifica il supporto del browser

@supports (color: rgb(from white r g b)) {
  /* safe to use relative color syntax */
}

Casi d'uso e dimostrazioni

I seguenti esempi e casi d'uso hanno molte sintassi alternative da ottenere risultati simili o uguali. Le variazioni provengono dagli spazi colore e i canali offerti.

Inoltre, molti esempi mostrano le regolazioni dei colori con la fraseologia di by e to. Un colore modificato by rappresenta una variazione di colore relativa; una modifica che utilizza della variabile e apporta un aggiustamento in base al suo valore corrente. R colore modificato to è una variazione di colore assoluta; una modifica che non utilizza della variabile, specificando invece un valore completamente nuovo.

Tutte le demo sono disponibili in questa raccolta Codepen.

Schiarire un colore

L'OKLCH, OKLAB XYZ o Gli spazi colore sRGB offrono la risultati prevedibili quando si schiariscono i colori.

Nota: scopri di più sui risultati prevedibili per i gradienti in questo puntata del podcast CSS.

Alleggerisci di una quantità

Nell'esempio seguente, .lighten-by-25 prende il colore blue e lo converte in OKLCH, schiarisce il blu aumentando il canale l (leggerità) moltiplicando il valore corrente di 1.25. Ciò spinge la luminosità blu verso il bianco del 25%.

.lighten-by-25 {
  background: oklch(from blue calc(l * 1.25) c h);
}

Definisci un valore specifico

Il seguente esempio .lighten-to-75 non utilizza il canale l per blue, sostituisce completamente il valore con 75%.

.lighten-to-75 {
  background: oklch(from blue 75% c h);
}

Scurire un colore

Gli stessi spazi colore efficaci nel schiarire un colore sono ideali anche per o scurire il colore.

Scurire di una quantità

L'esempio seguente .darken-by-25 prende il colore blu e lo converte in OKLCH, scurisce il blu diminuendo il canale l (leggerità) del 25% di moltiplicando il valore per .75. Questo spinge il colore blu verso il nero del 25%.

.darken-by-25 {
  background: oklch(from blue calc(l * .75) c h);
}

Scurisci fino a un valore specificato

Il seguente esempio .darken-to-25 non utilizza il canale l per scurire blue, sostituisce completamente il valore con 25%.

.darken-to-25 {
  background: oklch(from blue 25% c h);
}

Saturare un colore

Satura di una quantità

L'esempio seguente .saturate-by-50 utilizza il valore s di hsl() per aumentare Vibrazione di orchid da un parente 50%.

.saturate-by-50 {
  background: hsl(from orchid h calc(s * 1.5) l);
}

Saturare a una quantità specifica

Il seguente esempio .saturate-to-100 non utilizza il canale s di hsl(), specifica invece il valore di saturazione desiderato. In questo esempio, la saturazione è aumentata a 100%.

.saturate-to-100 {
  background: hsl(from orchid h 100% l);
}

Desaturare un colore

Desatura di una quantità

L'esempio seguente .desaturate-by-half utilizza il valore s di hsl() per diminuire della saturazione di indigo.

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Desatura a un valore specifico

Invece di desaturare di una quantità, è possibile desaturare a un livello desiderato valore. L'esempio seguente .desaturate-to-25 crea un nuovo colore basato su indigo ma imposta la saturazione al 25%.

.desaturate-to-25 {
  background: hsl(from indigo h 25% l);
}

Evidenziazione della crominanza di un colore

Questo effetto è simile alla saturazione di un colore, ma è diverso in un paio di in molti modi diversi. Innanzitutto, si tratta di una modifica di chroma, non di una modifica di saturation, e questa è perché gli spazi colore che possono essere potenziati nell'intervallo dinamico alto non utilizzano di saturazione. Gli spazi colore con chroma sono High Dynamic Range consentendo agli autori di aumentare la brillantezza del colore oltre la saturazione. persino in grado di farlo.

.increase-chroma {
  background: oklch(from orange l calc(c + .1) h);
}

Regola l'opacità di un colore

La variante semitrasparente di un colore è uno dei colori più comuni gli aggiustamenti apportati ai sistemi di progettazione. Vedi l'esempio nell'introduzione se l'articolo ti è sfuggito, descrive molto bene lo spazio del problema.

Regola l'opacità di una quantità

.decrease-opacity-by-25 {
  background: rgb(from lime r g b / calc(alpha / 2));
}

Regola l'opacità su un valore specifico

.decrease-opacity-to-25 {
  background: rgb(from lime r g b / 25%);
}

Inverti un colore

L'inversione dei colori è una funzione di regolazione del colore comune disponibile nelle raccolte di colori. Un modo per ottenere questo risultato è convertire un colore in RGB e poi sottrarre ogni da 1.

.invert-each-rgb-channel {
  background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}

Abbina un colore

Se il tuo obiettivo non era quello di invertire un colore ma piuttosto di completarlo, allora la rotazione è probabilmente ciò che stai cercando. Scegli uno spazio colore che offra la tonalità come angolo, quindi usa calc() per ruotare la tonalità della quantità desiderata. La ricerca del complemento di un colore si ottiene ruotando di mezzo giro, in questo caso puoi aggiungere o sottrarre dal canale h di 180 per ottenere il risultato.

.complementary-color {
  background: hsl(from blue calc(h + 180) s l);
}

Confrontare un colore

Come metodo per ottenere rapporti di contrasto di colore accessibili, considera L* (Lstar). Viene utilizzato il canale di leggerezza (L) (approssimativamente) uniformemente uniforme da LCH e OKLCH in calc(). A seconda se il target è basso, medio o alto l'L* delta è di circa 40, 50 o 60 circa.

Questa tecnica funziona bene su qualsiasi tonalità in LCH o OKLCH.

Confrontare un colore più scuro

La classe .well-contrasting-darker-color mostra L* con un delta di 60. Poiché il colore originario è scuro (lucezza di basso valore), viene aggiunto il 60% (0,6) al canale della leggerezza. Questa tecnica è usata per trovare un buon contrasto, testo scuro con la stessa tonalità su uno sfondo chiaro.

.well-contrasting-darker-color {
  background: darkred;
  color: oklch(from darkred calc(l + .60) c h);
}

Confrontare un colore più chiaro

La classe .well-contrasting-lighter-color mostra L* con un delta del 60% . Poiché il colore originario è un colore chiaro (leggerità di alto valore), 0,60 è sottratto dal canale di leggerezza.

.well-contrasting-lighter-color {
  background: lightpink;
  color: oklch(from lightpink calc(l - .60) c h);
}

Tavolozze dei colori

La sintassi relativa dei colori è molto efficace nella creazione delle tavolozze dei colori. In particolare sono utili e potenti grazie al numero di spazi colore disponibili. Le seguenti negli esempi usano tutti OKLCH perché il canale di leggerezza è affidabile canale può essere ruotato senza effetti collaterali. L'esempio finale mostra combinazione di regolazioni della luminosità e della rotazione della tonalità per un'esperienza questo risultato.

Apri il codice sorgente di esempio e prova a cambiare --base-color, in quanto siano dinamiche queste tavolozze. È divertente!

Se ti piacciono i video, posso fornirti informazioni dettagliate sulla creazione di tavolozze dei colori in CSS con OKLCH su YouTube.

Tavolozze monocromatiche

Creare una tavolozza monocromatica è creare una tavolozza della stessa tonalità, ma con variazioni di luminosità e oscurità. Il colore centrale è il colore di origine per la tavolozza, dove due varianti più chiare e due più scure vengono lato server.

:root {
  --base-color: deeppink;

  --color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
  --color-1: oklch(from var(--base-color) calc(l + .10) c h);
  --color-2: var(--base-color);
  --color-3: oklch(from var(--base-color) calc(l - .10) c h);
  --color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}

Prova una serie di tavolozze realizzate con la sintassi relativa dei colori e OKLCH

Open Props, una libreria di variabili CSS senza costi, offre le tavolozze dei colori create con questa strategia e le rende facilmente utilizzabili con per l'importazione. Inoltre, sono realizzati con un colore personalizzabile, un colore e ne sprigiona una tavolozza!

Tavolozze analoghe

Poiché con OKLCH e HSL la rotazione delle tonalità è così semplice, è semplice creare un tavolozza dei colori analoghi. Ruota la tonalità di una quantità che preferisci per i risultati e cambia il colore di base. e osservare lo sviluppo di nuove tavolozze da parte del browser.

:root {
  --base-color: blue;

  --primary:   var(--base-color);
  --secondary: oklch(from var(--base-color) l c calc(h - 45));
  --tertiary:  oklch(from var(--base-color) l c calc(h + 45));
}

Tavolozze triadiche

Simili ai colori complementari, le tavolozze dei colori triadici sono rotazioni di tonalità contrapposte, ma armoniose, dato un colore di base. Dove un un colore complementare si trova sul lato opposto di un colore, come una linea retta disegnate al centro della ruota dei colori, le tavolozze triadici sono triangolo di linee, trovando due colori equamente ruotati da un colore di base. A questo scopo, ruota la tonalità 120deg.

Questa è una lieve semplificazione della teoria dei colori, ma è sufficiente iniziare a utilizzare le tavolozze triadiche più complesse, se ti interessa.

:root {
  --base-color: yellow;
  --triad-1: oklch(from var(--base-color) l c calc(h - 120));
  --triad-2: oklch(from var(--base-color) l c calc(h + 120));
}

Tavolozze tetradici

Le tavolozze tetradici sono quattro colori che vengono distribuiti uniformemente intorno alla ruota dei colori, rendendo una tavolozza senza un chiaro valore dominante. Anche tu potresti pensarci, come due coppie di colori complementari. Usata saggiamente, può essere molto significativa.

Questa è una lieve semplificazione della teoria dei colori, ma è sufficiente iniziare a utilizzare le tavolozze tetradici più complesse, se ti interessa.

:root {
  --base-color: lime;

  --color-1: var(--base-color);
  --color-2: oklch(from var(--base-color) l c calc(h + 90));
  --color-3: oklch(from var(--base-color) l c calc(h + 180));
  --color-4: oklch(from var(--base-color) l c calc(h + 270));
}

Monocromatico con una leggera rotazione delle tonalità

Molti esperti di colore non tengono questo aggancio nella manica. Il problema è che la scala dei colori monocromatici può essere piuttosto noiosa. La soluzione consiste nell'aggiungere rotazione minore o maggiore della tonalità a ogni nuovo colore man mano che la luminosità cambia.

L'esempio seguente riduce la leggerezza del 10% per ogni campione e ruota la tonalità di 10 gradi. Il risultato, una tavolozza di colori indaco che sembra si fonde perfettamente come un gradiente.

:root {
  --base-color: deeppink;

  --color-1: var(--base-color);
  --color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
  --color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
  --color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
  --color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}

Prova questa classifica creata con OKLCH e la rotazione di tonalità

La seguente interfaccia delle classifiche utilizza questa strategia di rotazione delle tonalità. Ogni elenco elemento monitora il proprio indice nel documento come una variabile denominata --i. Questo indice è poi utilizzato per regolare crominanza, leggerezza e tonalità. L'aggiustamento è solo del 5% o 5deg, molto più discreto dell'esempio precedente con deeppink, quindi ci vuole per vedere il motivo per cui la classifica può avere un colore qualsiasi con queste eleganza.

Cambia la tonalità del dispositivo di scorrimento sotto la classifica e guarda la relativa sintassi dei colori crea splendidi momenti di colore.

li {
  --_bg: oklch(
    /* decrease lightness as list grows */
    calc(75% - (var(--i) * 5%))

    /* decrease chroma as list grows */
    calc(.2 - (var(--i) * .01))

    /* lightly rotate the hue as the list grows */
    calc(var(--hue) - (var(--i) + 5))
  );
}