Warna memainkan peran penting dalam menyampaikan informasi secara non-verbal. Situs web dengan warna interaktif dianggap menarik dan menarik secara visual. Ada berbagai metode untuk menerapkan warna pada elemen HTML: RGB, RGBA, Kode HEX, HSLA, dan HSL. Namun, Anda dapat menemukan kode warna dengan memeriksa halaman, memilih warna dari color picker, atau menggunakan fitur eye dropper dari panel Developers Tool.
Dalam penelitian ini, kita akan membahas metode untuk menemukan kode warna pada HTML
Metode 1: Temukan Kode Warna dalam HTML Dengan Memeriksa Halaman Web
Berikut adalah langkah-langkah untuk menemukan kode warna dengan memeriksa halaman.
Langkah1: Buka Halaman Web
Pertama, buka halaman web yang diperlukan:
Langkah 2: Pilih Opsi Inspeksi
Klik kanan pada halaman dan pilih ' Memeriksa ” dari menu, yang akan memberikan akses ke “ Alat pengembang ” panel:
Akibatnya, “ Elemen ” tab akan ditampilkan di bagian bawah browser:
Langkah 3: Sesuaikan Tempat Panel Alat Pengembang
Dengan mengklik tiga titik dari pojok, Anda dapat memilih penempatan panel. Misalnya, kami telah memilih ikon yang disorot hijau. Selain itu, jendela inspeksi dapat diubah ukurannya dengan menyeret sudutnya:
Langkah 4: Pilih Elemen untuk Diinspeksi
Kemudian, klik ikon yang disorot untuk memilih elemen yang ingin Anda periksa:
Langkah 5: Pilih Elemen
Arahkan elemen yang kode warnanya perlu ditemukan dan klik di atasnya. Akibatnya, “ Gaya ” tab terbuka dan menampilkan properti gaya dari elemen yang dipilih, dari mana Anda harus memilih warna seperti yang ditunjukkan oleh kotak yang disorot hijau:
Langkah 6: Pilih Warna Dari Color Picker
Salin kode warna dari jendela pemilih warna yang dibuka:
Gambar di bawah menunjukkan bahwa kita juga dapat memilih warna dengan mengklik kotak warna kecil yang disorot dengan warna merah. Sedangkan kotak kuning mewakili penunjuk yang diubah secara bertahap untuk melihat warna elemen yang dipilih:
Langkah 7: Sesuaikan Opacity Warna
Anda juga dapat menyesuaikan opasitas warna seperti yang ditunjukkan pada GIF di bawah ini:
Metode 2: Temukan Kode Warna di HTML Dengan Menggunakan Fitur Eye Dropper
Fitur Eye dropper juga dapat digunakan untuk memilih warna apa pun dari halaman web. Fitur ini sangat berguna karena dapat memilih warna dari mana saja di jendela yang ditampilkan.
Catatan: Fitur Eye dropper diwakili oleh kotak yang disorot merah pada gambar di bawah ini:
Berikut ini adalah demonstrasi cara kerja alat Penetes Mata:
Setelah memilih warna untuk elemen Anda, salin kode warna dan rekatkan ke dalam CSS proyek Anda.
Kesimpulan
Ada berbagai metode untuk menerapkan warna pada elemen HTML: RGB, RGBA, Kode HEX, HSLA, dan HSL. Anda dapat menemukan kode warna dengan “ Memeriksa ” halaman web apa pun atau dengan memilih warna dari “ pemilih warna ” dan menggunakan “ Penetes mata ' fitur. Artikel ini telah mendemonstrasikan prosedur untuk menemukan kode warna dalam HTML dengan contoh mendetail.