Miscelatore Colori Gratis: Mescolare e Creare Gradienti Online

A Niente di tutto ciò. Apri lo strumento e scegli i colori subito. Tutto funziona nel tuo browser, nessun dato viene salvato sui nostri server. L'ho provato poco fa: generato un gradiente a 12 passi dal blu scuro all'oro pallido, copiato i codici HEX direttamente nel mio CSS. Niente registrazioni, niente spam, niente seccature.

A Cambia entrambi. Più passaggi creano transizioni più morbide, ma ogni colore intermedio si sposta leggermente. Prova con 5 passaggi per tonalità decise e distinte, con 20 per una sfumatura quasi continua. Io uso 8-10 passaggi per le sezioni hero e copio un campione sì e uno no per gli elementi UI. Consiglio: pochi passaggi funzionano meglio per palette di design piatto.

A Magari! Per ora devi cliccare ogni campione per copiare il suo codice HEX uno alla volta. Per un gradiente a 20 passi, sono 20 clic. Un trucco: imposta pochi passi (tipo 5), copia quei codici, poi rigenera con più passi per un controllo più fine. Qualcuno fa uno screenshot e usa un contagocce, ma perde precisione.

A Questo strumento mescola i colori nello spazio RGB usando codici HEX. Va benissimo per schermi, siti web e app. Ma per progetti stampati—brochure, biglietti da visita, poster—le tinte mescolate non corrisponderanno esattamente all'output CMYK. L'ho imparato a mie spese quando un bel degradé lavanda è uscito opaco sul volantino di un cliente. Mescola i colori qui, poi converti ogni codice HEX in CMYK con un convertitore separato. Ancora meglio: lavora direttamente in software CMYK fin dall'inizio.

A La miscelazione avviene in RGB, non in HSL. Per questo alcuni gradienti passano per una zona grigiastra nel mezzo, specialmente tra colori complementari come blu e arancione. Per un passaggio centrale più vivido, scegli manualmente un colore intermedio e fai due miscelazioni successive. Lo faccio quando il colore centrale di un gradiente brand va su un pulsante CTA. Sono 30 secondi in più, ma la qualità del colore finale ne guadagna parecchio.

A Non c'è ancora un export integrato, ma c'è un trucco semplice. Genera il gradiente e copia ogni codice HEX manualmente in una stringa CSS linear-gradient(). Per 10 passaggi, servono circa 60 secondi di copia e incolla. Oppure fai uno screenshot e usa il contagocce in Figma per estrarre i colori. Io esporto il gradiente come PNG e ritaglio gli swatch per le guide di stile. Se ti serve SVG, converti ogni HEX in RGB e assegnalo a uno stop offset.

A No, ed è una trappola in cui cadono tanti designer. Lo strumento mescola nello spazio RGB, quindi il percorso non segue la tonalità, ma una linea retta all'interno del cubo RGB. Mescolare rosso puro e verde puro passa da una zona marrone-giallastra spenta, non da un giallo brillante. Per risultati prevedibili, scegli colori con luminosità o saturazione simili. Oppure aggiungi un terzo colore intermedio e mescola in due passaggi. Ottieni una curva controllata, senza il grigio fangoso nel mezzo. Prova con 10 passaggi e nota la differenza subito.

A Evita di abbinare colori opposti sul cerchio cromatico con luminosità molto diverse. Blu #0033CC e arancione #FF8800 attraversano una zona marrone spenta intorno al passo 6 di un gradiente a 12 step. Meglio toni con luminosità simile: turchese #008080 verso corallo #FF7F50 dà un percorso più pulito. Se ti serve alto contrasto, inserisci un terzo colore come punto intermedio e blend in due passaggi. Sono 30 secondi in più che salvano la tua hero section.

A Sì, puoi incollare qualsiasi codice HEX copiato direttamente nel tuo foglio di stile. La modalità scura richiede variazioni sottili, quindi imposto solitamente 10 passaggi e uso il 3 e il 7 per sfondi e bordi. Fai un test rapido tramite l'ispettore del browser prima di pubblicare.

A In linea di massima sì, ma la spaziatura dei passaggi intermedi cambia a seconda della tinta iniziale. Mettere un giallo luminoso all'inizio e un viola scuro alla fine modifica la distribuzione del peso visivo sui 10 campioni. La settimana scorsa ho invertito i colori del mio brand e i toni chiari dominavano il centro troppo presto. Prova ad invertire gli input se il tuo gradiente risulta troppo sbilanciato.