Generatore di palette di colori

Supporta la generazione di molteplici schemi di colori, l’estrazione dei colori dalle immagini, la creazione di gradienti CSS ed effetti ombra, con elaborazione singola o in batch.

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

Modalità monocromatica

Prelievo colori in batch

1Scegli colore base

RGB: 2, 132, 199 HSL: 243°, 75%, 59%

2Scegli schema colori

Numero colori:

Regola saturazione: 0%

Regola luminosità: 0%

3Schema colori

4Gradiente CSS

Tipo gradiente:

Angolo: 90°

5Effetto ombra

Raggio sfocatura: 20px

Raggio espansione: 0px

Opacità: 40%

Anteprima effetto

6Estrai colori da immagine

Clicca per caricare o trascina qui l'immagine

Supporta JPG, PNG, GIF, WebP

1Carica più immagini

Clicca per caricare o trascina qui più immagini

Selezione multipla supportata; ogni immagine avrà il colore dominante estratto

Colori estratti per immagine:

Schema colori:

Copiato negli appunti

'; zip.file('preview.html', htmlContent); const content = await zip.generateAsync({ type: 'blob' }); const link = document.createElement('a'); link.href = URL.createObjectURL(content); const timestamp = new Date().toISOString().replace(/[-:.]/g, '').slice(0, 15); link.download = `color-palettes-${timestamp}.zip`; link.click(); downloadBatchZip.disabled = false; batchStatus.textContent = 'ZIP文件已下载'; }); // ========== 导出功能 ========== document.getElementById('exportPaletteBtn').addEventListener('click', function() { if (currentPalette.length === 0) return; const data = { baseColor: baseColorPicker.value, scheme: currentScheme, colors: currentPalette.map(c => ({ hex: c.hex, rgb: `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`, hsl: `hsl(${Math.round(c.hsl.h)}, ${Math.round(c.hsl.s)}%, ${Math.round(c.hsl.l)}%)` })), gradient: gradientCode.textContent, shadow: shadowCode.textContent }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `color-palette-${baseColorPicker.value.replace('#', '')}.json`; link.click(); showCopyToast('配色方案已导出'); }); // ========== 初始化 ========== schemeDescription.textContent = schemeDescriptions['monochromatic']; updateColorDisplay(); updatePalette(); });

Istruzioni

Istruzioni per l’uso del software

Scegli il colore di base: usa il selettore colore per scegliere il colore di base, oppure inserisci direttamente un valore HEX (ad es. #4f46e5); puoi anche fare clic sul pulsante "Colore casuale" per trovare ispirazione. Lo strumento mostra in tempo reale le informazioni sui valori RGB e HSL.
Scegli lo schema cromatico:
- Schema monocromatico: stessa tonalità, con variazioni ottenute modificando saturazione e luminosità
- Schema analogo: colori adiacenti sulla ruota cromatica, naturali e morbidi
- Schema complementare: due colori opposti sulla ruota cromatica, con forte contrasto
- Complementare diviso: il colore di base e i colori ai lati del suo complementare
- Schema triadico: tre colori distribuiti a distanza uguale sulla ruota cromatica
- Schema quadrato: quattro colori distribuiti a distanza uguale
- Schema tetradico: due coppie di colori complementari, con livelli ben definiti
Regola i parametri:
- Numero di colori: scegli di generare 3, 5, 7 o 9 colori
- Regolazione della saturazione: trascina il cursore per aumentare o diminuire la saturazione complessiva
- Regolazione della luminosità: trascina il cursore per aumentare o diminuire la luminosità complessiva
Genera gradienti CSS: scegli il tipo di gradiente lineare o radiale e regola il parametro dell’angolo per generare codice CSS per gradienti pronto all’uso.
Genera effetti ombra: regola i parametri di raggio di sfocatura, raggio di espansione e opacità per generare codice CSS per ombre basato sul colore di base corrente.
Estrai colori da un’immagine: dopo aver caricato un’immagine, lo strumento estrae automaticamente i colori principali. Puoi fare clic in qualsiasi punto dell’immagine per prelevare con precisione un colore e applicare il colore estratto come colore di base.
Modalità di estrazione colore in batch: passa alla scheda "Estrazione colore in batch", carica più immagini, imposta il numero di colori da estrarre da ciascuna immagine e la modalità di espansione dello schema cromatico, quindi fai clic per avviare l’estrazione in batch. Al termine, puoi scaricare un file ZIP contenente tutti i risultati.
Copia ed esporta: fai clic su qualsiasi scheda colore per copiare il valore del colore; fai clic sul pulsante "Esporta schema cromatico" per scaricare un file JSON con tutte le informazioni sulla palette.

Domande frequenti

R: Lo schema monocromatico è adatto a design semplici ed eleganti; i colori analoghi sono adatti a temi naturali e sfondi sfumati; i colori complementari sono adatti a design in evidenza che richiedono un forte contrasto; lo schema triadico è adatto a prodotti per bambini vivaci e creazioni artistiche; gli schemi quadrato e tetradico sono adatti a interfacce complesse e visualizzazione dei dati. Scegli lo schema più adatto in base agli obiettivi di design.

R: Carica un’immagine nell’area "Estrai colori dall’immagine": lo strumento analizzerà automaticamente l’immagine ed estrarrà 8 tonalità principali. Puoi fare clic su un colore estratto per selezionarlo, quindi fare clic sul pulsante "Usa il colore selezionato come colore di base" per generare una palette completa basata su quel colore.

R: Fai clic sul pulsante "Copia" nell’area del codice del gradiente, incolla il codice nel tuo file CSS e applicalo all’elemento che necessita di uno sfondo sfumato. Sono supportati due tipi: gradiente lineare e gradiente radiale; per il gradiente lineare è possibile personalizzare l’angolo e la direzione.

R: Il file ZIP scaricato al termine dell’elaborazione in batch contiene tre file: palette-summary.json (riepilogo JSON di tutti i dati delle palette), palettes.css (definizioni di variabili CSS pronte all’uso), preview.html (pagina di anteprima visiva). Questo facilita l’utilizzo delle palette estratte in diversi scenari.

R: La saturazione controlla l’intensità del colore: aumentarla rende i colori più vivaci, diminuirla li rende più morbidi e grigiastri; la luminosità controlla quanto un colore è chiaro o scuro: aumentarla rende i colori più chiari, diminuirla li rende più profondi. Regolando questi due parametri puoi rifinire l’effetto complessivo della palette.

R: Sono supportati i formati immagine comuni come JPG, JPEG, PNG, GIF, WebP, ecc. Si consiglia di utilizzare immagini ricche di colori e con contrasto elevato per ottenere risultati di estrazione del colore dominante più accurati. L'elaborazione delle immagini avviene interamente in locale e non vengono caricate sul server.

R: Fai clic direttamente su una scheda colore o su un campione colore qualsiasi: il valore HEX corrispondente verrà copiato automaticamente negli appunti e in fondo alla pagina verrà visualizzato il messaggio "Copiato negli appunti". Nei risultati in batch, puoi allo stesso modo fare clic sulla barra colore per copiare il valore corrispondente.