Mixer di Colori

Cosa significa miscelare colori?

Miscelare due colori vuol dire fonderli lungo una linea retta in un certo spazio colore, producendo ogni sfumatura intermedia tra i due. La scelta dello spazio conta: miscelare in sRGB grezzo (i valori che vedi in un codice hex) sembra intuitivo ma produce punti medi spenti e grigiastri, perché l'sRGB è codificato in gamma, non lineare. Miscelare in RGB a luce lineare, che è quello che fa di default questo strumento, dà punti medi più brillanti e accurati, coerenti con il modo in cui la luce si somma fisicamente. La differenza è più visibile quando si miscela un colore saturo con il bianco o con un altro colore saturo: il mix lineare mantiene il punto medio vivo, mentre il mix sRGB ingenuo lo appiattisce.

Come usare questo mixer

Scegli due colori con i picker (o incolla i codici hex), poi trascina lo slider del rapporto per scegliere quanto B fondere in A. Il blocco risultato si aggiorna in tempo reale, mostrando i valori hex, RGB e HSL. Spunta Mostra 11 stop intermedi per renderizzare una striscia di gradiente a 11 passi tra i due, comoda per scegliere colori interpolati per gli assi di un grafico o i frame di un'animazione. Clicca uno qualsiasi degli stop per copiarne l'hex.

Quando usare cosa

Usa questo mixer per fondere colori del brand per stati hover/active, ricavare serie interpolate per i grafici a posizioni personalizzate, costruire gradienti legati ai dati (heatmap dal freddo al caldo) o verificare al volo se due colori produrranno un punto medio fangoso prima di scegliere un gradiente. Per gli stati UI, stop intermedi al 25%, 50% e 75% danno una rampa coerente senza buchi visivi. Per la dataviz, 11 stop combaciano con una scala tipica 0-100 (ogni 10%): nessuna matematica aggiuntiva richiesta.

Come viene calcolato il mix

Ogni colore in input viene gamma-decodificato in sRGB lineare: i valori sotto 0,04045 sono divisi per 12,92, gli altri passano per ((c + 0,055) / 1,055)2,4. I due valori lineari vengono poi interpolati linearmente per canale: out = A·(1−t) + B·t, dove t è la posizione dello slider. Infine il risultato viene gamma-codificato di nuovo in sRGB e mappato sull'intervallo 0-255. È la stessa pipeline che usano i moderni editor di immagini per un rendering accurato dei gradienti.

Mixaggio in diversi spazi colore

sRGB ingenuo: veloce, intuitivo, ma produce punti medi scuri/fangosi: da evitare per mix vivaci. sRGB lineare (quello che usiamo): somma fisica della luce accurata; i punti medi restano luminosi. HSL: ottimo per rampe di tonalità, ma interpola male nelle zone a bassa saturazione. OKLCH: percettivamente uniforme; il gold standard per i design token, ma più complesso da calcolare. Per la miscelazione di colori di tutti i giorni, l'sRGB lineare è il giusto compromesso tra accuratezza e semplicità.

Domande frequenti