Alat generator palet warna online

Palet bersama menjaga konsistensi visual, mempercepat serah terima ke pengembangan, dan mengurangi tebakan hex sembarangan.

Manfaat

• Konsistensi: Aksen sama di banyak layar dan media.
• Merek: Ambil sampel dari foto atau mood board.
• Kecepatan: Kurangi pipet manual.
• Tema: Dari satu gambar ke variabel terang/gelap.
• Inspirasi: Foto menyarankan nuansa yang jarang dipilih manual.

Alat ini membaca setiap piksel gambar Anda, menyusunnya ke dalam kisi berisi 262.144 sel warna, lalu mengelompokkan sel-sel itu menjadi sejumlah swatch yang Anda minta. Bekerja dari sel dan bukan dari piksel itulah yang membuat perubahan pengaturan terasa seketika bahkan pada foto 48 megapiksel.

Alur kerja umum

• Muat berkas: Mulailah dari sumber yang tajam dan cukup cahaya agar warna dominannya bermakna.
• Baca piksel: Setiap piksel dihitung pada resolusi penuh, dengan piksel yang sepenuhnya transparan dikecualikan secara bawaan agar latar sebuah logo tidak menjadi swatch.
• Kelompokkan: Warna yang mirip dikumpulkan menggunakan algoritma dan suasana yang Anda pilih.
• Ukur: Setiap kelompok melaporkan warna rata-rata tepat dari pikselnya sendiri, beserta seberapa besar bagian gambar yang ditempatinya.
• Serahkan: Salin kode hex, ekspor ke format siap kode, dan periksa kontras serta keamanan buta warna sebelum dirilis.

Kebanyakan pengekstrak melakukan kuantisasi sebelum melaporkan. Mereka membulatkan tiap kanal ke sebuah bucket dan mengembalikan nilai bucket itu, sehingga gambar #ff0000 murni keluar sebagai #fa0000 — warna yang tidak ada di mana pun dalam gambar. Untuk alat yang seluruh keluarannya adalah kode hex yang akan Anda tempel ke stylesheet, itu persis pekerjaan yang dikerjakan salah.

• Pengelompokan bersifat perkiraan dan cepat; pelaporan bersifat tepat. Keduanya sengaja dipisahkan.
• Setiap swatch adalah rata-rata aritmetika dari piksel nyata yang ditugaskan padanya, diakumulasi dengan presisi penuh.
• Gambar berwarna tunggal mengembalikan tepat satu swatch berisi tepat warna itu.
• Porsi di bawah setiap swatch adalah hitungan piksel nyata, bukan perkiraan — enam pita setara melaporkan 16,7% masing-masing.
• Gambar dan pengaturan yang sama selalu menghasilkan palet yang sama. Tidak ada yang memakai benih acak di sini.

Ketiganya membaca setiap piksel dan melaporkan warna yang tepat. Yang membedakan adalah apa yang dioptimalkan, dan pilihan yang tepat bergantung pada apa yang ingin Anda ambil dari gambar.

• K-means: pilihan bawaan. Mengelompokkan warna agar swatch-nya sejauh mungkin terpisah secara persepsi, yang memang diinginkan dari sebuah foto.
• Frekuensi: menambatkan setiap swatch pada warna yang benar-benar menutupi area luas. Jawaban yang tepat untuk “apa warna merek pada logo ini”, di mana rata-rata antara dua warna nyata justru salah.
• Median cut: membagi berdasarkan jumlah piksel yang sama, sehingga aksen cerah kecil mendapat ruang proporsional lebih besar dibanding dua lainnya. Kuantiser klasik, dan pilihan untuk dithering.

Suasana mengubah warna mana yang dipilih, bukan bagaimana warna terpilih dilaporkan. Ia memberi bobot pada warna-warna gambar sebelum pengelompokan, sehingga foto yang sama menghasilkan palet yang benar-benar berbeda namun sama-sama jujur.

• Netral: hanya cakupan — warna yang menempati bagian terbesar gambar.
• Colorful: mengutamakan saturasi pada tingkat terang berapa pun, untuk pembacaan gambar yang paling hidup.
• Bright: mengutamakan warna yang sekaligus terang dan jenuh.
• Muted: mengutamakan nada tengah yang pudar, menghindari hitam dan putih, dua warna paling tidak pudar yang ada.
• Deep: mengutamakan nada permata yang gelap dan jenuh.
• Dark: mengutamakan nada bayangan pada saturasi berapa pun.

Harmoni adalah rotasi rona yang menjaga segalanya tetap. Melakukannya di LCH dan bukan di HSL lebih penting daripada kedengarannya: memutar biru 180 derajat di HSL menghasilkan kuning dengan terang nominal sama yang kira-kira sembilan kali lebih terang bagi mata.

• Enam aturan: komplementer, analog, triadik, komplementer terbelah, tetradik, dan monokromatik.
• Kroma ikut terbawa: basis yang pudar menghasilkan harmoni pudar, basis yang hidup menghasilkan harmoni hidup.
• Warna di luar gamut dipetakan, bukan dipotong: kroma dikurangi sampai warnanya muat, sehingga rona yang Anda minta adalah rona yang Anda dapat.
• Warna nyaris netral mengatakannya: abu-abu tidak punya rona berarti untuk diputar, dan alat ini menampilkan tangganya alih-alih mengarang komplemen.
• Tangga tint dan shade: sebelas langkah yang rata secara persepsi per swatch, dalam pola 50–950 yang diharapkan setiap framework CSS.

Palet yang terlihat bagus tetapi tidak terbaca belum selesai. Kedua pemeriksaan berikut gratis pada semua paket, karena pemeriksaan aksesibilitas di balik dinding bayar lebih buruk daripada tidak ada pemeriksaan sama sekali.

• Kontras WCAG untuk setiap pasangan dalam palet — semuanya, bukan sampel dari beberapa yang pertama.
• Setiap warna terhadap hitam dan putih, dengan yang lebih baik disebutkan, agar jelas warna teks apa yang dibutuhkan sebuah tombol.
• Hasil AA, AA besar, dan AAA dilabeli per pasangan.
• Protanopia, deuteranopia, dan tritanopia disimulasikan pada seluruh palet.
• Setiap pasangan yang tidak lagi dapat dibedakan disebutkan beserta selisih warna terukur di sampingnya.

Ekspor adalah produknya — tidak ada yang mengekstrak palet hanya untuk dipandang. CSS, JSON, dan daftar hex sederhana gratis; format yang membawa palet ke perangkat lunak lain termasuk bagian Pro.

• CSS dan SCSS: properti kustom dan variabel, masing-masing diberi catatan nama warna terdekat dan porsinya terhadap gambar.
• Tailwind: blok @theme, siap ditempel ke stylesheet Tailwind v4.
• JSON: setiap swatch dengan koordinat RGB, Lab, dan LCH, porsinya, serta nama warna CSS terdekatnya.
• ASE: Adobe Swatch Exchange, untuk Illustrator, InDesign, dan Photoshop.
• GPL: format palet GIMP, yang juga dibaca Inkscape, Krita, dan Scribus.
• SVG dan PNG: kartu swatch untuk dibagikan, ketika palet ditujukan ke ruang obrolan alih-alih ke basis kode.

Langkah dari unggah hingga ekspor.

1. Tambahkan gambar. Seret berkas ke halaman, tempel dari papan klip (Ctrl+V atau ⌘V), atau klik Telusuri. Palet muncul begitu gambar selesai dibaca.
2. Pilih pengaturan. Pilih algoritma (frekuensi, K-means, atau median cut), suasana warna, dan jumlah warna — tiga sampai delapan pada paket gratis.
3. Sempurnakan. Gunakan pipet untuk mengganti sembarang swatch dengan warna yang Anda ambil dari gambar, lalu periksa kisi kontras dan laporan buta warna sebelum menetapkan.
4. Gunakan atau ekspor. Salin nilai hex, unduh CSS, SCSS, atau JSON, dan tinjau saran harmoni serta kontras sebelum menetapkan skema.

Sedikit warna inti dan cek kontras awal mengurangi pekerjaan ulang.

Acuan

• Sebagian besar sistem antarmuka berhenti di sekitar tiga sampai sepuluh warna inti agar status dan warna netral tetap terbaca.
• Ekstraksi frekuensi mengutamakan warna yang menutupi area luas foto, yang membantu untuk gambar utama.
• Metode klaster memunculkan gradasi halus yang akan terlewat oleh satu kali ambilan pipet.
• Ekspor CSS atau JSON langsung cocok untuk design token dan pustaka komponen.
• Foto 12 megapiksel dibaca seluruhnya dalam jauh di bawah satu detik, dan mengubah pengaturan setelahnya hanya memakan sebagian kecil dari itu karena pikselnya tidak dibaca ulang.

Praktik terbaik

Anggap hasil sebagai dasar; sesuaikan dengan pedoman merek dan aksesibilitas.

• Gunakan referensi beresolusi tinggi tanpa artefak kompresi berat agar rata-ratanya lebih bersih.
• Perbanyak jumlah warna bila adegan punya banyak material berbeda; kurangi untuk tata letak minimalis.
• Simpan hasil ekspor mentah dan README singkat berisi nama token agar rekan tim tahu cara mengimpornya.
• Pratinjau teks dan ikon di atas latar yang sebenarnya, bukan hanya swatch yang berdiri sendiri.
• Gunakan pipet bila jawaban otomatisnya sudah dekat tetapi Anda ingin piksel persis yang Anda maksud.

Kasus penggunaan

• Web: Landing dari foto klien.
• Branding: Warna dari visual kampanye.
• Ruang: Inspirasi material.
• Fashion: Papan musiman.
• Seni: Pelajari distribusi warna.

• Pemilih Warna
• Hex ke RGB
• RGB ke Hex
• Penganalisis Gambar
• Gradasi Warna
• Kompres Gambar
• Semua konverter