Generator Skema Warna

Mendukung pembuatan berbagai skema warna, pengambilan warna dari gambar, serta pembuatan warna gradien CSS dan efek bayangan, dapat diproses per warna atau secara batch.

Laporan bug

Mode eksekusi browser: Data Anda diproses di browser dan tidak diunggah ke server.

Kecepatan dan stabilitas: Kecepatan pemrosesan bergantung pada perangkat dan browser Anda. Untuk pekerjaan batch besar, versi desktop mungkin lebih stabil.

Memuat alat, harap tunggu...

Jika alat online tidak dapat dimuat atau dijalankan, coba alat desktop. https://tools.yikeaigc.com/

Penggunaan Alat

Kembali ke versi lama

Mode Monokrom

Ambil Warna Massal

1Pilih Warna Dasar

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

2Pilih Skema Warna

Jumlah warna:

Atur saturasi: 0%

Atur kecerahan: 0%

3Skema warna

4Gradien CSS

Jenis gradien:

Sudut: 90°

5Efek bayangan

Radius blur: 20px

Radius sebar: 0px

Transparansi: 40%

Pratinjau efek

6Ekstrak warna dari gambar

Klik unggah atau seret gambar ke sini

Mendukung format JPG, PNG, GIF, WebP

1Unggah beberapa gambar

Klik untuk unggah atau seret beberapa gambar ke sini

Mendukung pilih massal, warna utama tiap gambar diekstrak otomatis

Jumlah warna tiap gambar:

Skema warna:

Disalin ke papan klip

'; 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(); });

Petunjuk

Petunjuk Penggunaan Perangkat Lunak

Pilih warna dasar:Gunakan pemilih warna untuk memilih warna dasar, atau langsung masukkan nilai warna HEX (seperti #4f46e5), Anda juga dapat mengeklik tombol "Warna acak" untuk mendapatkan inspirasi. Alat akan menampilkan informasi nilai warna RGB dan HSL secara real time.
Pilih skema warna:
- Skema monokrom:Rona yang sama, menghasilkan variasi dengan mengubah saturasi dan kecerahan
- Skema warna analog:Warna yang berdekatan pada roda warna, alami dan lembut
- Skema warna komplementer:Dua warna yang berlawanan pada roda warna, dengan kontras kuat
- Komplementer terpisah:Warna dasar dan warna di kedua sisi warna komplementernya
- Skema warna triadik:Tiga warna yang tersebar merata pada roda warna
- Skema warna persegi:Empat warna yang tersebar merata
- Skema warna tetradik:Dua pasang warna komplementer, dengan lapisan yang jelas
Sesuaikan parameter:
- Jumlah warna:Pilih untuk menghasilkan 3, 5, 7, atau 9 warna
- Penyesuaian saturasi:Geser penggeser untuk menambah atau mengurangi saturasi keseluruhan
- Penyesuaian kecerahan:Geser penggeser untuk menambah atau mengurangi kecerahan keseluruhan
Hasilkan gradien CSS:Pilih jenis gradien linear atau radial, sesuaikan parameter sudut, lalu kode gradien CSS yang siap digunakan akan dihasilkan.
Hasilkan efek bayangan:Sesuaikan parameter radius blur, radius sebar, dan opasitas untuk menghasilkan kode CSS bayangan berdasarkan warna dasar saat ini.
Ekstrak warna dari gambar:Setelah mengunggah gambar, alat akan otomatis mengekstrak warna utama. Anda dapat mengeklik posisi mana pun pada gambar untuk mengambil warna secara presisi dan menerapkan warna yang diekstrak sebagai warna dasar.
Mode pengambilan warna batch:Beralih ke tab "Pengambilan warna batch", unggah beberapa gambar, atur jumlah warna yang diekstrak dari setiap gambar dan mode perluasan skema warna, klik mulai ekstraksi batch, setelah selesai Anda dapat mengunduh ZIP yang berisi semua hasil.
Salin dan ekspor:Klik kartu warna mana pun untuk menyalin nilai warna, klik tombol "Ekspor skema warna" untuk mengunduh file JSON yang berisi informasi skema warna lengkap.

Pertanyaan Umum

J:Skema monokrom cocok untuk desain yang sederhana dan elegan; warna analog cocok untuk tema alami dan latar belakang gradien; warna komplementer cocok untuk desain menonjol yang membutuhkan kontras kuat; warna triadik cocok untuk produk anak-anak yang ceria dan kreasi seni; warna persegi dan tetradik cocok untuk antarmuka kompleks dan visualisasi data. Pilih skema yang sesuai berdasarkan tujuan desain.

Jawab: Unggah gambar di area "Ekstrak Warna dari Gambar", alat akan otomatis menganalisis dan mengekstrak 8 rona warna utama. Anda dapat mengeklik warna yang diekstrak untuk memilihnya, lalu klik tombol "Gunakan Warna Terpilih sebagai Warna Dasar" untuk menghasilkan skema warna lengkap berdasarkan warna tersebut.

Jawab: Klik tombol "Salin" di area kode warna gradien, lalu tempelkan kode tersebut ke file CSS Anda dan terapkan pada elemen yang memerlukan latar belakang gradien. Mendukung dua jenis gradien: gradien linear dan gradien radial; untuk gradien linear, arah sudut dapat disesuaikan.

Jawab: ZIP yang diunduh setelah pemrosesan batch selesai berisi tiga file: palette-summary.json (ringkasan JSON dari semua data skema warna), palettes.css (definisi variabel CSS yang dapat langsung digunakan), preview.html (halaman pratinjau visual). Ini memudahkan penggunaan skema warna yang diekstrak dalam berbagai skenario.

Jawab: Saturasi mengontrol tingkat ketajaman warna; meningkatkan saturasi membuat warna lebih cerah dan mencolok, sedangkan menurunkannya membuat warna lebih lembut dan keabu-abuan; kecerahan mengontrol tingkat terang-gelap warna; meningkatkan kecerahan membuat warna lebih terang, sedangkan menurunkannya membuat warna lebih gelap. Dengan menyesuaikan kedua parameter ini, Anda dapat menyempurnakan efek skema warna secara keseluruhan.

Jawaban: Mendukung format gambar umum seperti JPG, JPEG, PNG, GIF, WebP, dan lainnya. Disarankan menggunakan gambar dengan warna yang kaya dan kontras tinggi untuk mendapatkan hasil ekstraksi warna utama yang lebih akurat. Pemrosesan gambar dilakukan sepenuhnya secara lokal dan tidak akan diunggah ke server.

Jawaban: Klik langsung kartu warna atau blok warna mana pun, dan nilai warna HEX yang sesuai akan otomatis disalin ke clipboard. Di bagian bawah halaman akan muncul pemberitahuan "Berhasil disalin ke clipboard". Pada hasil batch, klik bilah warna juga untuk menyalin nilai warna yang sesuai.