color-mix() in CSS: mescolare i colori nel browser

La funzione color-mix CSS, color-mix(), mescola due colori nello spazio colore che scegli e restituisce un colore nuovo. Scrivi color-mix(in oklab, #7c3aed 40%, white) e ottieni un viola pallido fatto al 40 percento di viola e al 60 percento di bianco, mescolati in modo percettivo. Funziona in tutti i principali browser attuali. Insieme alle proprietà personalizzate trasforma un solo colore del brand in tinte, toni scuri, stati hover e sovrapposizioni traslucide, senza un solo esadecimale scritto a mano.

Sintassi di color-mix()

/* color-mix(in <colour space>, <colour> [<percentage>], <colour> [<percentage>]) */

.a { color: color-mix(in oklab, #7c3aed, white); }          /* 50% each */
.b { color: color-mix(in oklab, #7c3aed 40%, white); }      /* 40% violet, 60% white */
.c { color: color-mix(in oklab, #7c3aed, black 30%); }      /* 70% violet, 30% black */
.d { color: color-mix(in srgb, #7c3aed 50%, transparent); } /* violet at half opacity */
.e { color: color-mix(in oklch shorter hue, #2563eb, #f59e0b); }

In quale spazio colore mescolare

Lo spazio colore decide il percorso tra i due colori. In sRGB il browser fa la media dei numeri di rosso, verde e blu: è facile da ragionare ma non è come vedono gli occhi. Due tonalità lontane passano per un grigio spento. In oklab il mix segue la luminosità e il colore percepiti, quindi il centro resta pulito e i passaggi sembrano regolari. L'interpolazione dei gradienti spiega la stessa scelta per i gradienti, dove l'effetto si vede meglio.

• oklab per tinte, toni scuri e la maggior parte dei mix quotidiani. Luminosità uniforme, nessun calo verso il grigio.
• oklch quando vuoi che la tonalità viaggi, per esempio per fondere due colori del brand in un terzo che sta tra loro sulla ruota.
• srgb per mescolare con transparent o per allinearsi a strumenti di design più vecchi che miscelano in sRGB.
• srgb-linear per un mix di luce fisicamente corretto, che al centro risulta più luminoso.

Per capire perché gli spazi percettivi funzionano meglio, leggi OKLCH spiegato. Le versioni recenti della specifica permettono di omettere lo spazio colore e usare oklab come predefinito, ma il supporto a questa scorciatoia è più recente, quindi scrivi in oklab in modo esplicito.

Tinte e toni scuri da un solo colore del brand

Lo schema più utile è una scala costruita da una sola variabile. Mescola verso il bianco per le tinte, verso il nero per i toni scuri. Cambia la variabile e ogni gradino si aggiorna: è l'ideale per prodotti con più brand o per temi scelti dall'utente.

:root {
  --brand: #7c3aed;

  --brand-100: color-mix(in oklab, var(--brand) 20%, white);
  --brand-200: color-mix(in oklab, var(--brand) 40%, white);
  --brand-300: color-mix(in oklab, var(--brand) 60%, white);
  --brand-400: color-mix(in oklab, var(--brand) 80%, white);
  --brand-500: var(--brand);
  --brand-600: color-mix(in oklab, var(--brand) 80%, black);
  --brand-700: color-mix(in oklab, var(--brand) 60%, black);
}

Mescolare con bianco e nero puri è solo un punto di partenza. Per tinte più calde, mescola verso un bianco sporco come #fdf6ec; per toni scuri più ricchi, verso un blu notte profondo invece del nero. Così la scala resta del tuo brand e non diventa una rampa generica. Tinte, toni e sfumature approfondisce la teoria del colore.

Trasparenza con color-mix()

Prima di color-mix(), ottenere una versione traslucida di un colore salvato in una variabile significava memorizzare i canali separatamente. Ora mescoli con transparent. La quantità che mantieni è l'opacità.

.badge {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}

.button:hover {
  background: color-mix(in oklab, var(--brand), black 12%);
}

Errori comuni con color-mix()

• Omettere lo spazio colore in codice che deve girare su browser più vecchi. Viene scartata l'intera dichiarazione, non solo lo spazio.
• Mescolare con il nero per ogni tono scuro. I toni scuri dei colori saturi si spengono; mescola verso una versione scura della stessa tonalità.
• Aspettarsi che percentuali sotto 100 restino opache. color-mix(in oklab, red 20%, blue 30%) è trasparente a metà.
• Usare hsl per le tinte. La luminosità in hsl non è percettiva, quindi un giallo e un blu con lo stesso mix non sembrano affatto lo stesso gradino.

Supporto dei browser e alternative

color-mix() è disponibile in Chrome, Edge, Firefox e Safari dal 2023, e il supporto attuale è elencato su caniuse. Se devi coprire browser molto vecchi, dichiara prima un colore semplice e lascia che quello mescolato lo sostituisca. I browser che non capiscono la seconda riga la ignorano.

.card {
  background: #ede9fe;
  background: color-mix(in oklab, var(--brand) 15%, white);
}

Un tema completo costruito su questi schemi, con modalità chiara e scura, è in Variabili CSS per i temi.

Mescolare i colori per i gradienti

color-mix() è comodo dentro i gradienti, dove può calcolare un punto centrale da due colori del brand così che la sfumatura non passi mai per il fango. linear-gradient(135deg, var(--a), color-mix(in oklch, var(--a), var(--b)), var(--b)) ti dà un terzo punto sul percorso della tonalità tra i due. Il problema di fondo è trattato in gradienti sporchi.

Se il colore del tuo brand vive in un Mark di Gradiently, la ricetta del Mark contiene già una famiglia di colori affini scelti per stare bene insieme, e il Mercato ti permette di cercare con parole di colore come «viola profondo» per trovarne uno costruito attorno alla tonalità da cui parti.