La funzione CSS color-mix()
consente di mescolare 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 utilizzavano
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 CSS dei colori. Tuttavia, non esisteva un modo reale per mescolare i colori in CSS. Per avvicinarti devi calcolare i valori dei colori parziali. Di seguito è riportato 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() offre la possibilità di combinare i colori in CSS. Gli sviluppatori possono scegliere lo spazio colore
in cui combinare e quanto deve essere predominante ogni colore.
.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);
}
È quello che vogliamo. Flessibilità, potenza e API complete. Amala.
Combinazione di colori in CSS
CSS esiste in diversi spazi 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 che cerchi.
Per un'introduzione interattiva, prova questo strumento color-mix():
- Esplora gli effetti di ogni spazio colore.
- Esplora gli effetti dell'interpolazione delle tonalità quando combini 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 cursore per modificare il rapporto di miscelazione.
- Generazione di color-mix() codice CSS disponibile in basso.
Combinazione dei vari spazi colore
Lo spazio colore predefinito per la combinazione (e i gradienti) è oklab. Fornisce
risultati coerenti. Puoi specificare anche 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, giusto? 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 ad esempio 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, 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 miscelazione che la maggior parte delle persone si aspetta di combinare il bianco e il 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);
L'apprendimento degli effetti di uno spazio colore con color-mix() è un'ottima conoscenza anche per
creare gradienti. La sintassi del colore 4 consente inoltre ai gradienti di specificare lo spazio colore, dove un gradiente mostra il mix su un'area dello spazio.
.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 c'è nessuno. 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 risplendere 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) vengono mescolati tra loro e hsl e hwb producono entrambi un risultato vivace, mentre sgsuite e oklab producono colori insaturi.
Se vuoi coerenza e finezza, utilizza oklab. Nella demo seguente, che mescola blu e nero, hsl e hwb producono colori eccessivamente brillanti e con variazioni di tonalità, mentre con sting{4/} e oklab si ottiene un blu più scuro.
Trascorri cinque minuti nel color-mix() parco giochi, provando spazi e colori diversi e inizierai a farti un'idea dei vantaggi di ogni spazio. Inoltre,
sono previste ulteriori indicazioni sugli spazi colore man mano che tutti ci adattiamo
al loro potenziale nelle nostre interfacce utente.
Regolazione del metodo di interpolazione delle tonalità
Se hai scelto di combinare uno spazio colore cilindrico, ovvero qualsiasi spazio colore
con un canale di tonalità h che accetta un angolo, puoi specificare se
l'interpolazione deve essere shorter, longer, decreasing e increasing. Se vuoi saperne di più,
parlerai bene in questa Guida ai colori per HD.
Ecco lo stesso esempio di mix dal blu al bianco, ma questa volta è solo negli spazi cilindrici con metodi di interpolazione delle tonalità diversi.
Ecco un altro codepen che ho creato per 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 misto quando viene specificata l'interpolazione delle tonalità, fai uno studio.
Combinazione con varie sintassi dei colori
Finora abbiamo utilizzato principalmente colori denominati CSS, come blue e white. La combinazione dei colori CSS è pronta per mescolare i colori di due spazi colore diversi. 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 misti. Piuttosto flessibile e flessibile.
Regolare i rapporti di miscelazione
Non è molto probabile che ogni volta che si mescolano parti uguali di ogni colore, come è stato mostrato finora la maggior parte degli esempi. Buone notizie, esiste una sintassi per articolare quanto di ogni colore dovrebbe essere visualizzato nel mix risultante.
Per iniziare questo argomento, ecco un esempio di mix che sono tutti equivalenti (e dalle 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 capire bene i casi limite. Il primo insieme di esempi mostra come il 50% non è obbligatorio, ma può essere specificato facoltativamente. 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 illustrare 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 fornita un'unica proporzione, l'altro colore viene impostato su 100 meno quel rapporto.
L'ultima regola è leggermente meno ovvia; cosa succede se vengono specificate le percentuali per entrambi i colori e la loro somma non arriva al 100%?
color-mix(in lch, purple 20%, plum 20%)
Questa combinazione di color-mix() genera trasparenza e 40%.
Se la somma dei rapporti 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 valori al contesto principale.
color-mix(in lch, purple 40%, color-mix(plum, white))
Puoi nidificare tutte le volte che vuoi per ottenere i risultati auspicati.
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 supporti con preferenza scura, alle proprietà personalizzate vengono 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
Puoi fare un ulteriore passo avanti aggiungendo altri temi oltre ai temi chiaro e scuro. Nella demo seguente, le modifiche al gruppo di pulsanti di opzione aggiornano un attributo del 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 scelta dei temi dei colori in cui tutti i colori del tema sono elencati in :root. In questo modo, puoi vederli tutti insieme
e modificarli facilmente. Successivamente, nel foglio di stile, puoi utilizzare le variabili man mano che vengono
definite. In questo modo puoi evitare di 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 supporta perfettamente color-mix(). Riconosce ed evidenzia la sintassi, crea un'anteprima del mix accanto allo stile nel riquadro Stili e consente di selezionare colori alternativi.
Nei DevTools sarà simile a questo:
Buon lavoro!