Anda punya gambar dan butuh satu angka darinya: kode hex sebuah warna tertentu. Mungkin itu logo yang spesifikasi mereknya sudah lama hilang, tangkapan layar situs yang birunya ingin Anda cocokkan, atau foto dengan nuansa yang ingin Anda pakai ulang. Mengetik apa yang Anda kira warnanya tidak berhasil — mata Anda tak bisa membaca #3A7BD5 dari layar, dan warna yang tampak benar biasanya meleset beberapa digit. Berikut cara membaca nilai sebenarnya langsung dari piksel.
Mengapa menebak tak pernah benar-benar berhasil
Satu "biru" di layar sebenarnya adalah sebaran biru yang nyaris identik, dan kecerahan serta kalibrasi monitor Anda menggesernya lebih jauh. Pilih dengan mata dan Anda mendarat dekat tetapi salah — cukup dekat sehingga ketidakcocokannya menyebalkan tetapi tak jelas, jadi Anda membuang sepuluh menit bertanya-tanya mengapa tombol tak cocok dengan header. Solusinya adalah berhenti menebak dan membaca angka yang sebenarnya disimpan piksel.
Dapatkan kodenya dalam tiga langkah
Cara andal adalah mengambil sampel piksel langsung dengan pemilih warna.
- Muat gambar. Jatuhkan logo, tangkapan layar, atau foto yang Anda tarik warnanya.
- Arahkan ke piksel persis. Lup pembesar mengikuti kursor Anda dan memperbesar area di bawahnya, jadi pada tepi tajam Anda bisa melihat piksel mana yang merupakan warna merek datar dan mana yang perpaduan anti-alias dari dua warna.
- Klik untuk menyimpan, lalu salin. Setiap klik menyimpan warna sebagai swatch yang menampilkan HEX, RGB, dan HSL-nya, masing-masing dengan tombol salinnya sendiri. Klik HEX dan ia ada di clipboard Anda.
Mendarat pada piksel yang tepat
Lup itu lebih penting daripada kedengarannya. Di tempat sebuah warna bertemu warna lain — huruf terhadap latar, tepi ikon — piksel di antaranya bersifat anti-alias: perpaduan yang dihaluskan dari dua warna, bukan salah satunya. Ambil sampel di sana dan Anda mendapat nilai keruh yang cocok dengan tak satu pun. Bidik area datar beberapa piksel di dalam bentuk, di mana warnanya solid, dan tampilan yang diperbesar membiarkan Anda memastikan Anda tepat di atasnya sebelum mengeklik.
Pada logo bersih atau UI datar ini mudah — warnanya seragam di area luas. Pada foto butuh lebih hati-hati, karena butiran dan kompresi berarti piksel bertetangga sungguh berbeda. Ambil dari area yang tenang dan tersinari rata dan ambil beberapa sampel untuk memeriksa mereka sepakat.
HEX, RGB, atau HSL — ambil yang cocok
Setiap swatch memberi Anda ketiganya sekaligus, jadi Anda menyalin mana pun yang diinginkan tujuan Anda:
- HEX (
#3A7BD5) — default web. CSS, Figma, Canva, dokumen merek. Salin ini kecuali Anda punya alasan untuk tidak. - RGB (
rgb(58, 123, 213)) — nilai saluran, berguna ketika sebuah alat memintanya atau Anda butuh transparansi lewatrgba. - HSL (
hsl(215, 65%, 53%)) — hue, saturasi, lightness. Terbaik ketika Anda ingin menyesuaikan warna: mencerahkannya untuk keadaan hover, meredamnya untuk varian, atau membangun skala darinya.
Karena setiap swatch membawa ketiganya, Anda tak pernah mengambil sampel ulang cuma untuk mengganti format.
Mengambil beberapa warna sekaligus
Sebuah logo jarang satu warna. Klik primer, aksen, dan warna teks dalam satu proses — masing-masing menumpuk di daftar sehingga Anda bisa membandingkannya dan menyalinnya satu demi satu, alih-alih memuat gambar tiga kali terpisah.
Jika Anda menginginkan ringkasan warna dari seluruh gambar alih-alih piksel tertentu — palet keseluruhan yang membangun sebuah foto — itu pekerjaan berbeda, dan alat palet terpisah img.diy mengekstrak warna dominan secara otomatis untuk Anda. Pakai pemilih ini ketika Anda tahu titik persis yang Anda inginkan; pakai alat palet ketika Anda ingin gambar dikarakterisasi untuk Anda.
Ia tetap di perangkat Anda
Gambar dibaca secara lokal di browser Anda dari sebuah kanvas — tak ada yang diunggah, tak ada pendaftaran, dan setelah pemuatan pertama ia berfungsi offline. Jadi mockup yang belum dirilis atau aset pribadi klien tak pernah keluar dari mesin Anda hanya karena Anda butuh satu kode hex darinya.
Muat gambar, arahkan ke piksel, klik, dan salin kodenya.