Pada sebuah desain visual, salah satu elemen yang sangat berpengaruh adalah palet warna yang digunakan. Begitu juga dengan desain website, di mana pilihan kombinasi warna dapat meningkatkan atau menurunkan interaksi pengunjung dengan website kamu.
Dalam proses desain web, kamu akan sering menggunakan berbagai warna berbasis HTML. Warna HTML direpresentasikan dalam bentuk kode, yang tentunya akan sangat sulit untuk diingat satu persatu.
Maka dari itu, di artikel kali ini kami akan membahas panduan lengkap kode warna HTML untuk membantu kamu meningkatkan efisiensi dalam proses pemilihan warna website kamu.
Baca Juga: Migrasi Website dari cPanel Hosting ke CWP
Apa itu kode warna HTML?
Kode warna HTML adalah tiga rangkaian angka heksadesimal yang merepresentasikan tiga warna primer yaitu merah (R), hijau (G), dan biru (B). Susunan angka pada kode warna HTML adalah #RRGGBB.
Kode warna HTML ini bisa digunakan untuk mengubah warna background, text, dan tabel pada sebuah halaman website.
Bagi kamu yang sering membuat seni digital, mungkin kamu sudah familiar dengan kode warna seperti #FFFFFF dan #DC143C.
Lalu bagaimana kode-kode HTML ini bisa menjadi warna-warna selain merah, hijau, dan biru?
Kombinasi hex code ini terdiri dari 16 digit: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Berikut penjelasan singkatnya:
- Angka “0” adalah representasi terkecil dari sebuah warna, yang berarti warna primer tersebut tidak ada dalam kombinasi.
- Setiap tingkatan setelah “0” merepresentasikan kepekatan warna primer tersebut dalam kombinasi.
- “2” berarti intensitas warna 2x lebih pekat.
- “F” memiliki intensitas warna 15x lebih pekat dari “0”.
- Kombinasi dari ke-16 digit di atas bisa menghasilkan gradasi warna yang berbeda-beda.
Representasi warna ini dilakukan tiga kali, sekali untuk merah , sekali untuk hijau, dan satu kali untuk biru dengan urutan yang tidak dapat diubah (#RRGGBB).
Jadi pada dasarnya, kode hex adalah representasi dari intensitas merah, hijau, dan biru. Komputer menentukan intensitas ketiga warna tersebut dan menggabungkannya menjadi satu warna baru.
Contoh mudah untuk memahami konsep ini adalah dengan mengingat konsep percampuran warna. Jika kamu mengambil masing satu gelas cat warna merah dan hijau dan mencampurkannya, maka kamu akan mendapatkan warna kuning terang.
Pada kode warna HTML, #FFFF00 adalah hex code untuk warna kuning terang. Warna merah dan warna hijau diatur dengan intensitas tertinggi (“F”), sedangkan warna biru memiliki intensitas 0.
Baca juga: 10 Elemen Penting Desain Web
Tools dan Website Untuk Menemukan Kode Warna HTML
Sekarang kamu sudah tidak perlu repot karena di luar sana sudah banyak website dan tools yang bisa memudahkan kamu untuk mencari dan menemukan kode warna HTML untuk warna yang kamu inginkan. Tools ini biasa disebut dengan istilah color picker. Ada apa saja ya?
Instant Eyedropper
Instant Eyedropper adalah program color picker untuk Windows. Karena bersifat program, tools ini bisa digunakan untuk web browser dan program windows lainnya. Instant Eyedropper adalah salah satu tools yang paling banyak digunakan.
Cara menggunakannnya pun cukup mudah, kamu hanya perlu mengklik ikon yang ada pada system tray dan bawa mouse kamu ke warna yang ingin kamu ketahui kodenya. Setelah kamu melepaskan mouse kamu, detail tentang warna tersebut akan secara otomatis disalin ke clipboard kamu.
ColorSnapper2
ColorSnapper2 adalah program color picker untuk pengguna Mac. Cara penggunannya cukup mudah karena kamu tinggal membuka program, klik di bagian yang ingin kamu ketahui detail warnanya. Setelah itu, pilih detail warna yang kamu butuhkan, dan mereka akan disalin secara otomatis ke clipboard kamu.
Colorpick EyeDropper
Bagi kamu pengguna Chrome, kamu bisa menggunakan extension. Salah satu extension color picker yang terkenal adalah Eye Dropper. Untuk memilih warna, kamu tinggal meng-klik ikon extension, klik tombol eyedropper, dan klik warna yang ingin kamu ketahui detailnya.
Dengan EyeDropper kamu bisa mendapatkan informasi warna dalam format kode warna HTML atau detail RGBnya. Selain itu, kamu juga bisa menyimpan warna ke history dan secara otomatis menyalin warna ke clipboard kamu.
Pixolor
Bagi kamu pengguna Android, ada juga aplikasi color picker yang bisa kamu gunakan di handphone atau device kamu yaitu, Pixolor. Pixolor memiliki cara kerja yang sedikit berbeda dengan aplikasi lain.
Saat diaktifkan, Pixolor akan memunculkan lingkaran di atas aplikasi lain agar kamu bisa memperbesar ke warna yang kamu ingin ketahui kode warna HTMLnya. Kemudian, kamu bisa mengirim detail warna ini ke teman kamu atau ke device lain.
Khroma
Yang satu ini memang bukan color picker. Tetapi Khroma adalah website yang menggunakan kecerdasan buatan atau artificial intelligence untuk memudahkan kamu menelusuri dan membandingkan kombinasi warna.
Cara kerjanya adalah user memilih dulu 50 warna yang mereka suka dan dari warna-warna ini, mereka akan memberikan kamu ratusan warna yang memiliki tone serupa dengan warna yang kamu pilih sebelumnya. Tidak hanya namanya, mereka juga akan memberikan kamu kode warna HTML nya agar kamu bisa menggunakannya untuk keperluan kamu.
Baca Juga: Panduan GTMetrix untuk Analisa Kecepatan Website
Simpulan
Di artikel ini kami sudah membahas tentang kode warna HTML. Kode warna HTML ini memang bisa memudahkan kamu untuk membuat desain di komputer dan berbagai device.
Menghafalkan setiap kode warna HTML juga susah, tetapi sekarang sudah ada berbagai tools, aplikasi, website, dan extension di luar sana yang bisa kamu gunakan untuk mempermudah kamu mencari warna yang kamu inginkan.
Semoga artikel ini membantu ya!
