Cara Mengetahui Kode Warna Website dengan Inspect Element
Ketika kamu sedang berselancar di dunia maya, dan ternyata kamu ga sengaja masuk ke web atau blog orang dengan tampilan yang keren, tentu kamu akan penasaran dengan kode warna yang mereka gunakan pada web atau blog mereka, apalagi jika kamu seorang blogger ataupun web designer, tentu yang menarik di matamu adalah desain dari web tersebut.
Dengan mengetahui kode warna pada web orang lain, hal ini akan memudahkan kita dalam meniru warna dari web tersebut. Misalnya kita ingin mendesain web yang kita kelola, atau melakukan desain gambar dan membutuhkan warna yang kita lihat di website orang tadi.
Memang warna yang ada di dunia IT sangatlah banyak, berbeda dengan di dunia nyata. Bahkan, di dunia maya, warna yang jika kita lihat secara kasat mata adalah warna yang sama, bisa jadi kedua warna tersebut memiliki perbedaan yang sangat tidak terlihat, dan hanya dapat dideteksi melalui perbedaan kode warna dari kedua warna tersebut.
Kode warna ada bermacam-macam, mulai dari RGB (Red , Green Blue), HEX ataupun kode warna yang biasanya ditulis menggunakan bahasa Inggris seperti Red, Yellow, Lime, Aqua, dll.
Karena banyaknya jenis warna di dunia maya, agar bisa mengetahui secara pasti warna apakah itu, kita tidak bisa menentukan bahwa warna yang kita lihat di web tersebut adalah warna merah, atau warna kuning misalnya, akan tetapi kita akan mencari tahu kode warna tersebut. Dengan demikian kita bisa menggunakan warna tersebut untuk keperluan yang lain.
Namun perlu diperhatikan, bahwa dalam tutorial kali ini, saya akan menggunakan Google Chrome versi terbaru (saat ini adalah v. 74.0.3729.131). Jika kamu menggunakan versi sebelumnya, silahkan dicoba terlebih dahulu, dan jika bisa ya Alhamdulillah, jika belum berhasil silahkan mengupgrade browsernya terlebih dahulu.
2. Setelah proses memuat halaman sudah selesai, silahkan buka Inspect Element dengan menekan 3 titik di kanan atas browser, atau kalau mau cepat kamu bisa menggunakan kombinasi tombol Ctrl + Shift + I.
3. Lalu silahkan ikuti sesuai gambar berikut :
Keterangan :
1) Silahkan kalian klik yang dilingkari
2) Lalu pilih (sorot dan klik) bagian mana yang ingin kalian ketahui kode warnanya, contoh di atas di asumsikan bahwa saya ingin mengetahui kode warna dari tulisan Laporkan Penyalahgunaan
3) Kode warna akan muncul dibawah target ketika kalian menyorotnya dengan kursor, dan akan muncul di bagian Inspect Element > Styles ketika kalian klik
Okee sekarang sudah selesai, kita sudah berhasil untuk menemukan kode warna dari suatu web / blog hanya dengan beberapa langkah kecil saja. Cukup mudah bukan? Sekarang saatnya kamu melanjutkan desainanmu, entah mendesain blog atau membuat sebuah banner iklan, kamu bisa menggunakan kode warna yang telah kamu temukan tadi.
Jika kurang jelas, silahkan kalian tanya dikomentar. Jika dirasa bermanfaat, silahkan bagikan artikel ini ke orang-orang disekitarmu.
Semoga bermanfaat!
Dengan mengetahui kode warna pada web orang lain, hal ini akan memudahkan kita dalam meniru warna dari web tersebut. Misalnya kita ingin mendesain web yang kita kelola, atau melakukan desain gambar dan membutuhkan warna yang kita lihat di website orang tadi.
Memang warna yang ada di dunia IT sangatlah banyak, berbeda dengan di dunia nyata. Bahkan, di dunia maya, warna yang jika kita lihat secara kasat mata adalah warna yang sama, bisa jadi kedua warna tersebut memiliki perbedaan yang sangat tidak terlihat, dan hanya dapat dideteksi melalui perbedaan kode warna dari kedua warna tersebut.
Kode warna ada bermacam-macam, mulai dari RGB (Red , Green Blue), HEX ataupun kode warna yang biasanya ditulis menggunakan bahasa Inggris seperti Red, Yellow, Lime, Aqua, dll.
Karena banyaknya jenis warna di dunia maya, agar bisa mengetahui secara pasti warna apakah itu, kita tidak bisa menentukan bahwa warna yang kita lihat di web tersebut adalah warna merah, atau warna kuning misalnya, akan tetapi kita akan mencari tahu kode warna tersebut. Dengan demikian kita bisa menggunakan warna tersebut untuk keperluan yang lain.
Lalu bagaimana cara menentukan kode warna dari web / blog lain?
Caranya cukup mudah, kalian hanya perlu bermodalkan browser Google Chrome, tanpa perlu menginstall ekstensi, plugins, ataupun software tambahan.Namun perlu diperhatikan, bahwa dalam tutorial kali ini, saya akan menggunakan Google Chrome versi terbaru (saat ini adalah v. 74.0.3729.131). Jika kamu menggunakan versi sebelumnya, silahkan dicoba terlebih dahulu, dan jika bisa ya Alhamdulillah, jika belum berhasil silahkan mengupgrade browsernya terlebih dahulu.
Langkah-langkah mengetahui kode warna dari situs lain :
1. Pertama silahakan kamu buka Google Chrome, lalu kunjungi situs yang ingin di lihat kode warnanya.2. Setelah proses memuat halaman sudah selesai, silahkan buka Inspect Element dengan menekan 3 titik di kanan atas browser, atau kalau mau cepat kamu bisa menggunakan kombinasi tombol Ctrl + Shift + I.
3. Lalu silahkan ikuti sesuai gambar berikut :
 |
| Klik untuk memperbesar |
Keterangan :
1) Silahkan kalian klik yang dilingkari
2) Lalu pilih (sorot dan klik) bagian mana yang ingin kalian ketahui kode warnanya, contoh di atas di asumsikan bahwa saya ingin mengetahui kode warna dari tulisan Laporkan Penyalahgunaan
3) Kode warna akan muncul dibawah target ketika kalian menyorotnya dengan kursor, dan akan muncul di bagian Inspect Element > Styles ketika kalian klik
Okee sekarang sudah selesai, kita sudah berhasil untuk menemukan kode warna dari suatu web / blog hanya dengan beberapa langkah kecil saja. Cukup mudah bukan? Sekarang saatnya kamu melanjutkan desainanmu, entah mendesain blog atau membuat sebuah banner iklan, kamu bisa menggunakan kode warna yang telah kamu temukan tadi.
Jika kurang jelas, silahkan kalian tanya dikomentar. Jika dirasa bermanfaat, silahkan bagikan artikel ini ke orang-orang disekitarmu.
Semoga bermanfaat!
