Penjana Skema Warna

Menyokong penjanaan pelbagai skema warna, pemilihan warna daripada imej, serta penjanaan warna kecerunan CSS dan kesan bayang; boleh diproses secara satu warna atau secara pukal.

Laporan pepijat

Mod pelaksanaan pelayar: Data anda diproses dalam penyemak imbas dan tidak dimuat naik ke pelayan.

Kelajuan dan kestabilan: Kelajuan pemprosesan bergantung pada peranti dan pelayar anda. Untuk kerja kelompok besar, versi desktop mungkin lebih stabil.

Memuatkan alat, sila tunggu...

Jika alat dalam talian tidak dapat dimuatkan atau dijalankan, cuba alat desktop. https://tools.yikeaigc.com/

Penggunaan Alat

Kembali ke versi lama

Mod monokrom

Ambil warna pukal

1Pilih warna asas

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

2Pilih skema warna

Bilangan warna:

Laras ketepuan: 0%

Laras kecerahan: 0%

3Skema warna

4Gradien CSS

Jenis gradien:

Sudut: 90°

5Kesan bayang

Jejari kabur: 20px

Jejari sebar: 0px

Kelegapan: 40%

Pratonton kesan

6Ekstrak warna daripada imej

Klik untuk muat naik atau seret imej ke sini

Menyokong format JPG, PNG, GIF, WebP

1Muat naik berbilang imej

Klik muat naik atau seret beberapa imej ke sini

Sokong pilihan pukal; warna utama setiap imej diekstrak automatik

Bilangan warna setiap imej:

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

Arahan

Arahan Penggunaan Perisian

Pilih warna asas:Gunakan pemilih warna untuk memilih warna asas, atau masukkan nilai warna HEX secara terus (seperti #4f46e5). Anda juga boleh klik butang "Warna rawak" untuk mendapatkan inspirasi. Alat ini akan memaparkan maklumat nilai warna RGB dan HSL secara masa nyata.
Pilih skema warna:
- Skema warna monokrom:Rona yang sama, menghasilkan variasi dengan mengubah ketepuan dan kecerahan
- Skema warna analog:Warna yang bersebelahan pada roda warna, semula jadi dan lembut
- Skema warna pelengkap:Dua warna yang bertentangan pada roda warna, dengan kontras yang kuat
- Warna pelengkap terpisah:Warna asas dan warna di kedua-dua sisi warna pelengkapnya
- Skema warna triadik:Tiga warna yang diedarkan secara sama jarak pada roda warna
- Skema warna segi empat:Empat warna yang diedarkan secara sama jarak
- Skema warna tetradik:Dua pasang warna pelengkap, dengan lapisan yang jelas
Laraskan parameter:
- Bilangan warna:Pilih untuk menjana 3, 5, 7 atau 9 warna
- Pelarasan ketepuan:Seret peluncur untuk menambah atau mengurangkan ketepuan keseluruhan
- Pelarasan kecerahan:Seret peluncur untuk menambah atau mengurangkan kecerahan keseluruhan
Jana warna kecerunan CSS:Pilih jenis kecerunan linear atau radial, laraskan parameter sudut, dan kod warna kecerunan CSS yang boleh digunakan terus akan dijana.
Jana kesan bayang:Laraskan parameter jejari kabur, jejari sebaran dan ketelusan untuk menjana kod CSS bayang berdasarkan warna asas semasa.
Ekstrak warna daripada imej:Selepas memuat naik imej, alat ini akan mengekstrak tona warna utama secara automatik. Anda boleh klik mana-mana lokasi pada imej untuk memilih warna dengan tepat dan menggunakan warna yang diekstrak sebagai warna asas.
Mod pengambilan warna pukal:Beralih ke tab "Pengambilan warna pukal", muat naik berbilang imej, tetapkan bilangan warna yang diekstrak bagi setiap imej dan mod pengembangan skema warna, kemudian klik mula ekstrak secara pukal. Setelah selesai, anda boleh memuat turun ZIP yang mengandungi semua hasil.
Salin dan eksport:Klik mana-mana kad warna untuk menyalin nilai warna. Klik butang "Eksport skema warna" untuk memuat turun fail JSON yang mengandungi maklumat skema warna lengkap.

Soalan Lazim

J:Skema warna monokromsesuai untuk reka bentuk yang ringkas dan elegan; warna analogsesuai untuk tema semula jadi dan latar belakang kecerunan; warna pelengkapsesuai untuk reka bentuk menonjol yang memerlukan kontras kuat; warna triadiksesuai untuk produk kanak-kanak yang ceria dan ciptaan seni; warna segi empat dan tetradiksesuai untuk antara muka kompleks dan visualisasi data. Pilih skema yang sesuai berdasarkan matlamat reka bentuk.

Jawapan: Muat naik imej di kawasan "Ekstrak warna daripada imej", alat ini akan menganalisis dan mengekstrak 8 tona warna utama secara automatik. Anda boleh klik warna yang diekstrak untuk memilihnya, kemudian klik butang "Gunakan warna terpilih sebagai warna asas" untuk menjana skema warna lengkap berdasarkan warna tersebut.

Jawapan: Klik butang "Salin" di kawasan kod warna gradien, tampal kod ke dalam fail CSS anda, kemudian gunakannya pada elemen yang memerlukan latar belakang gradien. Menyokong dua jenis gradien: gradien linear dan gradien jejari; gradien linear boleh menyesuaikan arah sudut.

Jawapan: ZIP yang dimuat turun selepas pemprosesan pukal selesai mengandungi tiga fail: palette-summary.json (ringkasan JSON bagi semua data skema warna), palettes.css (takrif pemboleh ubah CSS yang boleh digunakan terus), preview.html (halaman pratonton visual). Ini memudahkan penggunaan skema warna yang diekstrak dalam pelbagai senario.

Jawapan: Ketepuan mengawal tahap kejelasan warna; meningkatkan ketepuan menjadikan warna lebih terang dan jelas, manakala mengurangkannya menjadikan warna lebih lembut dan kelabu gelap; Kecerahan mengawal tahap terang atau gelap warna; meningkatkan kecerahan menjadikan warna lebih cerah, manakala mengurangkannya menjadikan warna lebih gelap. Dengan melaraskan kedua-dua parameter ini, anda boleh memperhalus kesan keseluruhan skema warna.

Jawapan: Menyokong format imej biasa seperti JPG, JPEG, PNG, GIF, WebP dan lain-lain. Disarankan menggunakan imej yang kaya warna dan mempunyai kontras tinggi untuk mendapatkan hasil pengekstrakan warna dominan yang lebih tepat. Pemprosesan imej dilakukan sepenuhnya secara setempat dan tidak akan dimuat naik ke pelayan.

Jawapan: Klik terus pada mana-mana kad warna atau blok warna, dan nilai warna HEX yang sepadan akan disalin secara automatik ke papan klip. Makluman "Telah disalin ke papan klip" akan dipaparkan di bahagian bawah halaman. Dalam hasil kelompok, anda juga boleh mengklik bar warna untuk menyalin nilai warna yang sepadan.