Generator Palet Warna dari Gambar

Unggah foto, dan palet 3-10 warna muncul bersama posisi warnanya: 6 warna dominan foto contoh adalah #ADB7B3, #D1CBC2, #0C464B, #F1BB8C, #251E1E, #F7E9DE

Alat di atas membaca foto yang Anda pilih di dalam browser dengan membaginya menjadi petak-petak kecil, memilih 3-10 warna yang jelas berbeda, lalu menampilkannya sebagai kartu palet. Pada foto matahari terbenam di pantai yang muncul pertama kali, warna paling luas adalah biru keabu-abuan langit #ADB7B3 (32%) dan abu-abu krem awan #D1CBC2 (25%). Setelah itu ada hijau kebiruan tua laut #0C464B, warna senja #F1BB8C, cokelat kehitaman batu karang #251E1E, dan langit terang di sekitar matahari #F7E9DE.

Titik di atas foto pada kartu menandai posisi tempat warna itu benar-benar ada di foto. Jika warna yang terpilih kurang cocok, seret titik ke tempat yang Anda inginkan dan warnanya berubah menjadi warna di posisi itu. Arahkan kursor ke warna di daftar, dan hanya bagian foto yang dikelompokkan ke warna itu yang akan terang. Foto yang sama bisa menghasilkan palet yang sama sekali berbeda, tergantung apakah Anda memilih "Dominan", "Cerah", atau "Kalem". Kartu yang sudah jadi bisa disimpan sebagai PNG ukuran asli dalam bentuk Polaroid, potret 3:4, Story 9:16, atau lanskap 16:9, dan juga bisa disalin sebagai daftar HEX atau variabel CSS. Foto hanya dibaca di dalam browser ini dan tidak dikirim ke server.

Kapan perlu mengambil palet dari foto

Memulai dari satu foto yang Anda sukai lebih cepat menghasilkan kombinasi yang serasi daripada memilih warna dari nol. Warna dalam foto muncul bersama di bawah cahaya yang sama, jadi jarang ada warna yang bertabrakan. Alat ini berguna untuk keperluan berikut.

• Menentukan warna dasar blog, kanal, atau merek kecil: ambil 3-4 warna kalem dari foto yang punya suasana yang Anda inginkan sebagai kandidat latar dan warna teks, lalu pakai satu warna cerah untuk tombol atau aksen. Dengan melihat posisi titik, Anda juga bisa menjelaskan kepada orang lain dari bagian foto mana warna itu berasal.
• Menyelaraskan thumbnail, konten carousel, atau sampul presentasi dengan fotonya: jika pita judul atau latar di samping foto diwarnai dengan warna dari foto itu, foto dan tulisan tidak terasa berjalan sendiri-sendiri. Kartu lanskap 16:9 memiliki pita warna di samping foto, jadi bisa langsung dipakai sebagai draf sampul slide.
• Mencatat dan membagikan kombinasi warna foto perjalanan atau pemandangan: kartu Polaroid atau Story menyatukan foto dan kode warna dalam satu gambar, sehingga mudah dicari lagi atau dikirim ke orang lain.
• Menjadi acuan saat memilih warna interior, pakaian, atau pernak-pernik: dengan memisahkan warna dinding, lantai, dan furnitur dari foto ruangan yang Anda sukai, Anda bisa memperkirakan perbandingan pemakaian tiap warna lewat persentase luasnya. Namun warna di layar bisa tampak berbeda dari cat atau kain sungguhan, jadi cocokkan dulu dengan sampel fisik sebelum memilih.

Cara memakai

1. Masukkan foto: tekan "Pilih foto", seret file ke area kerja, atau tempel gambar yang sudah disalin dengan Ctrl+V (⌘V). Layar awal sudah berisi foto contoh sehingga Anda bisa langsung mencoba.
2. Pilih jenis pengambilan: pita untuk tiga jenis sudah diambil lebih dulu dengan jumlah warna saat ini. Bandingkan, lalu tekan yang Anda sukai.
3. Atur jumlah warna dan urutan: ubah jumlah warna antara 3 dan 10 dengan tombol − dan +. Untuk urutan, pilih Terluas, Terterang, atau Rona. Kartu dan daftar akan berubah ke urutan yang sama.
4. Sempurnakan dengan titik: jika warna yang Anda inginkan tidak ada, seret titik warna yang paling mirip ke tempat warna itu berada. Dengan keyboard, pilih titik dengan Tab, lalu geser satu petak dengan tombol panah atau sepuluh petak dengan Shift+panah. Warna yang Anda geser sendiri diberi tanda "Dipilih manual", dan "Kembalikan otomatis" membawa Anda kembali ke hasil awal.
5. Pilih bentuk kartu: pilih Polaroid, potret 3:4, Story 9:16, atau lanskap 16:9, lalu tentukan apakah kode HEX dan titik posisi warna dimasukkan ke kartu. Di samping bentuk kartu tertulis ukuran simpanannya dalam piksel.
6. Simpan dan salin: "Simpan kartu PNG" menyimpan kartu yang sama dengan pratinjau dalam ukuran asli. "Salin HEX" menghasilkan satu kode per baris, "Salin variabel CSS" menghasilkan baris seperti --palette-1: #ADB7B3;, dan menekan satu warna di daftar hanya menyalin kode HEX warna itu.

Dominan, Cerah, Kalem: mengapa foto yang sama menghasilkan palet berbeda

Ketiga jenis memilih dari 32 warna kandidat yang sama, tetapi urutan pemilihannya berbeda. "Dominan" mulai dari kandidat yang menempati area terluas di foto. "Cerah" mulai dari kandidat bersaturasi tinggi di antara yang menempati minimal 0,3% foto. "Kalem" mulai dari kandidat yang paling luas di antara warna lembut bersaturasi 0,015-0,09. Saturasi di sini adalah C pada OkLCh, yaitu jarak yang diukur pada dua sumbu a dan b Oklab (√(a² + b²)). Tabel berikut menunjukkan hasil pengambilan 6 warna untuk tiap jenis pada foto contoh, diurutkan dari yang terluas.

Jenis Dominan memuat warna bidang luas seperti langit, awan, laut, dan batu karang. Jenis Cerah mengumpulkan oranye senja dan nuansa hijau kebiruan ombak. Jenis Kalem memuat biru keabu-abuan yang basah serta krem pasir dan awan. Warna peringkat 1 pada Cerah, #EAAD7F, mencapai 56% karena persentase dihitung sebagai "perbandingan petak foto yang dimasukkan ke warna terdekat di antara warna yang dipilih". Enam warna Cerah tidak memuat abu-abu, sehingga petak langit dan awan ikut masuk ke oranye terdekat. Karena itu #F1BB8C yang sama bernilai 12% pada Dominan dan 11% pada Kalem.

Perhitungan di balik pemilihan warna

1. Membagi menjadi petak: foto dibagi menjadi 256 petak pada sisi terpanjang (foto contoh 256 × 170 petak), lalu piksel di tiap petak dirata-ratakan. Jika sisi terpanjang lebih dari 256 px, satu petak berisi beberapa piksel sehingga noise halus akibat kompresi JPEG tersaring oleh rata-rata petak (pada gambar 256 px atau lebih kecil, satu petak sama dengan satu piksel). Petak yang lebih dari separuhnya transparan tidak dihitung.
2. Membuat 32 warna kandidat: warna petak dibagi menjadi 32 kelompok dengan median cut (Heckbert 1982), lalu dilakukan 4 kali penyempurnaan yang memasukkan ulang petak ke kelompok terdekat di Oklab (k-means, Lloyd 1982). Oklab adalah ruang warna yang dirancang agar perbedaan yang tampak sama bagi mata manusia memiliki jarak yang sama.
3. Mencari posisi nyata tiap kandidat: dari petak yang termasuk kandidat itu, dipilih petak "bagian dalam", yaitu petak yang 8 petak di sekelilingnya juga milik kandidat yang sama, yang paling dekat dengan warna kandidat. Warna yang tampil di layar adalah warna petak ini, bukan rata-rata kelompok, jadi warna itu benar-benar ada di foto. Titik juga diletakkan di petak ini. Jika ada beberapa petak dengan warna yang sama, dipilih petak yang paling jauh dari tepi bidangnya, sehingga pada bidang satu warna seperti logo titiknya berada di tengah bidang.
4. Mengurutkan menurut jenis dan menyaring: kandidat ditinjau dengan urutan pada tabel di atas, dan hanya kandidat yang berjarak ΔEOK (jarak dua warna yang diukur di Oklab) minimal 0,07 dari warna yang sudah dipilih yang diambil. Pada jenis Dominan foto contoh, #D1CBC2 (11,0%) di peringkat 1 luas dipilih lebih dulu. Peringkat 2 #E3D6CA (9,3%) dan peringkat 3 #C5C0B4 (7,6%) dilewati karena jaraknya ke #D1CBC2 hanya 0,040 dan 0,036, lebih dekat dari 0,07. Peringkat 4 #ADB7B3 berjarak 0,076 sehingga menjadi warna kedua.
5. Jika kurang, coba sekali lagi: jika jumlah warna tidak terpenuhi dengan batas 0,07, pemilihan diulang dengan batas 0,035. Jika masih kurang, alat menampilkan warna lebih sedikit dan memberi tahu Anda. Alat tidak mengisi kekurangan dengan mengulang warna yang sama. Logo yang hanya memakai tiga warna tetap menghasilkan tiga warna meskipun Anda meminta enam.
6. Menghitung persentase: setiap petak foto dimasukkan ke warna terdekat di Oklab di antara warna yang dipilih, dan perbandingan jumlah petaknya menjadi persentase. Jika titik digeser, warnanya berubah, sehingga persentase juga dihitung ulang.

CSS Color 4 menganggap 0,02 pada OkLCh sebagai perbedaan yang baru bisa dikenali mata (JND). Batas 0,07 pada alat ini sekitar 3,5 kali lipatnya, yaitu jarak yang kami tetapkan agar dua warna cukup berjauhan untuk dipakai sebagai warna berbeda dalam satu palet. Nilai 0,3%, 0,015-0,09, 0,07, dan 0,035 semuanya adalah batas yang ditetapkan alat ini, bukan nilai yang ditetapkan standar. Karena tidak memakai acak, foto dan pengaturan yang sama selalu menghasilkan palet yang sama.

Posisi yang ditunjuk titik

Titik berada di tengah petak "bagian dalam" yang dipilih pada langkah 3 di atas. Karena yang dipilih adalah petak yang sekelilingnya juga berwarna sama, titik lebih sering jatuh di dalam bidang warna daripada di garis batas. Berikut posisi 6 warna Dominan pada foto contoh. Koordinat diukur dari pojok kiri atas gambar asli (1.440 × 958 px) sebagai (0, 0).

Saat kursor diarahkan ke warna di daftar atau fokus dipindahkan dengan Tab, hanya petak foto yang paling dekat dikelompokkan ke warna itu yang tetap terang, dan sisanya menjadi gelap. Ini berguna untuk melihat sekilas bagian mana yang benar-benar ditempati warna berpersentase besar, dan dari bagian mana warna kecil berasal. Jika titik diseret, warna itu berubah menjadi warna petak di tempat titik dilepas, dan area yang terang serta persentasenya dihitung ulang.

Bentuk dan ukuran kartu

Kartu menyimpan bentuk yang sama dengan pratinjau sebagai PNG dengan ukuran tetap. Foto dipotong di tengah agar sesuai dengan rasio area foto pada kartu, dan sisa ruang diisi oleh petak warna. Rasio area foto hanya mengikuti foto dalam rentang tertentu untuk tiap kartu (kolom “Rasio foto tanpa terpotong” pada tabel), dan foto di luar rentang itu dipotong dari tengah. Misalnya, foto potret ponsel (3:4) pada kartu Potret 3:4 mendapat area foto 1.080 × 1.110, sehingga hanya 77,1% yang tersisa. Berikut ukurannya saat foto contoh (mendekati 3:2) dimasukkan.

Polaroid menyesuaikan rasio area foto dengan foto dalam rentang 4:5 sampai 5:4, sehingga foto 3:2 terpotong sedikit di kiri dan kanan. Jika kode HEX dihilangkan, baris teks di bawah ikut hilang dan tinggi kartu berkurang 60 px. Potret 3:4 mengikuti Pusat Bantuan Instagram. Di sana tertulis bahwa foto diunggah dengan lebar 1.080 px, dan jika rasionya antara 1,91:1 dan 3:4 (tinggi 566-1.440 px), resolusi aslinya dipertahankan. 1.080 × 1.440 adalah ukuran tertinggi dalam rentang itu. Teks HEX di atas petak warna ditulis dengan huruf putih atau hitam, mana pun yang memberi rasio kontras WCAG 2.2 lebih besar di atas warna itu.

Kesalahan yang sering terjadi

• Pada foto produk berlatar putih, peringkat 1 Dominan menjadi putih: karena jika dipilih menurut luas, latarlah yang paling luas. Untuk melihat warna produknya, ganti ke "Cerah", atau potong foto agar berfokus pada produk sebelum diunggah.
• Warna aksen kecil di foto (payung merah, papan nama kuning) tidak muncul: Dominan memilih dari bidang luas, jadi warna kecil terdorong ke belakang. Ganti ke Cerah atau tambah jumlah warna, dan jika masih tidak ada, seret titik warna yang mirip ke posisi itu. Warna yang sangat kecil, di bawah 0,3% foto, tetap terdorong ke belakang bahkan pada Cerah.
• Warna sama tetapi persentasenya berbeda di tiap jenis: persentase adalah nilai yang bergantung pada warna lain yang dipilih bersamanya. Jangan membacanya sebagai luas tetap yang ditempati warna itu di foto.
• Warna foto ponsel sedikit berbeda dari aplikasi foto: ponsel terbaru sering memotret dengan ruang warna yang lebih lebar dari sRGB (misalnya Display P3), sedangkan kanvas browser secara bawaan memakai sRGB, sehingga warna dikonversi ke rentang itu saat dibaca. Untuk warna yang dipakai di web, nilai sRGB ini lebih dekat dengan warna yang benar-benar akan terlihat.
• Memakai warna dari layar apa adanya untuk cetak atau memilih cat: HEX adalah warna layar. Untuk warna cetak, ubah sesuai kondisi cetak dengan Konverter RGB ke CMYK, dan cocokkan cat atau kain dengan sampel fisiknya.
• Perlu kode yang tepat untuk satu titik: warna di alat ini adalah rata-rata petak, sehingga bisa berbeda dari nilai satu piksel. Untuk nilai tepat satu piksel pada logo, ambil dengan Pemilih Warna Gambar.

Keterbatasan dan hal yang perlu diperhatikan

• Warna diambil dari rata-rata petak dengan 256 petak pada sisi terpanjang. Warna garis yang lebih tipis dari satu petak atau huruf kecil akan bercampur dengan warna di sekitarnya.
• Kandidat maksimal 32 warna, sehingga warna pada bidang yang sangat sempit mungkin tidak masuk kandidat. Untuk warna seperti itu, seret titik dan pilih secara manual.
• Batas ketiga jenis (0,3%, saturasi 0,015-0,09) dan jarak penyaringan (ΔEOK 0,07 dan 0,035) adalah nilai yang ditetapkan alat ini. Alat palet lain memilih dengan cara berbeda, sehingga foto yang sama bisa menghasilkan warna berbeda.
• Foto dengan sisi terpanjang lebih dari 2.048 px diperkecil ke ukuran itu sebelum dibaca dan dipakai di kartu. Kartu yang disimpan paling besar 1.920 px, jadi pengaruhnya terhadap kualitas nyaris tidak ada.
• Pada PNG dengan bagian transparan, petak yang lebih dari separuhnya transparan tidak dihitung, dan di kartu gambar digambar di atas latar putih.
• Teks HEX pada kartu digambar dengan font monospace yang terpasang di perangkat (Menlo, Consolas, dan sebagainya), sehingga bentuk hurufnya bisa sedikit berbeda antar perangkat.

Nilai dalam tabel adalah hasil pembacaan foto contoh (1.440 × 958 px) dengan alat ini pada 2026-10-20. Jumlah petak, jumlah kandidat, jarak penyaringan, dan batas saturasi adalah aturan tetap alat ini dan bukan standar yang berubah tiap tahun. Pusat Bantuan Instagram yang menjadi dasar ukuran kartu dan CSS Color 4 (versi 2026-10-09) diperiksa pada 2026-10-20.

Sumber

• 01Heckbert, P. (1982). Color image quantization for frame buffer displayACM SIGGRAPH Computer Graphics 16(3), 297–307. median cut
• 02Lloyd, S. (1982). Least squares quantization in PCMIEEE Transactions on Information Theory 28(2), 129–137. Penyempurnaan k-means
• 03Björn Ottosson — A perceptual color space for image processing2020-12-23. Oklab (sRGB linear → LMS → akar pangkat tiga → Lab)
• 04W3C CSS Color Module Level 4 (CRD 2026-10-09)§9.5 C = √(a² + b²), H = atan2(b, a); §14.2.1 OkLCh 1 JND = 0,02; §20.3 ΔEOK = jarak Euclidean di Oklab
• 05WCAG 2.2 — contrast ratio, relative luminance(L1 + 0,05) ÷ (L2 + 0,05), pemilihan warna teks di atas petak warna
• 06Pusat Bantuan Instagram — Image resolution of photos you share on InstagramLebar 1.080 px; jika rasio 1,91:1 sampai 3:4 (tinggi 566-1.440 px), resolusi asli dipertahankan (diperiksa 2026-10-20)
• 07MDN — HTMLCanvasElement: getContext()Nilai bawaan colorSpace konteks 2d adalah "srgb"
• 08Wikimedia Commons — Sunset over beach (Unsplash).jpgCharlie Hang, CC0 1.0. Foto contoh (diperkecil menjadi 1.440 × 958)

Pertanyaan yang sering diajukan

Alat yang sering dipakai bersama