Bagaimana cara mendapatkan kode HEX dari warna di dalam gambar?

Unggah gambar, lalu gerakkan penunjuk di atasnya atau klik piksel yang diinginkan — kaca pembesar akan membantu Anda membidik piksel yang tepat. Kode HEX (seperti #4f46e5) akan langsung muncul, dan satu klik saja sudah cukup untuk menyalinnya.

Apa itu kode warna HEX?

Kode HEX menuliskan warna sebagai tanda # diikuti oleh enam digit heksadesimal — masing-masing dua digit untuk warna merah, hijau, dan biru, seperti pada #4f46e5. Ini adalah format yang umum digunakan pada CSS, HTML, dan sebagian besar alat desain.

Apakah saya juga bisa mendapatkan format RGB dan HSL, bukan hanya HEX?

Ya — setiap piksel yang Anda pilih akan menampilkan nilai RGB dan HSL di samping kode HEX, dan masing-masing dapat disalin hanya dengan sekali klik.

Ambil Warna HEX dari Gambar — Color Code Picker

Perbedaan Utama Halaman Ini

Halaman “Hex Color from Image” dirancang secara khusus untuk menghasilkan representasi warna heksadesimal enam digit (misalnya #1E90FF) dari setiap piksel dalam gambar. Berbeda dengan halaman saudara yang menampilkan notasi RGB fungsional (rgb(255, 0, 0)) atau HSL (hsl(120, 100%, 50%)), halaman ini menjadikan kode HEX sebagai keluaran utama. Format heksadesimal adalah standar de facto untuk CSS dan perangkat lunak desain karena tidak memerlukan tanda kurung atau sintaks tambahan—cukup salin dan tempel langsung ke properti seperti color, background-color, atau border-color.

Satu poin kritis: format HEX enam digit tidak membawa saluran alfa (transparency). Jika piksel yang disampling bersifat semi-transparan, informasi tersebut dilaporkan secara terpisah sebagai persentase, misalnya “Alpha 45% — this pixel is partly transparent.” Dengan demikian, halaman ini menjadi pilihan utama ketika Anda membutuhkan nilai warna yang siap pakai untuk web tanpa perlu menyertakan parameter opacity.

Yang membedakan juga adalah ketiadaan saluran alfa dalam kode HEX itu sendiri. Sebagai gantinya, alat ini secara eksplisit menampilkan tingkat transparansi piksel dalam bentuk teks, sehingga pengguna tetap mendapatkan informasi lengkap tanpa mengorbankan kemurnian format heksadesimal. Pendekatan ini mengatasi kekurangan umum pada alat sampling warna lain yang sering mengabaikan atau menyembunyikan komponen alfa.

Cara Mengambil Sampel Warna dari Gambar

Proses dimulai dengan mengunggah gambar dari perangkat Anda. Format yang didukung meliputi PNG, JPG, WebP, GIF, AVIF, dan HEIC. Tipe MIME yang diterima adalah image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, dan image/heif. Begitu gambar termuat, alat secara otomatis menampilkan warna piksel di titik tengah gambar beserta koordinat (x, y) dan dimensi (lebar × tinggi). Ini memberi Anda titik awal langsung tanpa perlu menggerakkan kursor.

Untuk memeriksa piksel lain, cukup gerakkan pointer di atas gambar. Alat menyediakan tampilan pembesar (magnified view) yang membantu Anda mengarahkan ke piksel yang tepat—sangat berguna pada area dengan gradasi halus atau tepi anti-aliasing. Saat pointer bergerak, nilai HEX, RGB, dan HSL diperbarui secara real-time. Untuk menyimpan warna, klik pada gambar, dan kode HEX yang disampling akan ditambahkan ke riwayat (picks) di samping. Riwayat ini dapat menampung hingga 12 warna.

Jika Anda lebih suka navigasi keyboard, gunakan tombol panah untuk menggerakkan crosshair piksel per piksel. Tekan Shift bersamaan dengan tombol panah untuk melompat 10 piksek sekaligus. Tekan Enter atau Space untuk menyimpan warna yang sedang disampling. Fitur ini penting bagi pengguna yang membutuhkan presisi atau memiliki keterbatasan dalam menggunakan mouse.

Setelah menyimpan, muncul pesan “Saved ‹hex› to your picks.” Anda dapat mengklik swatch warna di riwayat untuk memuat kembali warna tersebut atau mengklik nilai HEX, RGB, atau HSL untuk menyalinnya ke papan klip. Apabila peramban memblokir akses papan klip, akan muncul peringatan “Could not copy — your browser blocked clipboard access.”

Memahami Tiga Representasi Warna: HEX, RGB, dan HSL

Alat ini menampilkan warna dalam tiga model berbeda secara bersamaan. Berikut penjelasan masing-masing:

HEX – Kode heksadesimal enam digit (contoh: #1E90FF). Setiap pasangan digit mewakili intensitas merah, hijau, dan biru dalam rentang 00–FF (0–255 desimal). Format ini paling ringkas dan langsung dikenali oleh CSS tanpa perlu fungsi atau tanda kurung. Tidak ada saluran alfa di sini, sehingga jika piksel semi-transparan, Anda hanya akan melihat nilai RGB asli tanpa memperhitungkan latar belakang—transparansi dilaporkan terpisah.
RGB – Tiga angka desimal (0–255) untuk merah, hijau, dan biru, misalnya rgb(30, 144, 255). Ini adalah representasi paling langsung dari data piksel yang disimpan dalam file gambar. Perlu diingat bahwa untuk gambar JPEG atau tangkapan layar, nilai ini mungkin telah diubah oleh kompresi atau anti-aliasing.
HSL – Hue (0°–360°), Saturation (0%–100%), Lightness (0%–100%). Model ini lebih intuitif bagi manusia karena memisahkan corak warna dari kecerahan dan kejenuhan. Namun, HSL dihitung dari nilai RGB yang sudah ada, bukan data mentah piksel.

Keunggulan halaman ini adalah menampilkan tiga model sekaligus, memungkinkan Anda memilih format yang paling sesuai dengan kebutuhan—apakah untuk CSS (HEX), perangkat lunak desain (RGB), atau analisis warna (HSL).

Aturan Batas dan Penanganan Kasus Khusus

Beberapa situasi perlu dipahami agar ekspektasi penggunaan sesuai dengan perilaku alat:

Gambar terlalu besar – Jika panjang sisi terbesar melebihi 4096 piksel, gambar akan diskalakan secara proporsional. Ini mencegah masalah performa dan memori, tetapi perlu diingat bahwa sampling dilakukan pada versi yang sudah diperkecil, bukan gambar asli.
Piksel semi-transparan – Alat membaca nilai piksel apa adanya tanpa mempertimbangkan latar belakang. Jika piksel memiliki saluran alfa kurang dari 255 (atau 100%), akan muncul teks “Alpha ‹n›% — this pixel is partly transparent.” Dua warna dengan nilai RGB identik namun alfa berbeda disimpan sebagai entri terpisah dalam riwayat.
Format file tidak didukung – Jika Anda menjatuhkan file dengan tipe yang tidak dikenali, pesan “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” akan muncul.
Gambar rusak – Jika file tidak dapat dibuka, ditampilkan pesan “That image could not be opened. It may be corrupted or in an unsupported format.”
Riwayat warna – Maksimal 12 warna dapat disimpan. Jika Anda mencoba menyimpan lebih dari itu, warna baru akan menggantikan warna tertua (kebijakan FIFO). Riwayat dapat dikosongkan kapan saja dengan tombol “Start over”.
Pengaruh kompresi – Untuk gambar JPEG atau tangkapan layar, kompresi lossy dan anti-aliasing dapat mengubah nilai piksel secara halus. Dua piksel yang tampak seragam secara visual mungkin memiliki kode HEX yang sedikit berbeda. Inilah mengapa tampilan pembesar sangat penting untuk memastikan Anda memilih piksel yang benar-benar diinginkan.

Siapa Target Pengguna Alat Ini?

Alat ini dirancang untuk berbagai kalangan yang membutuhkan ekstraksi warna presisi dari gambar:

Desainer UI/UX – Saat mendesain antarmuka, seringkali perlu mencocokkan warna tertentu dari gambar referensi, logo, atau tangkapan layar. Kode HEX langsung dapat digunakan di Figma, Sketch, atau Adobe XD.
Pengembang front-end – Untuk menulis CSS yang tepat, nilai HEX seperti #1E90FF adalah standar. Alat ini menghemat waktu karena tidak perlu mengonversi dari RGB ke HEX secara manual.
Pembuat konten – Baik untuk palet merek, thumbnail YouTube, atau grafis media sosial, mengambil warna tepat dari foto atau ilustrasi membantu menjaga konsistensi visual.
Siapa pun yang perlu menyalin warna dari gambar – Misalnya, dari hasil pindaian logo perusahaan yang hanya tersedia dalam format gambar.

Pertanyaan Umum (FAQ)

Mengapa kode HEX tidak menampilkan saluran alfa?
Format HEX enam digit (seperti #FF5733) tidak memiliki ruang untuk informasi transparansi. Standar CSS mendukung notasi delapan digit (#RRGGBBAA), tetapi alat ini memilih enam digit karena lebih universal dan kompatibel dengan sebagian besar perangkat lunak. Transparansi dilaporkan secara terpisah dalam bentuk persentase.

Apa yang terjadi jika saya mengunggah gambar berukuran sangat besar?
Alat secara otomatis memperkecil gambar jika panjang sisi terbesar melebihi 4096 piksel. Sampling dilakukan pada versi yang sudah diskalakan, sehingga warna yang diambil mungkin sedikit berbeda dari piksel asli pada resolusi penuh. Untuk hasil terbaik, gunakan gambar dengan dimensi di bawah batas tersebut.

Bagaimana cara menggunakan keyboard untuk memilih warna?
Gunakan tombol panah (←, →, ↑, ↓) untuk menggerakkan crosshair satu piksel. Tahan Shift sambil menekan panah untuk gerakan 10 piksel. Tekan Enter atau Space untuk menyimpan warna saat ini. Metode ini memberikan presisi lebih dibandingkan mouse, terutama pada area kecil.

Apakah saya bisa menyimpan lebih dari 12 warna?
Tidak. Riwayat warna dibatasi hingga 12 entri. Jika Anda perlu mengumpulkan lebih banyak warna, catat secara manual sebelum menambahkan warna baru, atau gunakan tombol “Start over” untuk memulai ulang. Setiap warna dengan nilai RGB identik namun alfa berbeda dianggap entri terpisah dan tetap diperhitungkan dalam kuota 12.

Mengapa dua piksel yang tampak sama memiliki kode HEX berbeda?
Kemungkinan penyebabnya adalah kompresi JPEG atau anti-aliasing. Gambar JPEG menggunakan kompresi lossy yang mengubah nilai warna sedikit demi mengurangi ukuran file. Anti-aliasing pada tepi objek juga mencampur warna latar dengan warna objek, menghasilkan gradasi halus. Tampilan pembesar membantu Anda memilih piksel yang paling representatif.

Apa yang harus dilakukan jika browser memblokir akses papan klip?
Beberapa browser memblokir navigator.clipboard.writeText() karena kebijakan keamanan, terutama saat halaman tidak dalam konteks aman (HTTPS). Jika muncul pesan “Could not copy — your browser blocked clipboard access.”, Anda dapat menyalin nilai secara manual dengan memilih teks dan menekan Ctrl+C (Cmd+C di Mac). Untuk kenyamanan lebih, buka halaman melalui koneksi HTTPS.

Apakah alat ini mempertimbangkan latar belakang piksel semi-transparan?
Tidak. Alat hanya membaca nilai piksel sebagaimana tersimpan dalam file gambar. Jika piksel memiliki alfa 50%, alat menampilkan warna RGB murni tanpa mengomposisikannya dengan latar belakang. Informasi transparansi disediakan secara terpisah agar Anda tetap menyadari bahwa piksel tersebut tidak sepenuhnya buram.

Tanya Jawab