Creare nuovi colori in base ai canali e ai valori di un altro colore.
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
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.
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.
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))
);
}