La funzione CSS color-mix() ti consente di combinare i colori, in qualsiasi spazio colore supportato, direttamente dal tuo CSS.
Prima del giorno color-mix(), per scurire, schiarire o desaturare un colore, gli sviluppatori usavano
i preprocessori CSS o
calc() sui canali
di colore.
.color-mixing-with-sass {
/* Sass: equally mix red with white */
--red-white-mix: color.mix(red, white);
}
Sass ha fatto un ottimo lavoro per rimanere al passo con le specifiche dei colori CSS. Tuttavia, non esisteva un modo reale per combinare i colori in CSS. Per avvicinarti al colore devi calcolare i valori parziali. Ecco un esempio ridotto di come il CSS potrebbe simulare la combinazione di oggi:
.color-mixing-with-vanilla-css-before {
--lightness: 50%;
--red: hsl(0 50% var(--lightness));
/* add "white" to red
by adding 25% to the lightness channel
*/
--lightred: hsl(0 50% calc(var(--lightness) + 25%);
}
color-mix() consente di
mescolare colori in CSS. Gli sviluppatori possono scegliere lo spazio colore
in cui combinare gli elementi e quanto deve essere predominante.
.color-mixing-after {
/* equally mix red with white */
--red-white-mix: color-mix(in oklab, red, white);
/* equally mix red with white in srgb */
--red-white-mix-srgb: color-mix(in srgb, red, white);
}
Sì, è quello che vogliamo. Flessibilità, potenza e API complete. Amala.
Combinazione di colori in CSS
CSS esiste in un mondo con più spazi colore e gamma di colori e per questo motivo non è facoltativo specificare lo spazio colore per la combinazione. Inoltre, spazi colore diversi possono cambiare drasticamente i risultati di una combinazione, quindi conoscere gli effetti di uno spazio colore ti aiuterà a ottenere i risultati necessari.
Per un'introduzione interattiva, prova questo strumento color-mix():
- Esplora gli effetti di ogni spazio colore.
- Scopri gli effetti dell'interpolazione delle tonalità durante la combinazione in uno spazio colore cilindrico (lch, oklch, hsl e hwb).
- Cambia i colori mescolati facendo clic su una delle due caselle colore in alto.
- Usa il dispositivo di scorrimento per modificare il rapporto di miscelazione.
- Codice CSS color-mix() generato disponibile in basso.
Combinazione dei vari spazi colore
Lo spazio colore predefinito per la combinazione (e i gradienti) è oklab. Offre risultati coerenti. Puoi anche specificare spazi colore alternativi per personalizzare
il mix in base alle tue esigenze.
Prendiamo ad esempio black e white. Lo spazio cromatico in cui si mescolano
non farà una grande differenza, vero? Sbagliato.
color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);
Ha un grande effetto!
Prendiamo blue e white per un altro esempio. L'ho scelto perché è un caso in cui la forma di uno spazio colore può influire sui risultati. In questo caso, è che la maggior parte degli spazi colore diventa viola durante il passaggio dal bianco al blu. Mostra anche come oklab sia uno spazio colore così affidabile per la combinazione, che soddisfa le aspettative della maggior parte delle persone riguardo alla combinazione del bianco e del blu (non viola).
color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);
Imparare gli effetti di uno spazio colore con color-mix() è un'ottima conoscenza anche per
creare gradienti. La sintassi di Color 4, inoltre, consente ai gradienti di specificare lo spazio colore, dove un gradiente mostra il mix su un'area.
.black-to-white-gradient-in-each-space {
--srgb: linear-gradient(to right in srgb, black, white);
--srgb-linear: linear-gradient(to right in srgb-linear, black, white);
--lab: linear-gradient(to right in lab, black, white);
--oklab: linear-gradient(to right in oklab, black, white);
--lch: linear-gradient(to right in lch, black, white);
--oklch: linear-gradient(to right in oklch, black, white);
--hsl: linear-gradient(to right in hsl, black, white);
--hwb: linear-gradient(to right in hwb, black, white);
--xyz: linear-gradient(to right in xyz, black, white);
--xyz-d50: linear-gradient(to right in xyz-d50, black, white);
--xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}
Se ti stai chiedendo quale spazio colore è "il migliore", non esiste. Ecco perché ci sono così tante opzioni. Inoltre, non ci sarebbero nemmeno nuovi spazi colore (vedi oklch e oklab), se uno fosse "il migliore". Ogni spazio colore può avere un momento unico per brillare ed essere la scelta giusta.
Ad esempio, se vuoi un risultato mix vivace, utilizza hsl o hwb. Nella demo seguente, due colori vivaci (magenta e lime) sono mescolati tra loro e hsl e hwb producono entrambi un risultato vivace, mentre sgsuite e oklab producono colori insaturi.
Se vuoi coerenza e finezza, usa oklab. Nella demo seguente, che mescola blu e nero, hsl e hwb producono colori eccessivamente vivaci e con variazioni di tonalità, mentre sgsuite e oklab producono un blu più scuro.
Dedica cinque minuti nell'area giochi color-mix(), provando colori e spazi diversi e inizierai a farti un'idea dei vantaggi di ogni spazio. Inoltre,
prevediamo che vengano fornite ulteriori indicazioni sugli spazi colore man mano che tutti ci adattiamo al loro
potenziale nelle nostre interfacce utente.
Regolazione del metodo di interpolazione della tonalità
Se hai scelto di combinare uno spazio colore cilindrico, essenzialmente qualsiasi spazio colore
con un canale di tonalità h che accetta un angolo, puoi specificare se
l'interpolazione è shorter, longer, decreasing e increasing. Se vuoi saperne di più, consulta la Guida ai colori HD.
Ecco lo stesso esempio di mix da blu a bianco, ma questa volta si trova solo negli spazi cilindrici con metodi di interpolazione delle tonalità diversi.
Ecco un altro codepen che ho creato per aiutarti a visualizzare l'interpolazione delle tonalità, ma specifico per i gradienti. Credo che questo ti aiuterà a capire in che modo ogni spazio colore produce il proprio risultato combinato quando viene specificata l'interpolazione delle tonalità. Fai uno studio.
Combinazione con sintassi dei colori diverse
Finora abbiamo usato principalmente colori con nome CSS, come blue e white. La combinazione dei colori CSS consente di mescolare i colori di due diversi spazi colore. Questo è un altro motivo per cui è fondamentale specificare lo spazio colore per la combinazione, poiché imposta lo spazio comune per i casi in cui i due colori non si trovano nello stesso spazio.
color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));
Nell'esempio precedente, hsl e display-p3 verranno convertiti in oklch
e poi combinati. Piuttosto bello e flessibile.
Regolare i rapporti di miscelazione
Non è molto probabile che ogni volta che combini vuoi parti uguali di ogni colore, come mostrato finora dalla maggior parte degli esempi. Buone notizie, c'è una sintassi per indicare in che misura ogni colore deve essere visualizzato nella combinazione risultante.
Per iniziare questo argomento, ecco un esempio di mix che sono tutti equivalenti (e secondo le specifiche):
.ratios-syntax-examples {
/* omit the percentage for equal mixes */
color: color-mix(in lch, purple, plum);
color: color-mix(in lch, plum, purple);
/* percentage can go on either side of the color */
color: color-mix(in lch, purple 50%, plum 50%);
color: color-mix(in lch, 50% purple, 50% plum);
/* percentage on just one color? other color gets the remainder */
color: color-mix(in lch, purple 50%, plum);
color: color-mix(in lch, purple, plum 50%);
/* percentages > 100% are equally clamped */
color: color-mix(in lch, purple 80%, plum 80%);
/* above mix is clamped to this */
color: color-mix(in lch, purple 50%, plum 50%);
}
Trovo questi esempi per illustrare bene i casi limite. Il primo insieme di esempi mostra perché il 50% non è obbligatorio, ma può essere specificato in modo facoltativo. L'ultimo esempio mostra un caso interessante per cui quando i rapporti superano il 100% se sommati, vengono ugualmente bloccati al 100% totale.
Tieni presente anche che se un solo colore specifica un rapporto, si presume che l'altro sia il restante 100%. Ecco qualche altro esempio per spiegare questo comportamento.
color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */
Questi esempi illustrano due regole: 1. Quando i rapporti superano il 100%, vengono fissati e distribuiti equamente. 1. Quando viene fornito un solo rapporto, l'altro colore viene impostato su 100 meno quel rapporto.
L'ultima regola è leggermente meno ovvia; cosa succede se si specificano le percentuali per entrambi i colori e la somma delle percentuali non raggiunge il 100%?
color-mix(in lch, purple 20%, plum 20%)
Questa combinazione di color-mix() garantisce trasparenza e 40% trasparenza.
Quando la somma delle proporzioni non raggiunge il 100%, il mix risultante non è opaco.
Nessuno dei due colori sarà completamente miscelato.
Nidificazione di color-mix() in corso...
Come tutti i CSS, la nidificazione viene gestita bene e come previsto; le funzioni interne verranno risolte per prime e restituiranno i relativi valori al contesto principale.
color-mix(in lch, purple 40%, color-mix(plum, white))
Puoi nidificare tutto ciò che ti serve per ottenere i risultati che vuoi raggiungere.
Creazione di una combinazione di colori chiari e scuri
Creiamo combinazioni di colori con color-mix().
Una combinazione di colori di base
Nel seguente CSS, vengono creati un tema chiaro e uno scuro in base a un colore esadecimale del brand. Il tema chiaro crea due colori di testo blu scuro e un colore della superficie di sfondo bianco molto chiaro. In una query multimediale con preferenza scura, alle proprietà personalizzate vengono quindi assegnati nuovi colori, in modo che lo sfondo sia scuro e i colori del testo siano chiari.
:root {
/* a base brand color */
--brand: #0af;
/* very dark brand blue */
--text1: color-mix(in oklab, var(--brand) 25%, black);
--text2: color-mix(in oklab, var(--brand) 40%, black);
/* very bright brand white */
--surface1: color-mix(in oklab, var(--brand) 5%, white);
}
@media (prefers-color-scheme: dark) {
:root {
--text1: color-mix(in oklab, var(--brand) 15%, white);
--text2: color-mix(in oklab, var(--brand) 40%, white);
--surface1: color-mix(in oklab, var(--brand) 5%, black);
}
}
Tutto questo si ottiene mescolando il bianco o il nero nel colore di un brand.
Combinazione di colori intermedia
È possibile fare un passo in più e aggiungere altri elementi oltre ai temi chiaro e scuro. Nella demo seguente, le modifiche al gruppo di pulsanti di opzione aggiornano un attributo nel tag HTML [color-scheme="auto"], che consente quindi ai selettori di applicare un tema a colori in modo condizionale.
Questa demo intermedia mostra anche una tecnica per la tematizzazione dei colori in cui tutti i colori del tema sono elencati in :root. In questo modo sono facilmente visibili
e, se necessario, si adattano. Più avanti nel foglio di stile, puoi utilizzare le variabili così come vengono definite. In questo modo, non dovrai più cercare le manipolazioni dei colori nel foglio di stile, poiché sono tutte contenute nel blocco :root iniziale.
Casi d'uso più interessanti
Ana Tudor ha un'ottima demo con alcuni casi d'uso per lo studio:
Debug di color-mix() con DevTools
Chrome DevTools offre un eccellente supporto per color-mix(). Riconosce ed evidenzia la sintassi, crea un'anteprima del mix accanto allo stile nel riquadro Stili e consente di scegliere colori alternativi.
In DevTools sarà simile al seguente:
Buon lavoro!