Tangkapan layar sering jadi satu-satunya yang Anda punya. Anda tak bisa membuka CSS situs, tak bisa menginspeksi aplikasi, tak punya file desainnya — tapi Anda bisa melihat warna di layar, dan tangkapan layar membekukannya menjadi gambar yang bisa Anda sampel. Berikut cara menarik kode warna persis dari salah satunya.
Mengapa tangkapan layar adalah sumber yang jujur
Saat Anda men-screenshot halaman atau aplikasi yang sudah dirender, Anda menangkap warna sebagaimana benar-benar terlihat — setelah setiap gradasi, lapisan, dan opasitas diterapkan. Itu sering lebih jujur ketimbang nilai sumbernya. Kartu yang didefinisikan sebagai #000000 pada opasitas 90% di atas latar abu-abu bukanlah hitam di layar; ia abu-abu gelap tertentu. Menginspeksi kode memberi Anda resepnya; menyampel tangkapan layar memberi Anda warna yang benar-benar dilihat pengguna. Saat Anda mencocokkan tampilan itu, tangkapan layar itulah yang Anda mau baca.
Ambil warna dalam tiga langkah
- Ambil dan muat tangkapan layarnya. Tangkap layar (atau region yang Anda pedulikan) dan jatuhkan gambarnya ke picker.
- Arahkan ke pikselnya. Sebuah lup pembesar mengikuti kursor Anda dan memperbesar area di bawahnya, jadi Anda bisa mendarat presisi — bahkan di batas tipis atau ikon kecil.
- Klik untuk menyimpan, lalu salin. Tiap klik menyimpan warna sebagai swatch dengan HEX, RGB, dan HSL-nya, masing-masing dengan tombol salin. Salin format yang Anda butuh dan tempelkan ke stylesheet atau alat desain Anda.
Hal khas tangkapan layar yang perlu diwaspadai
Tangkapan layar punya keunikan yang bisa membuat sampel warna meleset, dan mudah dihindari begitu Anda mengetahuinya:
- Simpan sebagai PNG, bukan JPEG. Kompresi JPEG mengaburkan warna sedikit, terutama dekat tepi dan di area datar, jadi nilai yang disampel bisa melenceng dari yang sebenarnya. PNG itu lossless dan menjaga tiap piksel persis — kebanyakan alat tangkapan layar OS sudah default ke PNG.
- Perhatikan tingkat zoom. Tangkapan layar yang diambil pada zoom browser atau OS selain 100% telah diskalakan, dan penskalaan mencampur piksel tetangga. Untuk sampel terbersih, tangkap pada 100%.
- Hindari tepi dan teks. Anti-aliasing berarti piksel di sepanjang tepi mana pun adalah campuran, bukan warna sebenarnya. Sampel dari tengah area solid — lup membantu Anda memastikan sudah jauh dari batas yang kabur.
- Waspadai warna teks subpiksel. Zoom ke teks yang dirender dan Anda akan melihat pinggiran warna yang bukan nilai sebenarnya teks. Ambil warna dari isian dan latar, bukan dari goresan huruf.
Membaca HEX, RGB, dan HSL
Setiap swatch menampilkan ketiga format sekaligus:
- HEX (
#3A7BD5) — default untuk CSS dan alat desain. - RGB (
rgb(58, 123, 213)) — nilai kanal, berguna saat Anda butuh transparansirgba. - HSL (
hsl(215, 65%, 53%)) — hue, saturasi, lightness, terbaik saat Anda ingin menyetel warna alih-alih menyalinnya persis.
Anda tak perlu menyampel ulang untuk beralih — warna yang sama sudah ada di ketiganya.
Ambil satu skema penuh dalam sekali jalan
Dari satu tangkapan layar Anda bisa membangun kembali skema warna penuh: klik warna header, tombol, tautan, latar, teks redup. Masing-masing menumpuk di daftar sehingga Anda bisa menarik set lengkap dalam satu sesi dan menyalinnya berurutan.
Kalau Anda malah menginginkan palet keseluruhan sebuah gambar diringkas untuk Anda — segelintir nada dominan — itu tugas terpisah, dan alat palet img.diy mengekstraknya otomatis. Picker ini untuk menunjuk piksel tertentu dalam tangkapan layar; alat palet untuk mencirikan gambar secara keseluruhan.
Tidak ada yang meninggalkan mesin Anda
Tangkapan layar sering berisi hal yang lebih Anda pilih untuk tidak unggah — dashboard internal, draf privat, UI klien yang belum dirilis. Di sini gambar dibaca secara lokal di browser Anda dari sebuah canvas: tak ada yang dikirim ke mana pun, tak ada akun, dan bekerja offline setelah muatan pertama. Anda dapat warnanya tanpa tangkapan layar itu pernah meninggalkan perangkat Anda.
Ambil tangkapan layarnya, arahkan ke pikselnya, klik, dan salin.