Color
Mixer
Mescola due colori e ottieni il risultato istantaneamente — con valori HEX, RGB e HSL.
① Scegli il Colore A e il Colore B ② Trascina il cursore per impostare il rapporto ③ Copia il risultato misto
Colore A
Colore B
Preset coppie colore:
RGB Blending
Linear channel interpolation
Ratio
0% = Color A · 100% = Color B
Output
HEX, RGB and HSL formats
Come funziona la miscelazione dei colori?
Miscelazione cromatica digitale tramite interpolazione RGB lineare: risultato = colore1 + (colore2 − colore1) × rapporto, applicata a ogni canale R, G, B. Al 50% si ottiene la media aritmetica; al 25% il risultato si avvicina al 75% al Colore A. È lo stesso algoritmo della funzione CSS
color-mix() e di mix-blend-mode, e rispecchia il motore di blending di Figma. Copia il risultato come HEX, RGB o HSL direttamente nel codice. Per design token e palette brand, concatena i risultati: mescola A+B, poi il risultato con C.Domande frequenti
Il mixer usa l'interpolazione lineare nello spazio RGB. Ogni canale (R, G, B) viene miscelato con la formula: risultato = colore1 + (colore2 - colore1) × rapporto. A 0% si ottiene il Colore A, a 100% il Colore B, a 50% la media aritmetica di entrambi.
La miscelazione RGB è additiva: lavora con la luce e produce risultati che possono differire dalla miscelazione fisica di vernici. Mescolare luce rossa e verde dà giallo, mentre mescolare vernici rosse e verdi dà un marrone opaco. Il mixer digitale usa la miscelazione RGB (additiva).
Nella miscelazione RGB, il punto medio di due colori saturi complementari spesso attraversa un'area a bassa saturazione (grigia). Questo perché l'interpolazione lineare RGB non preserva il percorso della tonalità. Per colori intermedi più vivaci, i designer a volte mescolano in spazio HSL o HSV.
Lo strumento fornisce tre formati. Usa il codice HEX direttamente in CSS (es. color: #a3c4bc). Usa il valore RGB con la notazione rgb(). Usa HSL con la notazione hsl(). In CSS moderno puoi anche usare la funzione color-mix(): color-mix(in srgb, #colore1 50%, #colore2).
Questo strumento mescola esattamente due colori. Per mescolare più colori, concatena i risultati: prima mescola il Colore A e B, poi prendi il risultato e mescolalo con il Colore C.
Il cursore va da 0% (100% Colore A) a 100% (100% Colore B). A 50% entrambi i colori contribuiscono equamente. A 25% il risultato si avvicina al 75% al Colore A e al 25% al Colore B.
Casi d'uso comuni: generare colori di transizione tra colori brand, creare stati intermedi per elementi interattivi (hover, active), costruire rampe di colore per visualizzazioni di dati, produrre gradienti realistici.