Ambil kode warna dari gambar (color picker)
Buka gambar lewat pemilih file, seret dan lepas, atau tempel dengan Ctrl + V, lalu klik atau ketuk titik yang Anda inginkan. Color picker menampilkan warna piksel tersebut dalam HEX, RGB dan HSL serta menemukan warna-warna utama gambar. Gambar Anda tidak pernah diunggah.
Cara menghitung
Gambar Anda tetap di perangkat Anda
Color picker ini berjalan sepenuhnya di browser: gambar didekode secara lokal dan digambar ke kanvas, lalu nilai warnanya dibaca langsung dari memori dengan getImageData(). Tidak ada unggahan dan tidak ada permintaan jaringan yang berisi data gambar; begitu halaman ditutup, gambar pun hilang. Hanya untuk foto HEIC yang tidak bisa dibuka sendiri oleh browser, sebuah dekoder dimuat sekali dari situs ini – foto Anda tetap lokal.
Cara ambil warna dari gambar
- Pilih gambar, seret ke dalam kotak, atau tempel dengan Ctrl + V (misalnya tangkapan layar).
- Klik atau ketuk titik yang diinginkan. Dengan keyboard, tombol panah menggeser penunjuk piksel demi piksel.
- Salin nilai HEX, RGB atau HSL. Delapan warna terakhir tetap tampil sebagai contoh warna.
Cara warna utama ditemukan
Untuk warna utama, gambar diperkecil hingga sisi terpanjangnya maksimal 200 piksel. Setiap piksel yang tidak transparan dimasukkan ke salah satu dari 4.096 kelompok warna (16 tingkat per kanal). Kelompok yang paling sering muncul dan cukup berbeda satu sama lain menjadi hingga enam warna utama; persentasenya adalah porsinya dari semua piksel yang tidak transparan. Ini kuantisasi sederhana – bagus untuk gambaran umum, tetapi bukan pengukuran warna.
Mengapa nilainya bisa berbeda dari aslinya
- Profil warna: browser mengonversi gambar yang memiliki profil tertanam (mis. Display P3 dari ponsel) ke sRGB. Color picker menampilkan nilai sRGB yang Anda pakai di CSS – aplikasi edit foto yang bekerja di P3 akan menampilkan angka lain.
- Kompresi: JPEG dan WebP menyimpan warna secara lossy, sehingga piksel bertetangga di area yang tampak “polos” bisa berbeda beberapa tingkat.
- Gambar sangat besar (lebih dari 4.096 piksel per sisi) diperkecil untuk dibaca, sehingga piksel bertetangga dirata-ratakan. Posisi yang ditampilkan mengacu pada gambar asli.
Contoh: mengklik merah murni menghasilkan #FF0000, RGB 255, 0, 0 dan HSL 0°, 100%, 50%. Selanjutnya Anda bisa mengubah formatnya dengan konverter warna, membuat kombinasi warna yang serasi dengan generator palet warna, dan memeriksa keterbacaan dengan pemeriksa kontras.
Pertanyaan umum
Apakah gambar saya diunggah atau disimpan?
Tidak. Gambar hanya diproses di memori browser Anda dan tidak dikirim ke mana pun. Tidak ada yang disimpan di penyimpanan browser (localStorage).
Bagaimana cara ambil kode warna dari gambar atau screenshot?
Buat tangkapan layar (di Windows: Win + Shift + S; di Mac: Cmd + Ctrl + Shift + 4 menyalinnya ke clipboard), klik halaman ini lalu tekan Ctrl + V (Cmd + V di Mac). Klik titik yang diinginkan dan kode HEX langsung muncul.
Apakah perlu aplikasi seperti Canva atau Ibis Paint?
Tidak. Color picker ini berjalan di browser, di komputer maupun ponsel, tanpa instalasi. Kode HEX yang Anda dapat bisa langsung ditempel di Canva, Word, Ibis Paint X atau aplikasi desain lain.
Format gambar apa saja yang didukung?
JPG, PNG, WebP, GIF, BMP dan AVIF, selama browser Anda bisa membukanya, ditambah foto HEIC dari iPhone. Untuk gambar transparan, opasitas piksel juga ditampilkan.
Apa beda HEX, RGB dan HSL?
Ketiganya menggambarkan warna yang sama: RGB sebagai merah, hijau dan biru dari 0 sampai 255, HEX sebagai nilai yang sama dalam heksadesimal (#FF0000 = 255, 0, 0), dan HSL sebagai rona, saturasi dan kecerahan.
Sumber dan dasar hukum
- MDN Web Docs – CanvasRenderingContext2D: getImageData()
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
Diperbarui:
Alat terkait
- Konversi warna: HEX, RGB, HSL, HSV, CMYKKonversi kode warna: HEX ke RGB, RGB ke HEX, HSL, HSV, HWB, dan CMYK. Masukkan warna dalam format apa pun atau pilih dari color picker, lalu salin hasilnya.
- Generator palet warnaBuat kombinasi warna serasi dari satu warna dasar: komplementer, analog, triadik, persegi, split-komplementer atau monokrom – lengkap dengan HEX, RGB dan HSL.
- Cek kontras warna (WCAG 2.2)Cek kontras warna teks dan latar belakang: rasio kontras WCAG 2.2 dengan penilaian AA/AAA untuk teks normal, teks besar dan komponen UI, plus saran warna.
- Kalender Cina – konversi tanggal Imlek dan shioKalender Cina online: ubah tanggal Masehi ke kalender Imlek dan sebaliknya, cari tahu shio dan elemen Anda, tahun Kongzili, serta tanggal Tahun Baru Imlek.
- Konversi Kalender Ibrani (Kalender Yahudi)Ubah tanggal Masehi ke kalender Ibrani (Yahudi) dan sebaliknya – dengan nama bulan, tahun kabisat (Adar I/II), dan tanggal Tahun Baru Yahudi Rosh Hashanah.
- Konversi kalender Persia (kalender Iran)Ubah tanggal Masehi ke kalender Persia (kalender Iran, Hijriah Syamsiah) dan sebaliknya – lengkap dengan nama bulan, tahun kabisat, dan tanggal Nowruz.