Chromaverse
Keterangan
Chromaverse adalah aplikasi web canggih yang memungkinkan pengguna untuk menghasilkan dan membandingkan palet warna berdasarkan nilai hex, input acak, atau deskripsi berbasis suasana hati. Pengguna dapat menghasilkan beberapa palet, melihat detail warna individual, mengunduh palet, dan membandingkannya dalam tampilan berdampingan. Desainnya ramping dan profesional, menampilkan efek hover, pratinjau warna, dan kemampuan unduhan lanjutan untuk palet warna dan gradien.
Fitur
- Multiple Hex Input : Pengguna dapat memasukkan beberapa nilai hex yang dipisahkan oleh koma untuk menghasilkan swatch warna individu dan gradien.
- Deteksi otomatis warna : Masukkan teks atau deskripsi suasana hati apa pun, dan sistem akan mencoba untuk mengekstrak nilai hex yang relevan atau menghasilkan warna berdasarkan input.
- Lingkaran Warna Lingkaran : Setiap warna yang dihasilkan ditampilkan dalam swatch melingkar untuk visualisasi yang lebih baik.
- Generasi Gradien : Gradien dari semua warna yang dihasilkan secara otomatis disediakan.
- Unduh Warna : Unduh seluruh palet atau gradien yang dihasilkan sebagai gambar PNG.
- Tampilan Nilai Hex : Menampilkan nilai hex individu untuk setiap warna dalam palet, dengan tombol "Salin" untuk dengan mudah menyalin kode hex.
- Efek Hover : Efek yang ditingkatkan melayang membuat warna individu muncul saat melayang, meningkatkan pengalaman pengguna.
- Pemilih Warna : Alat pemetik warna tersedia, memungkinkan pengguna untuk memilih warna secara manual dan menampilkan nilai hex mereka secara real-time.
- Beberapa palet : menghasilkan beberapa palet berturut -turut. Setiap palet memiliki opsi untuk menghapusnya, dengan pesan peringatan untuk konfirmasi.
- Bandingkan palet : Tambahkan palet ke "daftar banding" untuk membandingkan kombinasi warna yang berbeda secara visual dalam tampilan berdampingan.
- Hapus & Bersihkan Semua Palet : Pengguna dapat menghapus palet individual dari daftar perbandingan atau menghapus semua palet dengan konfirmasi peringatan sebelum dibersihkan.
- Unduh Daftar Bandingkan : Unduh semua palet dalam daftar perbandingan sebagai gambar PNG tunggal.
- Styling Profesional : Desain UI Lanjutan dengan teknik CSS modern seperti Glassmorphism, transisi yang lancar, dan desain responsif memastikan aplikasi terlihat dipoles dan profesional.
Cara menggunakan
- Masukkan nilai hex : Di bidang input, Anda dapat memasukkan satu atau lebih nilai hex yang dipisahkan oleh koma. Secara opsional, masukkan deskripsi teks atau suasana hati, dan sistem akan mendeteksi secara otomatis dan menghasilkan warna untuk Anda.
- Hasilkan Palet : Klik tombol "Hasilkan" untuk menghasilkan palet warna. Warna ditampilkan sebagai swatch melingkar, dan gradien semua warna juga ditampilkan.
- Warisan Warna : Pindahkan mouse Anda di atas warna individual untuk melihat pratinjau yang ditingkatkan dan lihat masing -masing kode hex.
- Opsi Unduh : Gunakan tombol yang disediakan untuk mengunduh palet warna yang dihasilkan atau gradien sebagai file PNG.
- Salin Nilai Hex : Salin kode hex individu menggunakan tombol "Salin" di sebelah setiap warna.
- Tambahkan ke Daftar Bandingkan : Klik "Tambahkan untuk Membandingkan Daftar" untuk memindahkan palet yang dihasilkan ke bagian perbandingan.
- Bandingkan & hapus palet : Lihat dan bandingkan beberapa palet, lepaskan palet individu, atau hapus semua dengan peringatan konfirmasi.
- Unduh Daftar Bandingkan : Setelah membandingkan palet, unduh semuanya sebagai gambar PNG tunggal untuk referensi di masa mendatang.
Instruksi Instalasi
Klon Repositori :
git clone https://github.com/username/color-palette-generator.git
cd color-palette-generator
Buka index.html di browser Anda:
Struktur file
color-palette-generator/
├── index.html # Main HTML file
├── style.css # CSS file for styling the UI
├── script.js # JavaScript file for functionality
Tinjauan Kode
Html
- HTML menyediakan struktur untuk bidang input, tombol, tampilan warna, daftar banding, dan opsi unduhan.
- Ini menggunakan elemen
<input> , <button> , <div> , dan <canvas> untuk menyusun UI dan berinteraksi dengan JavaScript untuk fungsionalitas.
CSS
- CSS mencakup gaya canggih untuk efek hover, glassmorphism, dukungan mode gelap, desain responsif, dan elemen UI modern lainnya.
- Warna dikontrol menggunakan variabel CSS, membuatnya mudah untuk beralih antara mode terang dan gelap.
Javascript
- JavaScript digunakan untuk menghasilkan palet warna dari input pengguna, menangani ekstraksi nilai hex, mengelola daftar perbandingan, mengaktifkan pengunduhan gambar, dan menambahkan interaktivitas seperti efek hover dan peringatan.
- Kode ini memanfaatkan kanvas untuk membuat gambar untuk diunduh dan API clipboard untuk menyalin nilai hex.
Teknologi digunakan
- HTML5 : Menyediakan struktur untuk aplikasi.
- CSS3 : Bertanggung jawab atas desain responsif, efek hover, dan gaya glassmorphic modern.
- JavaScript : Menangani logika untuk menghasilkan palet, mengekstraksi warna, mengunduh gambar, dan interaktivitas.
- Canvas API : Digunakan untuk menghasilkan gambar PNG yang dapat diunduh dari palet warna dan gradien.
Lisensi
Proyek ini dilisensikan di bawah lisensi MIT. Lihat file lisensi untuk detailnya.
