Alat pipet presisi piksel untuk memilih warna dari elemen apa pun.
Mengambil nilai warna yang tepat dari sebuah halaman web adalah tugas yang umum dilakukan — mencocokkan warna brand, merujuk sebuah desain, atau mengecek warna yang dipakai di situs kompetitor. DevTools browser menampilkan warna di panel Styles, tetapi hanya untuk elemen dengan properti warna CSS yang eksplisit — tidak untuk gambar, gradien, atau warna yang diwarisi (inherited).
Color Picker eyedropper bekerja di tingkat piksel — alat ini membaca warna hasil render sebenarnya dari piksel apa pun yang berada di bawah kursor Anda, apa pun cara warna itu terbentuk. Klik pada langit biru dalam gambar hero, titik tengah gradien, atau overlay semi-transparan, dan dapatkan nilai warna komposit yang tepat. Ketiga format output (HEX, RGB, HSL) ditampilkan sekaligus — klik format mana pun untuk menyalinnya. Beberapa pilihan warna terakhir Anda disimpan di strip riwayat warna di bagian bawah.
Transparansi alpha tetap dipertahankan pada output — mengambil warna dari overlay semi-transparan memberi Anda nilai rgba() atau hsla() dengan channel alpha yang benar, bukan sekadar RGB yang sudah diratakan (flattened) seperti yang didapat dari alat screenshot. Di macOS dan Windows, color picker ini bisa memakai kemampuan eyedropper native browser jika tersedia, memungkinkan Anda mengambil sampel warna dari mana saja di layar, bahkan di luar jendela browser sepenuhnya — berguna saat mencocokkan warna dari file desain yang terbuka di aplikasi lain.
Pratinjau melingkar yang diperbesar menampilkan piksel yang di-zoom di sekitar kursor Anda, dengan bidikan crosshair untuk pemilihan piksel yang tepat. Pilih warna dari teks, latar belakang, gambar, gradien, SVG, atau piksel apa pun yang terlihat pada halaman.
Setiap warna yang dipilih ditampilkan dalam tiga format sekaligus: HEX (#7c3aed), RGB (rgb(124, 58, 237)), dan HSL (hsl(262, 83%, 58%)). Tidak perlu beralih atau mengonversi — semua format tersedia seketika.
Klik baris format apa pun (HEX, RGB, atau HSL) untuk menyalin nilai spesifik tersebut ke clipboard Anda secara instan. Animasi singkat "Tersalin!" mengonfirmasi tindakan tersebut. Tempelkan langsung ke CSS, alat desain, atau spesifikasi warna Anda.
Warna-warna yang baru saja Anda pilih disimpan dalam strip riwayat visual yang menampilkan swatch warna. Klik swatch mana pun untuk memilih kembali warna tersebut dan melihat nilainya lagi. Riwayat tetap tersimpan selama sesi Anda.
Warna yang dipilih ditampilkan sebagai swatch besar di atas nilai format, memudahkan Anda untuk melihat dan memverifikasi warna tersebut. Swatch ini cukup besar untuk menunjukkan nuansa halus yang mungkin terlihat identik pada ukuran yang lebih kecil.
Pilih warna dari piksel apa pun yang terlihat: warna CSS, gradien CSS, gambar (PNG, JPG, SVG), elemen canvas, bingkai video, overlay semi-transparan, bahkan iframe. Jika Anda bisa melihatnya, Anda bisa mengambil warnanya.
Ambil warna brand yang tepat dari situs web perusahaan untuk memastikan desain atau konten Anda menggunakan nuansa yang benar. Dapatkan nilai HEX yang presisi alih-alih hanya mengira-ngira.
Pilih warna langsung dari gambar hero, foto produk, atau ilustrasi. Ekstrak warna dominan dari foto untuk digunakan sebagai latar belakang pelengkap dalam desain Anda.
Spesifikasi desain menyatakan tombol harus berwarna #7c3aed. Ambil warna dari tombol yang diimplementasikan untuk memverifikasi kecocokannya. Temukan perbedaan warna halus yang tidak terlihat oleh mata telanjang.
Jelajahi situs inspirasi desain dan ambil warna yang menarik perhatian Anda. Strip riwayat akan membangun palet warna yang telah Anda pilih selama sesi — gunakan sebagai titik awal untuk skema warna Anda sendiri.
Pilih warna di berbagai titik sepanjang gradien CSS untuk melihat warna tepat di setiap posisi. Berguna untuk mereplikasi gradien atau memahami bagaimana titik henti (stops) gradien berbaur.
Buka dok mengambang DevSuite Pro dan klik ikon Pemilih Warna. Kursor akan berubah menjadi pipet (eyedropper) dengan lingkaran pratinjau yang diperbesar.
Gerakkan kursor Anda di atas halaman. Pratinjau yang diperbesar menampilkan pandangan zoom dari piksel di sekitar kursor, dengan crosshair yang menunjukkan piksel target yang tepat.
Klik di mana saja pada halaman untuk mengambil warna pada piksel tersebut. Swatch warna serta nilai HEX, RGB, dan HSL semuanya akan diperbarui secara instan.
Klik baris HEX, RGB, atau HSL untuk menyalin nilai tersebut ke clipboard Anda. Konfirmasi "Tersalin!" akan muncul sebentar.
Lanjutkan mengeklik untuk memilih lebih banyak warna. Setiap pilihan ditambahkan ke strip riwayat. Klik swatch riwayat mana pun untuk memanggil kembali warna tersebut.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
