CSS color-mix()

Adam Argyle

La funzione CSS color-mix() consente di combinare i colori, in uno qualsiasi degli spazi dei colori supportati, direttamente dal CSS.

Prima di color-mix(), per scurire, schiarire o desaturare un colore, gli sviluppatori utilizzavano i preprocessor 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 la specifica CSS dei colori. Tuttavia, non esisteva un modo reale per combinare i colori in CSS. Per avvicinarti, devi eseguire calcoli sui valori parziali dei colori. Ecco un esempio ridotto di come il CSS potrebbe simulare la combinazione 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() aggiunge la possibilità di combinare i colori al CSS. Gli sviluppatori possono scegliere lo spazio dei colori in cui combinare e la dominanza di ogni colore nella combinazione.

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

È proprio quello che vogliamo. Flessibilità, potenza e API complete. sui tuoi

Combinare i colori in CSS

Il CSS esiste in un mondo di spazi dei colori e gamme di colori multipli e, per questo motivo non è facoltativo specificare lo spazio dei colori per la combinazione. Inoltre, spazi dei colori diversi possono modificare drasticamente i risultati di una combinazione, quindi conoscere gli effetti di uno spazio dei colori ti aiuterà a ottenere i risultati di cui hai bisogno.

Per un'introduzione interattiva, prova questo color-mix() strumento: - Esplora gli effetti di ogni spazio dei colori. - Esplora gli effetti dell'interpolazione della tonalità quando combini in uno spazio colore cilindrico (lch, oklch, hsl, e hwb).- Cambia i colori combinati facendo clic su una delle due caselle di colore in alto. - Utilizza il cursore per modificare il rapporto di combinazione. - Codice CSS color-mix() generato disponibile in basso.

Combinare nei vari spazi dei colori

Lo spazio dei colori predefinito per la combinazione (e sfumature) è oklab. Fornisce risultati coerenti. Puoi anche specificare spazi dei colori alternativi per personalizzare la combinazione in base alle tue esigenze.

Prendiamo ad esempio black e white. Lo spazio dei colori in cui si combinano 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. Ho scelto questo in particolare perché è un caso in cui la forma di uno spazio dei colori può influire sui risultati. In questo caso, la maggior parte degli spazi colore diventa viola quando si passa dal bianco al blu. Mostra anche come oklab sia uno spazio dei colori così affidabile per la combinazione, in quanto è il più vicino alle aspettative della maggior parte delle persone di combinare bianco e blu (senza 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);

Conoscere gli effetti di uno spazio dei colori con color-mix() è un'ottima conoscenza anche per la creazione di sfumature. La sintassi Color 4 consente anche alle sfumature di specificare lo spazio dei colori, in cui una sfumatura mostra la combinazione su un'area di 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 sia lo spazio dei colori "migliore", non ce n'è uno. Ecco perché ci sono così tante opzioni. Inoltre, non verrebbero inventati nuovi spazi dei colori (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 di combinazione vivace, utilizza hsl o hwb. Nella seguente demo, due colori vivaci (magenta e lime) vengono combinati e sia hsl che hwb producono un risultato vivace, mentre srgb e oklab producono colori insaturi.

Se vuoi coerenza e sottigliezza, utilizza oklab. Nella seguente demo che combina blu e nero, hsl e hwb producono colori eccessivamente vivaci e con tonalità spostate, mentre srgb e oklab producono un blu più scuro.

Trascorri cinque minuti con il color-mix() playground, provando diversi colori e spazi, e inizierai a farti un'idea dei vantaggi di ogni spazio. Inoltre, prevedi ulteriori indicazioni sugli spazi dei colori man mano che ci adattiamo tutti al loro potenziale nelle nostre interfacce utente.

Regolare il metodo di interpolazione della tonalità

Se hai scelto di combinare in uno spazio dei colori cilindrico, essenzialmente qualsiasi spazio dei colori con un canale di tonalità h che accetta un angolo, puoi specificare se il tipo di interpolazione è shorter, longer, decreasing, e increasing. Questo argomento è trattato bene in questa Guida ai colori HD se vuoi saperne di più.

Ecco lo stesso esempio di combinazione dal blu al bianco, ma questa volta solo negli spazi cilindrici con metodi di interpolazione della tonalità diversi.

Ecco un altro Codepen che ho creato per visualizzare l'interpolazione della tonalità, ma in particolare per le sfumature. Credo che questo ti aiuterà a capire come ogni spazio dei colori produce il risultato della combinazione quando viene specificata l'interpolazione della tonalità, quindi studialo.

Combinare con sintassi di colore variabili

Finora abbiamo combinato principalmente i colori denominati CSS, come blue e white. La combinazione di colori CSS è pronta per combinare colori provenienti da due spazi dei colori diversi. Questo è un altro motivo per cui è fondamentale specificare lo spazio dei colori per la combinazione, in quanto imposta lo spazio comune quando 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. Molto interessante e flessibile.

Regolare i rapporti di combinazione

Non è molto probabile che ogni volta che combini vuoi parti uguali di ogni colore, come mostrato nella maggior parte degli esempi finora. Buone notizie: esiste una sintassi per esprimere la quantità di ogni colore da visualizzare nella combinazione risultante.

Per iniziare questo argomento, ecco un esempio di combinazioni equivalenti (e dalla specifica):

.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 che questi esempi illustrino bene i casi limite. Il primo set di esempi mostra come il 50% non sia obbligatorio, ma possa essere specificato facoltativamente. L'ultimo esempio mostra un caso interessante in cui i rapporti superano il 100% quando vengono sommati, vengono limitati in modo uniforme al 100% totale.

Tieni presente che, se solo un colore specifica un rapporto, si presume che l'altro sia il resto fino al 100%. Ecco alcuni esempi aggiuntivi 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 limitati e distribuiti in modo uniforme. 1. Quando viene fornito un solo rapporto, l'altro colore viene impostato su 100 meno il rapporto.

L'ultima regola è leggermente meno ovvia: cosa succede se vengono fornite percentuali per entrambi i colori e non raggiungono il 100%?

color-mix(in lch, purple 20%, plum 20%)

Questa combinazione di un color-mix() genera trasparenza, trasparenza 40%. Quando i rapporti non raggiungono il 100%, la combinazione risultante non sarà opaca. Nessuno dei due colori verrà combinato completamente.

Annidare color-mix()

Come per tutto il CSS, l'annidamento viene gestito 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))

Non esitare ad annidare quanto necessario per ottenere il risultato che stai cercando.

Creare 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 di sfondo bianco molto chiaro. Poi, 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 combinando bianco o nero in un colore del brand.

Combinazione di colori intermedia

Questo può essere portato a un livello superiore aggiungendo più di temi chiari e scuri. Nella seguente demo, le modifiche al gruppo di pulsanti di opzione aggiornano un attributo nel tag HTML [color-scheme="auto"], che consente ai selettori di applicare in modo condizionale un tema cromatico.

Questa demo intermedia mostra anche una tecnica di tematizzazione cromatica in cui tutti i colori del tema cromatico sono elencati in :root. In questo modo è facile visualizzarli tutti insieme e regolarli, se necessario. Più avanti nel foglio di stile, puoi utilizzare le variabili così come sono definite. In questo modo non dovrai cercare le manipolazioni dei colori nel foglio di stile, in quanto sono tutte contenute nel blocco :root iniziale.

Casi d'uso più interessanti

Ana Tudor ha una demo fantastica con alcuni casi d'uso da studiare:

Eseguire il debug di color-mix() con DevTools

Chrome DevTools offre un ottimo supporto per color-mix(). Riconosce ed evidenzia la sintassi, crea un'anteprima della combinazione accanto allo stile nel riquadro Stili e consente di scegliere colori alternativi.

In DevTools sarà simile a questo:

Buona combinazione a tutti.