Pemilih Warna Gambar & Palet
Pemilih Warna Gambar & Palet
Klik untuk memilih warna dari gambar, otomatis ekstrak warna dominan dan palet, salin HEX/RGB dan ekspor variabel CSS. Mendukung PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF.
Seret dan lepas gambar di sini atau klik untuk memilih
Mendukung PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF
🚀 Mulai cepat
- Impor gambar: Seret dan lepas atau klik untuk memilih
- Ganti panel: Desktop menampilkan panel samping; Mobile ketuk tombol bawah
- Klik untuk memilih: Klik di mana saja pada gambar untuk mendapatkan warna piksel itu
- Salin warna: Setelah memilih salin format HEX/RGB/CSS
- Atur jumlah warna: Seret slider atau klik preset (4/6/8/12/16/24/32)
- Ekstrak palet: Klik tombol ekstrak untuk mendapatkan daftar warna dominan
- Ekspor CSS: Setelah ekstraksi ekspor file variabel CSS
- Ekspor JSON: Setelah ekstraksi ekspor file data JSON
- Reset: Hapus gambar saat ini dan hasil
📌 Skenario umum
- Pemilihan warna desain/poster: Ekstrak warna primer dan aksen untuk skema warna
- Tema/sistem desain: Ekspor variabel CSS atau JSON untuk proyek
- Styling komponen: Ekstrak warna yang cocok untuk tombol, tag, grafik
- Konsistensi merek: Ekstrak palet warna standar dari aset merek
🎛️ Opsi Pemilih Warna & Palet
- Jumlah warna: 2–32, umumnya 8/12; foto/gradien menyarankan 16–32
- Tombol preset: 4/6/8/12/16/24/32 ganti satu klik
- Pengurutan: Berdasarkan persentase dari tinggi ke rendah, warna paling umum pertama
- Angka di samping warna: Menunjukkan persentase piksel dalam gambar
🧭 Saran penggunaan
- Mulai dengan 8/12 untuk melihat efek keseluruhan, lalu tingkatkan ke 16/24/32 sesuai kebutuhan
- Saat menggunakan di proyek, ganti nama --color-1 menjadi nama semantik (misal, --color-primary)
- Jaga halaman di depan saat mengekstrak gambar besar untuk menghindari throttling browser
⚠️ Batasan & kompatibilitas
- Batas file tunggal 128MB, gambar sangat besar mungkin menyebabkan perlambatan
- Ekstraksi palet otomatis downsample untuk performa, hasil adalah warna representatif
- Decoding HEIC/HEIF tergantung pada dukungan browser, konversi ke JPG/PNG jika gagal
- Piksel transparan diabaikan atau diproses sebagai RGBA aktual
🔒 Privasi & keamanan
- Semua pemrosesan dilakukan di browser Anda; data tidak pernah meninggalkan perangkat
❓ Pertanyaan umum
Bagaimana menggunakan file CSS yang diekspor?
Letakkan :root { --color-1: ... } yang diekspor di CSS global, lalu referensikan dengan var(--color-1).
JSON ekspor untuk apa?
Untuk penggunaan ulang skrip/sistem desain, misal, menghasilkan Design Tokens atau konfigurasi tema. Setiap warna termasuk hex/css/rgb dan count.
Jumlah warna mana yang disarankan?
UI umum: 8 atau 12; ikon minimal: 4–6; foto/gradien: 16–32. Gunakan preset untuk perbandingan cepat.
Mengapa warna yang diklik dan palet berbeda?
Pemilihan klik mendapat piksel tunggal; palet mengkuantisasi seluruh gambar untuk warna representatif yang menekankan tren keseluruhan.
Mengapa tombol ekspor abu-abu?
Perlu klik 'Ekstrak Palet' dulu, ekspor tersedia setelah ekstraksi selesai.
Bagaimana nama file ekspor dihasilkan?
Default menggunakan nama file asli (tanpa ekstensi) + .palette-jumlah + .css/.json, dengan karakter ilegal dibersihkan otomatis.