Strumento per consigliare abbinamenti di colori

Generatore professionale di abbinamenti di colori, supporta diverse modalità di palette come monocromatica, colori complementari e triadi, consente di generare in batch ed esportare schemi cromatici.

Segnala bug

Modalità di esecuzione nel browser: I tuoi dati vengono elaborati nel browser e non caricati sul server.

Velocità e stabilità: La velocità di elaborazione dipende dal dispositivo e dal browser. Per grandi batch, la versione desktop può essere più stabile.

Caricamento strumento, attendi...

Se lo strumento online non si carica o non funziona, prova lo strumento desktop. https://tools.yikeaigc.com/

Uso dello strumento

Torna alla vecchia versione

Imposta, poi elabora

Definisci prima colore principale e regole, poi genera una palette esportabile

Inizia rapidamente con colori di esempio o inserisci un HEX preciso. Ogni passaggio ha un pulsante Avanti; al termine genera, salva e scarica.

HEX / RGB / HSL / CMYK Monocromatico / Complementare / Triade CSS / SCSS / JSON / PNG Impostazioni salvabili

Colore principale attuale Clicca il valore colore per copiarlo

HEX

RGB

HSL

Impostazioni colore principale

Imposta prima il colore principale. Usa selettore, campo HEX o slider HSL; la palette si aggiorna in tempo reale.

Colore baseSupporta HEX a 6 cifre

Valore colore HEX Esempio: #0F6FAE

CMYK

Regolazione HSL fineIdeale per regolare tonalità, saturazione e luminosità

Tonalità205°

Saturazione78%

Luminosità37%

Nome palette

Colori di esempioClicca per continuare a regolare

Regole colore

Scegli un modello colore, poi imposta quantità e offset chiaro/scuro. Consigliamo di generare prima con i valori predefiniti, poi rifinire in base al design.

Modello coloreColori analoghi per uno stile visivo uniforme e morbido

Parametri di generazioneImposta i parametri, poi vai all’anteprima

Numero colori

Angolo vicino24°

Scostamento saturazione0%

Scostamento luminosità0%

Neutralizzazione8%

Ordinamento

Tipo di gradiente

Angolo gradiente90°

Anteprima e ritocchi

Controlla codici colore, leggibilità del testo e anteprima UI. Clicca un valore per copiarlo.

Schema colori5 colori

Anteprima interfacciaPer valutare rapidamente la gerarchia

Codice gradienteCopiabile direttamente in CSS

Salva esportazione

Puoi esportare lo schema corrente o generare più schemi in batch. I risultati batch mostrano solo i primi 20; il download include tutti i risultati.

Opzioni batchImposta la quantità secondo necessità

Numero di schemi

Ampiezza variazione

Contenuto esportatoPer file e codice

HEX RGB HSL CMYK

JSON CSS SCSS PNG

ScaricaLo ZIP includerà tutti i risultati batch

Risultati batchBatch non ancora generato

Completa prima le impostazioni di colore principale e regole, poi fai clic su “Genera batch”.

Schemi salvati0

Gli schemi salvati appariranno qui; puoi riapplicarli o eliminarli.

Istruzioni

Istruzioni per l’uso del software

Impostare il colore principale: in “Impostazione colore principale” usa il selettore colore, il campo HEX o i cursori HSL per impostare il colore di base; puoi anche fare clic sui colori di esempio per caricarli rapidamente.
Scegliere la regola di abbinamento colori:
- Monocromatico: genera livelli chiari e scuri basati sulla stessa tonalità, adatto a design dallo stile uniforme.
- Colori analoghi: seleziona tonalità adiacenti, ideale per effetti visivi morbidi e stratificati.
- Colori complementari: usa i colori opposti sulla ruota cromatica, adatto per mettere in evidenza pulsanti, titoli e contenuti importanti.
- Complementare diviso: aggiunge colori più morbidi al rapporto di contrasto, adatto a grafiche operative e visual per campagne.
- Triade, tetrade, colori quadrati: adatti a grafici, etichette di categoria e interfacce con più moduli.
- Colori neutri: adatti a pagine business, interfacce di strumenti e design per documentazione.
Regolare i parametri di generazione: imposta numero di colori, angolo di prossimità, scostamento della saturazione, scostamento della luminosità, percentuale di neutralizzazione, ordinamento e angolo del gradiente.
Anteprima dello schema colori: vai a “Anteprima e regolazione fine” per visualizzare HEX, RGB, HSL e informazioni sul contrasto di ogni colore; fai clic sul pulsante del valore colore per copiarlo.
Salvare schema e impostazioni: fai clic su “Salva schema corrente” per aggiungere lo schema colori ai preferiti; fai clic su “Salva impostazioni” per salvare i parametri correnti e riutilizzarli in seguito.
Generazione in batch: vai a “Salvataggio ed esportazione” per impostare il numero di schemi e l’entità della variazione, quindi fai clic su “Generazione in batch” per creare più schemi colori. L’interfaccia mostra i primi 20 schemi; il download includerà tutti i risultati.
Esportare file: puoi scaricare separatamente file JSON, CSS, SCSS e PNG, oppure selezionare i contenuti da esportare e scaricare un archivio ZIP.

Domande frequenti

R: Monocromatico è adatto all’estensione del brand e a interfacce essenziali; colori analoghi sono adatti a pagine morbide e uniformi; colori complementari sono adatti a evidenziare informazioni importanti; triade è adatta a grafici e layout con più moduli; colori neutri sono adatti a strumenti business e scenari documentali.

R: Inserisci il codice colore nel campo HEX, ad esempio #0F6FAE; lo strumento aggiornerà automaticamente il selettore colore, i cursori HSL e l’anteprima della palette. Puoi anche effettuare regolazioni fini con i cursori di tonalità, saturazione e luminosità.

R: Il file CSS genera codici colore sotto forma di variabili, utilizzabili per gli stili delle pagine web; il file SCSS è adatto ai progetti Sass. Entrambi i formati facilitano il riutilizzo nei sistemi di design, nel cambio di tema e negli stili dei componenti.

R: La generazione in blocco si basa sul colore principale corrente, sulle regole di abbinamento e sull’ampiezza delle variazioni, applicando spostamenti ragionevoli a tonalità, saturazione e luminosità per ottenere più schemi cromatici coerenti nello stile ma non ripetitivi.

R: Gli schemi salvati vengono registrati nella memoria locale del dispositivo corrente. Dopo la pulizia dei dati del sito o il cambio di dispositivo, gli schemi salvati in precedenza potrebbero non essere più visualizzati; si consiglia di esportare tempestivamente i file degli schemi importanti.

R: No. Il calcolo dei colori, il salvataggio degli schemi e la generazione dei file avvengono tutti sul dispositivo corrente; il colore principale, gli schemi e i contenuti esportati non vengono caricati sul server.

Risposta: in “Anteprima regolazioni” controlla il contrasto del testo bianco e del testo scuro per ogni colore. Più alto è il valore, più chiara sarà la lettura del testo. Quando lo usi come sfondo del testo principale, si consiglia di scegliere il colore del testo con contrasto più elevato.