Sitebeat Loader

Bicara dengan konsultan website kami

Harap berikan informasi detailmu dan tim Sitebeat akan menghubungimu!

Terima kasih

anggota tim Sitebeat akan segera menghubungimu atau hubungi kami sekarang melalui:

oleh Asa Citra

19 Oktober 2021

Panduan Website 4 mnt

Bagaimana Mengetahui Kode Warna HTML?

Peran kode warna HTML dalam pembuatan website sangatlah krusial, terutama dalam hal desain. Meski sistem pengkodeannya cukup sederhana, salah mengaplikasikan kode akan sangat berpengaruh pada keindahan website.

Oleh sebab itulah, siapapun yang berniat membuat website sendiri harus bisa memahami konsep kode warna HTML ini terlebih dahulu.

Apa Itu Kode Warna HTML?

Dalam dunia nyata, kita bisa menggunakan cat atau krayon untuk mewarnai sesuatu. Tentunya, teknik tersebut tidak bisa diterapkan dalam dunia digital. Sebagai gantinya, digunakanlah sistem kode warna HTML ini.

Kode warna HTML adalah kombinasi huruf, angka, dan simbol yang merepresentasikan suatu warna tertentu.

Dengan adanya sistem seperti ini, kita jadi bisa menentukan warna sesuai keinginan kita dan menggunakannya secara konsisten untuk beberapa elemen desain. 

Jenis-Jenis Metode Pengkodean Warna HTML

Secara umum, ada tiga jenis metode pengkodean warna HTML. Ketiga metode ini saling berhubungan. Setiap warna dapat direpresentasikan oleh setiap jenis metode sesuai kebutuhan.

Nama Warna

Metode ini sama dengan metode penunjukan warna yang biasa kita lakukan dalam kehidupan sehari-hari, yaitu dengan memberi sebutan pada setiap warna.

Dalam HTML, terdapat 17 nama standar untuk warna tertentu yang digunakan secara umum dalam dunia digital. Namun tentunya, metode ini memiliki keterbatasan karena tidak semua shade warna memiliki namanya sendiri.

Adapun 17 warna tersebut adalah black, blue, gray, teal, aqua, green, lime, yellow, navy, olive, orange, purple, fuchsia, red, maroon, silver, dan white. 

Nilai RGB

Setiap warna digital bersumber pada tiga unsur, yaitu red (R), green (G), dan blue (B). Dalam pengkodean warna RGB, setiap warna ditunjukkan dengan nilai setiap unsurnya. 

Kisaran nilai itu sendiri bisa bervariasi dari 0 sampai 255. Ini berarti, ada 16.777.216 warna yang bisa direpresentasikan dengan metode RGB ini.

Nama warna standar HTML seperti yang telah dibahas di atas pun bisa diterjemahkan menjadi kode RGB. Namun, tidak semua kode RGB memiliki kode nama warna yang spesifik.

Berikut adalah beberapa contoh warna dalam kode nilai RGB:

  • Red: R=255, G=0, B=0
  • Black: R=0, G=0, B=0
  • Gray: R=128, G=128, B=128
  • Brown: R=165, G=42, B=42
  • Fuchsia: R=255, G=0, B=255

Kode Hex

Pada dasarnya, kode hex adalah bentuk lain dari penerjemahan nilai RGB pada sebuah warna. Kode ini diawali sebuah tanda pagar yang diikuti oleh 6 digit huruf dan atau angka.

Setiap 2 digit dalam kode ini masing-masing menggambarkan nilai RGB. Maka, format dasar kode hex adalah #RRGGBB.

Nomor digunakan dalam kode hex bila nilai RGB berkisar antara 0-10. Di atas itu, kode yang digunakan adalah huruf dengan aturan sebagai berikut:

  • A = 10
  • B = 11
  • C = 12
  • D = 13
  • E = 14
  • F = 15

Digit pertama untuk setiap nilai unsur RGB perlu dikalikan 16 terlebih dahulu. Selanjutnya, jumlahkan angkanya dengan nilai pada digit kedua. Total akhirnya akan menunjukkan nilai unsur R/G/B. Untuk aplikasinya, berikut adalah beberapa contoh warna dalam kode hex:

  • Red: R=255, G=0, B=0 = #FF0000
  • Black: R=0, G=0, B=0 = #000000
  • Gray: R=128, G=128, B=128 = #808080
  • Brown: R=165, G=42, B=42 = #A52A2A
  • Fuchsia: R=255, G=0, B=255 = #FF00FF

Kode hex warna

Sumber

Sitebeat Website Builder

 

Mengetahui Kode Warna HTML pada Sebuah Website

Terkadang kita melihat website lain dan merasa tertarik dengan salah satu atau beberapa warna yang digunakan. Untuk mengetahui kode warna HTML tersebut, gunakanlah tips mudah ini menggunakan tools bawaan dari browser Google Chrome:

  1. Klik tombol tiga titik yang terdapat pada pojok kanan atas hingga keluar menu.
  2. Klik opsi "More tools", lalu pilih "Developer tools".
  3. Bisa juga gunakan kombinasi tombol Ctrl+Shift+I untuk membuka fitur "Developer tools" ini. Atau dengan cara lain yaitu klik kanan pada laman browser, lalu pilih "Inspect".
  4. Laman browser akan terbagi dua, dengan tampilan website di sebelah kiri dan tampilan kode di sebelah kanan.
  5. Tekan Ctrl+Shift+C, lalu arahkan kursor ke bagian website yang kamu inginkan.
  6. Laman Developer tools kemudian akan menampilkan kode untuk elemen yang ditunjuk tersebut, termasuk kode warna HTML yang digunakan.

Developer tool

 

Mengetahui Kode Warna HTML pada Elemen Digital Lainnya

Untuk mendeteksi kode warna pada elemen digital lain, kamu bisa menggunakan tool bernama Eye Dropper, Color Picker, atau semacamnya. Tool ini seringkali sudah tersedia pada berbagai software desain grafis dan siap langsung digunakan.

Kamu juga bisa mendapatkannya baik secara gratis maupun berbayar dalam bentuk software maupun browser extension.

Color picker

Sumber

Tool ini sangat mudah digunakan, yaitu hanya dengan mengarahkan kursor ke area yang ingin diketahui warnanya.

Nantinya, tool tersebut akan menunjukkan kode hex dan juga nilai RGB dari warna tersebut. Kamu juga bisa meng-clone warna tersebut ke elemen desainmu.

Menggunakan Kode Warna HTML yang Tepat

Kode warna HTML bisa diaplikasikan ke berbagai elemen dalam sebuah website, misalnya untuk warna tulisan, highlight tulisan, warna bayangan, latar belakang, garis tepi, atau apapun.

Penerapannya tentu disesuaikan dengan coding yang digunakan untuk membuat website tersebut.

Namun, saat ini sudah banyak tool pembuatan website yang memiliki katalog warna sehingga bahkan orang awam pun bisa mengatur warna yang tepat tanpa kesulitan.

Bila tool yang kamu gunakan tidak memiliki katalog warna, kamu bisa mencari kode hex yang kamu inginkan pada website HTML color chart.

Baca juga: Psikologi Warna dan Pengaruhnya untuk Brandmu

Sitebeat Website Builder

Join Us

Dapatkan wawasan terbaru dan terkini seputar teknologi digital untuk membantu mengembangkan bisnismu.



Bonus Content