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

[Canonical HTML page](https://gradiently.design/it/guide/css-color-mix)

color-mix() lascia al browser i calcoli sul colore che prima facevi in un preprocessore o a occhio. Scegli lo spazio colore giusto e un solo colore del brand genera un'intera palette di tinte, toni scuri e versioni traslucide.

## The short version

- La funzione CSS color-mix mescola due colori in uno spazio colore indicato, per esempio color-mix(in oklab, #7c3aed 40%, white).
- Se indichi una sola percentuale, l'altro colore prende il resto; senza percentuali, il mix è metà e metà.
- Mescolare in oklab mantiene uniforme la luminosità ed evita i grigi spenti che l'sRGB produce a metà strada tra tonalità lontane.
- Mescolare un colore con transparent è il modo più pulito per ottenere una versione traslucida di un colore salvato in una proprietà personalizzata.
- color-mix() funziona in tutti i principali browser attuali, quindi è sicuro in produzione, con un colore semplice come riserva per quelli molto vecchi.

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()

```css
/* 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); }
```

Lo spazio colore va per primo e si scrive per esteso. Gli spazi basati sulla tonalità, come oklch e hsl, accettano anche una direzione della tonalità: shorter, longer, increasing o decreasing.

| Cosa scrivi | Cosa usa il browser | Note |
| --- | --- | --- |
| Nessuna percentuale | 50% e 50% | Un mix uniforme |
| Una percentuale, per esempio 30% | 30% e 70% | L'altro colore prende il resto |
| Due che sommano 100% | Come scritto | La forma più chiara da rileggere |
| Due che sommano più di 100% | Riportate a 100% | 60% e 60% si comporta come 50% e 50% |
| Due che sommano meno di 100% | Riportate a 100%, poi rese traslucide | 20% e 30% dà un risultato al 50% di opacità |

Come si risolvono le percentuali. L'ultima riga sorprende: un totale sotto 100 rende il risultato in parte trasparente.

## 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](https://gradiently.design/it/guide/gradient-interpolation) spiega la stessa scelta per i gradienti, dove l'effetto si vede meglio.

- sRGB: grigio piatto al centro: `linear-gradient(to right, #0000ff, #ffff00)`
- oklab: centro più chiaro e pulito: `linear-gradient(in oklab to right, #0000ff, #ffff00)`
- oklch: passa per ciano e verde: `linear-gradient(in oklch to right, #0000ff, #ffff00)`

Dal blu al giallo in tre spazi. Il punto centrale di ogni striscia è esattamente ciò che `color-mix()` restituisce al 50 percento in quello spazio: `#808080` in sRGB, un grigio azzurro chiaro in oklab.

- **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](https://gradiently.design/it/guide/oklch-explained). 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.

```css
: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);
}
```

Una scala in sette gradini da un solo colore. Sostituisci `--brand` con qualsiasi esadecimale e la scala lo segue.

- brand-100: #e1dbff
- brand-200: #c5b7fe
- brand-300: #aa92fa
- brand-400: #926bf4
- brand-500: #7c3aed
- brand-600: #5a28b0
- brand-700: #3b1877

Ciò a cui la scala qui sopra si risolve per `#7c3aed`, calcolato in oklab. Mescolate in sRGB, le tinte escono un po' più grigie e i toni scuri un po' più piatti.

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](https://gradiently.design/it/guide/tints-tones-shades) 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à.

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

Un badge colorato e uno stato hover dalla stessa variabile. Nessun secondo colore da mantenere.

## 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](https://caniuse.com/mdn-css_types_color_color-mix). 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.

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

Prima la riserva, poi il miglioramento. Al resto pensa la cascata.

Un tema completo costruito su questi schemi, con modalità chiara e scura, è in [Variabili CSS per i temi](https://gradiently.design/it/guide/css-custom-properties-theming).

## 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](https://gradiently.design/it/guide/muddy-gradients).

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.

## FAQ

### Che cosa fa color-mix() in CSS?

Mescola due colori in uno spazio colore che indichi e restituisce il risultato, per esempio `color-mix(in oklab, red 30%, white)`.

### Quale spazio colore usare con color-mix()?

Usa oklab per tinte, toni scuri e la maggior parte dei mix, oklch quando vuoi che la tonalità viaggi e srgb per mescolare con transparent.

### Come rendo trasparente un colore con color-mix()?

Mescolalo con `transparent`: `color-mix(in srgb, var(--brand) 20%, transparent)` dà il colore del brand al 20 percento di opacità.

### color-mix() è supportato in tutti i browser?

Funziona nelle versioni attuali di Chrome, Edge, Firefox e Safari. Dichiara prima un colore semplice come riserva per i browser più vecchi.

### Che succede se le percentuali non sommano 100?

I totali sopra 100 vengono ridotti. I totali sotto 100 vengono portati a 100 e il risultato diventa in parte trasparente.