Pengekstrak Palet Warna Gratis

Cara Kerja Ekstraksi Warna

Palet yang diekstrak oleh komputer dari gambar berasal dari salah satu dari dua algoritma klasik:

• K-means clustering (Lloyd 1982; ide dasarnya kembali ke MacQueen 1967 dan Forgy 1965). Pilih K centroid warna acak dalam kubus warna, tetapkan setiap piksel ke centroid terdekatnya, hitung ulang centroid sebagai rata-rata piksel yang ditetapkan, dan ulangi hingga centroid berhenti bergerak. K centroid akhir adalah warna dominan Anda.
• Median-cut quantisation (Heckbert, SIGGRAPH 1982). Bagi kubus warna secara rekursif sepanjang dimensi terlebar, membagi populasi piksel menjadi dua bagian yang sama setiap kali. Setelah K pembagian Anda mendapatkan K kotak, dan warna rata-rata dari setiap kotak adalah satu entri palet. Ini adalah algoritma yang digunakan oleh pustaka JavaScript Color Thief yang populer, dan secara historis bagaimana gambar indexed-colour (palet GIF, PNG) dikurangi dari jutaan warna menjadi 256.

Kedua metode menghasilkan kumpulan kecil warna representatif dari populasi piksel yang jauh lebih besar, tetapi keduanya membuat trade-off yang berbeda. K-means lebih fleksibel tetapi sensitif terhadap seed acak dan outlier. Median-cut bersifat deterministik dan menyeimbangkan cakupan ruang warna tetapi dapat terlalu mewakili wilayah sempit di mana gambar menghabiskan banyak piksel.

Mengapa Jarak RGB Menipu

Peringatan yang halus namun penting: clustering dalam ruang RGB biasa memberikan hasil yang tidak selalu sesuai dengan persepsi manusia. RGB adalah sistem koordinat berbasis perangkat keras, jarak di dalamnya sesuai dengan perbedaan elektronik antara warna primer, bukan perbedaan yang dipersepsikan antara warna. Dua warna hijau yang terlihat identik bagi Anda dapat memiliki jarak RGB yang jauh lebih besar daripada hijau dan merah yang jelas-jelas terlihat berbeda.

Clustering yang lebih akurat terjadi dalam CIELAB (CIE 1976 L*a*b*), ruang warna yang dirancang khusus agar jarak Euclidean di dalamnya mendekati perbedaan yang dipersepsikan manusia antara dua warna. Alat palet modern seperti Adobe Color dan banyak generator swatch sistem desain melakukan clustering di CIELAB atau CIELCH. CSS Color Module Level 4 (W3C, 2022) menambahkan fungsi lab(), lch(), oklab(), dan oklch() untuk mengekspos ruang ini langsung kepada desainer web, berguna saat Anda menginginkan interpolasi palet yang seragam secara perseptual. Spesifikasi CSS ada di w3.org/TR/css-color-4.

HEX, RGB, HSL, Memilih Format yang Tepat

Ketiga notasi mendeskripsikan warna yang sama; itu hanyalah cara berbeda untuk menuliskannya.

• HEX: #RRGGBB. Enam digit hex, dua per channel, rentang 00-FF (0-255). Format paling umum di web. Ringkas, dapat dicopy-paste, didukung di mana saja.
• RGB: rgb(255, 128, 0). Angka yang sama, notasi berbeda. CSS menambahkan rgba(255, 128, 0, 0.5) untuk alpha.
• HSL: hsl(30, 100%, 50%). Hue (0-360°), saturasi (0-100%), lightness (0-100%). Lebih mudah dipahami bagi desainer, «hue yang sama, saturasi lebih tinggi» adalah penyesuaian satu angka di HSL tetapi penyesuaian multi-channel di RGB.
• OKLCH: oklch(70% 0.15 30). Alternatif modern dan seragam secara perseptual untuk HSL. Angka lightness yang sama berarti kecerahan yang dipersepsikan sama di semua hue, yang secara terkenal salah pada HSL (kuning pada lightness 50% terlihat jauh lebih terang dari biru pada lightness 50%).

Untuk sebagian besar pekerjaan web, salin HEX. Untuk manipulasi palet secara programatik (perjelas 10%, geser hue sebanyak 30°), gunakan HSL atau OKLCH di mana operasinya lebih bersih.

Mengapa Dominan ≠ Berguna

Ekstraksi «warna paling sering» yang naif sering mengecewakan. Potret seseorang di depan langit biru secara statistik didominasi oleh piksel langit dan warna kulit, meskipun cerita warna yang menarik secara visual mungkin ada pada pakaian subjek. Foto dengan latar belakang netral yang besar mendapatkan warna netral sebagai warna «dominan». Kompresi JPEG yang berat memperkenalkan warna artefak yang berkerumun seolah-olah itu nyata.

Alat palet yang canggih menimbang berdasarkan saturasi, kontras terhadap latar belakang dominan, «keistimewaan» yang dipersepsikan, atau apakah suatu warna muncul di wilayah yang menonjol yang terdeteksi oleh model saliency Itti-Koch yang terinspirasi penglihatan manusia. Sebagian besar alat online, termasuk yang ini, menggunakan clustering berbasis frekuensi sederhana, cepat, dapat diprediksi, dan cukup baik untuk kasus umum mengekstrak palet dari foto, ilustrasi, atau karya seni.

Kasus Penggunaan Umum

• Brand-matching: desainer mengekstrak palet dari logo klien atau foto hero untuk menjaga keselarasan visual situs lainnya.
• Mood board: mengekstrak palet dari gambar inspirasi (potongan film, foto, lukisan) adalah cara tercepat untuk memulai eksplorasi warna.
• Konfigurasi Tailwind / design-token: mengubah palet yang diekstrak menjadi properti kustom CSS atau peta colors Tailwind.
• Pencocokan warna slide deck: memilih warna aksen dari logo perusahaan agar deck tidak bentrok.
• Fotografi produk e-commerce: menggunakan warna dominan setiap produk sebagai swatch di kartu produk.
• Generative art & visualisasi data: mengumpan palet yang diekstrak ke kode shader, grafik D3, atau sketsa Processing.
• Desain cetak: mendapatkan kumpulan warna awal dari gambar inspirasi, kemudian mencocokkannya ke Pantone atau CMYK dalam perangkat lunak desain cetak.

Mengapa Browser-Only Penting di Sini

Foto sering membawa lebih dari sekadar gambar. Metadata EXIF dapat menyertakan koordinat GPS tempat foto diambil, nomor seri kamera, nama fotografer, dan sidik jari perangkat lunak. Screenshot dapat mengandung UI rahasia, teks draf, atau branding pra-rilis. Foto pribadi dapat mengandung wajah orang yang belum menyetujui untuk diunggah ke suatu tempat. Mengekstrak palet sebenarnya tidak memerlukan semua itu (hanya perlu data piksel) dan tidak ada alasan yang baik untuk mengirim seluruh gambar ke server ketika browser dapat menganalisisnya secara lokal.

Alat ini menggambar gambar ke Canvas off-screen, mengambil sampel data piksel melalui getImageData(), menjalankan clustering, dan menampilkan hasilnya. Tidak ada yang meninggalkan halaman; gambar tidak disimpan setelah tab ditutup. Alat palet sisi server (Adobe Color, pemilih gambar Coolors, dan banyak lainnya) mengunggah seluruh file. Privasi adalah trade-off yang Anda buat dengan masing-masing.

Bekerja Dengan Output

Setelah Anda memiliki palet yang diekstrak, Anda biasanya:

1. Kurasi. Ekstraksi otomatis 5 warna biasanya memiliki 3 warna yang berguna, 1 near-duplicate yang redundan, dan 1 mid-tone keruh. Hapus yang keruh dan de-duplikasi.
2. Tetapkan peran. Tentukan satu warna sebagai warna brand utama, satu sebagai sekunder, satu atau dua sebagai aksen, dan satu sebagai netral. Sistem brand modern sering menginginkan latar belakang netral, dua jangkar, dan satu aksen, maksimal lima.
3. Buat skala terang/gelap. Dari setiap warna jangkar, turunkan 9-11 shade untuk status hover, latar belakang, dan varian yang diberi warna. Alat seperti generator skala warna Tailwind atau bagian palet Refactoring UI memiliki resep yang sudah dikenal.
4. Uji kontras. Jalankan pasangan teks-dan-latar melalui pemeriksa kontras WCAG, Level AA memerlukan 4,5:1 untuk teks isi normal, 3:1 untuk komponen UI besar atau tebal.
5. Uji untuk defisiensi penglihatan warna. Sekitar 1 dari 12 pria memiliki bentuk buta warna. Jalankan palet melalui simulator CVD sebelum menguncinya.

Kesalahan Umum

1. Menggunakan semua lima warna yang diekstrak tanpa diedit sebagai palet brand Anda. Ekstraksi otomatis adalah titik awal, bukan palet yang sudah jadi. Kurasi.
2. Memilih warna dari JPEG yang sangat terkompresi. Artefak kompresi menghasilkan entri palet palsu. Mulailah dari sumber berkualitas tinggi jika bisa.
3. Mempercayai hasil pertama pada foto yang kompleks. Nilai K yang berbeda (jumlah warna) menghasilkan hasil yang sangat berbeda, coba 5, 8, dan 12 untuk melihat ukuran mana yang terasa tepat untuk gambar Anda.
4. Membangun palet dari foto tanpa mempertimbangkan halaman tempatnya akan ditampilkan. Palet yang bersumber dari foto yang redup bisa terlihat bagus secara terisolasi tetapi menghilang di atas latar belakang situs yang putih. Uji dalam konteksnya.
5. Mengabaikan kontras. Palet yang indah kadang-kadang memasangkan teks dengan latar belakang pada kontras 2:1 dan gagal WCAG. Selalu periksa.
6. Melupakan bahwa «dominan» bisa berarti «latar belakang». Warna yang paling sering muncul dalam sebuah potret sering kali adalah dinding di belakang subjek, bukan pakaian subjek.

Pertanyaan yang Lebih Sering Diajukan

Apakah ini akan bekerja pada PNG transparan?

Ya. Piksel transparan biasanya dilewati selama pengambilan sampel sehingga palet hanya mencerminkan konten yang terlihat. Jika Anda mengunggah PNG dengan latar belakang transparan dan logo berwarna, palet yang diekstrak akan menjadi warna logo, bukan netral yang tercampur.

Bagaimana dengan GIF animasi?

Decoder gambar browser biasanya memberikan frame pertama ke Canvas API, sehingga palet diekstrak dari frame nol. Untuk palet yang mencakup semua frame, Anda perlu mengekstrak setiap frame secara terpisah dan menggabungkan hasilnya, itu di luar kemampuan alat gambar statis.

Apakah gambar asli diunggah ke mana pun?

Tidak. Gambar dimuat ke dalam elemen Canvas di browser Anda, data piksel dibaca melalui getImageData(), dan clustering berjalan di JavaScript di perangkat Anda. Byte gambar tidak pernah dikirimkan ke server mana pun. Ini penting ketika sumbernya mengandung GPS EXIF, wajah, screenshot UI rahasia, atau gambar produk yang belum dirilis.

Mengapa palet saya berubah antara satu run ke run berikutnya?

K-means bergantung pada penempatan centroid acak awal, sehingga dua run pada gambar yang sama dapat menghasilkan minimum lokal yang sedikit berbeda. Perbedaannya biasanya halus (satu near-duplicate digantikan dengan shade serupa) tetapi terlihat. Median-cut bersifat deterministik, input yang sama, output yang sama setiap saat. Jika alat pernah memberikan palet yang berbeda secara terlihat untuk gambar yang sama, itu menggunakan algoritma teracak dan itu adalah perilaku yang diharapkan.

Bisakah saya menggunakan warna yang diekstrak secara komersial?

Warna itu sendiri tidak dilindungi hak cipta; nilai HEX adalah fakta tentang piksel. Tetapi gambar yang Anda ekstrak mungkin dilindungi, mengekstrak palet dari foto orang lain adalah hal yang wajar untuk inspirasi, tetapi mereproduksi foto atau elemen bermerek dagangnya adalah pertanyaan yang berbeda. Cocokkan warnanya, bukan citranya.

Apa bedanya ini dengan alat color picker?

Color picker membaca warna pada lokasi piksel tertentu yang Anda tunjuk. Alat ini menganalisis seluruh gambar dan mengembalikan palet yang paling representatif. Pekerjaan yang berbeda: picker untuk «apa warna pasti ini?», ekstraktor palet untuk «apa warna dominan secara keseluruhan?». Keduanya memiliki tempat dalam alur kerja desainer.