CodeKitHubChe cos'è questo strumento?
Un miscelatore di colori interpola linearmente i canali rosso, verde e blu di due colori secondo una proporzione scelta, la stessa matematica usata internamente da un gradiente. Allo 0% il risultato è il Colore A, al 100% è il Colore B, e al 50% è il punto medio aritmetico di ciascun canale RGB.
Questo è diverso dal mescolare vernice fisica (che è sottrattiva e dipende dal pigmento), e non è nemmeno lo stesso di fare una media nello spazio HSL — l'interpolazione lineare in RGB è ciò che usano i gradienti CSS, gli strumenti di design e la maggior parte delle utility "colore tra due colori", quindi il risultato corrisponde a ciò che vedresti in un gradiente del browser tra quegli stessi due colori.
Perché usarlo?
- Trova un colore di hover o di stato attivo che si collochi naturalmente tra il tuo colore base e un accento, invece di indovinare una regolazione a caso.
- Guarda il codice HEX esatto a qualsiasi proporzione, non solo a occhio su uno screenshot del gradiente.
- La rampa a 11 passaggi genera con un clic una palette completa da un colore all'altro, utile per la visualizzazione dei dati o un gradiente multi-punto.
- Clicca su qualsiasi passaggio per copiare istantaneamente il suo codice HEX.
- Gratuito, istantaneo e completamente locale — nessun caricamento, nessun account.
Come si usa
- Scegli il Colore A e il Colore B usando i selettori di colore o digitando un codice HEX.
- Trascina il cursore della proporzione per impostare quanto Colore B mescolare.
- Leggi i valori HEX e RGB risultanti sopra il campione.
- Clicca su qualsiasi campione nella rampa a 11 passaggi qui sotto per copiare il suo codice HEX.
Esempio
Input
Colore A #3B82F6 (blu), Colore B #F59E0B (ambra), proporzione 50%Risultato
#9B9E7D — rgb(155, 158, 125)Esattamente al 50%, ogni canale RGB è la media aritmetica dei canali dei due colori di input.
Domande frequenti
Perché questo non corrisponde a ciò che otterrei mescolando vernice vera?
La miscelazione della vernice è sottrattiva (i pigmenti assorbono la luce) e dipende dai pigmenti specifici coinvolti — mescolare vernice blu e gialla dà verde, per esempio. Questo strumento mescola la luce (canali RGB) in modo additivo/lineare, che è il modo in cui schermi, gradienti CSS e la maggior parte degli strumenti di design digitale combinano i colori. I due sistemi producono risultati genuinamente diversi per progettazione, non per errore.
È lo stesso di un linear-gradient CSS tra i due colori?
Sì — un linear-gradient(coloreA, coloreB) CSS interpola i canali RGB nello stesso modo di questo strumento, quindi il colore che vedresti nel punto medio di quel gradiente corrisponde al risultato al 50% qui.
Perché il colore miscelato a volte appare torbido o grigiastro?
Mescolare due tonalità sature ma molto diverse (come blu e arancione, quasi complementari) nello spazio RGB spesso produce un punto medio a bassa saturazione, grigiastro o brunastro — questa è una proprietà reale dell'interpolazione RGB, non un bug. Se vuoi una miscela più vivace, prova colori più vicini tra loro sulla ruota dei colori, oppure mescola nello spazio HSL regolando la tonalità mantenendo alta la saturazione (cosa che questo miscelatore RGB diretto non fa).
Posso mescolare più di due colori alla volta?
Non in un unico passaggio — lo strumento mescola esattamente due colori. Per combinarne tre, mescola i primi due nella proporzione desiderata, copia il risultato e incollalo come nuovo Colore A contro il tuo terzo colore. Procedere per fasi ti dà anche il controllo sulla ponderazione di ciascuno, cosa che una media diretta a tre colori non permetterebbe.
Dovrei usare questo strumento o il Generatore di Sfumature di Colore?
Se hai bisogno di un colore che si collochi tra due colori diversi — diciamo una tonalità di transizione tra il blu del tuo brand e un accento ambra — usa questo miscelatore. Se invece ti servono varianti più chiare e più scure di un singolo colore (stati di hover, sfondi, una rampa in stile Tailwind da 50 a 900), usa il Generatore di Sfumature di Colore: mantiene fissi tonalità e saturazione e varia solo la luminosità, così ogni risultato resta chiaramente nella stessa famiglia di colore.
Quali formati di colore posso digitare nei campi di input?
I campi di testo accettano codici HEX a 6 cifre, con o senza il # iniziale (per esempio 3B82F6 o #3B82F6). L'HEX abbreviato a 3 cifre, la notazione rgb() e i nomi di colore CSS non vengono interpretati lì — ma puoi scegliere qualsiasi colore visivamente con il selettore di colore nativo accanto a ciascun campo, e il campo HEX si aggiorna di conseguenza.