Mixer di colori — Miscela due colori

Miscela due colori dello schermo

Mescolare i colori è utile quando serve uno stato hover tra due token, il punto medio di un gradiente, un colore di transizione per un grafico o una rapida esplorazione del rapporto tra due colori del brand. Questo mixer di colori fonde i due colori selezionati interpolando i canali rosso, verde e blu. Sposta il cursore del rapporto verso il Colore B per aumentarne il contributo, poi copia il risultato in HEX, RGB o HSL per CSS, documentazione o design token.

La miscelazione RGB descrive il modo in cui gli schermi combinano la luce. È perfetta per il lavoro sul web, ma non equivale a mescolare vernici o inchiostri: il punto medio tra blu e giallo su uno schermo non si comporta come la stessa miscela di pigmenti fisici. Nel design delle interfacce, però, la miscelazione RGB è pratica perché il browser visualizza i colori come valori dello schermo. L'anteprima si aggiorna all'istante, così puoi valutare il risultato prima di copiarlo.

Usare i rapporti nel design delle interfacce

Il rapporto controlla l'equilibrio tra i due colori di partenza. A 0 percento il risultato è il Colore A, a 100 percento è il Colore B. Valori tra il 10 e il 25 percento sono spesso utili per stati hover discreti o superfici appena tinte, perché il colore originale resta dominante. Valori vicini al 50 percento sono più adatti a palette di transizione, punti medi di gradienti e scale cromatiche per grafici. Se il risultato appare spento, prova ad aumentare la saturazione in HSL oppure scegli colori di partenza più distanti tra loro.

Copiare token di colore affidabili

Quando trovi una miscela utile, copia il formato più adatto al tuo flusso di lavoro. HEX è compatto per la consegna del design, RGB è comodo quando servono i valori dei canali o sovrapposizioni con alpha, mentre HSL è più semplice da regolare in tinta, saturazione o luminosità dopo la miscelazione. Poiché lo strumento funziona in locale, puoi sperimentare in sicurezza con palette di brand non ancora pubblicate o colori dei clienti. Verifica sempre il colore finale nel contesto reale, soprattutto se verrà usato dietro al testo o accanto a importanti colori di stato.