Memahami Warna pada CSS (Hexa Color dan RGB) Untuk Memudahkan Mengatur Warna Tanpa Generator

Halo Sobat!, pada artikel ini kita membahas warna pada CSS, yang akan saya jabarkan disini adalah Hexa Color dan RGB, tujuan dari artikel tersebut adalah, agar sobat yang suka mengutak atik tampilan website/ blog, atau hobi pada desain web dapat lebih mudah mengatur warna pada CSS tanpa bantuan color generator.

Hexa Color 

• Adalah warna dengan basis nilai hexa (16), sebenarnya formatnya sama saja dengan RGB, misal nya, #FF0000, 2 digit dikiri merah (Red), 2 digit ditengah hijau (Green), dan 2 digit dikanan biru (Blue). 
• Pada contoh #FF0000, berarti nilai warna merah dari susunan warna tersebut adalah 256, nilai hijau dan biru 0, susunan warna ini akan menampilkan warna merah pekat.
• Nilai merah 256 ini didapat dari, F Hexadesimal = 16 Desimal, dua kali F berarti 16x16 = 256.

Beberapa warna dasar untuk Hexacolor

• #FFFFFF = Putih. Didapat dari nilai dari Red, Green, Blue maximal sebesar 256.
• #000000 = Hitam. Didapat dari nilai RGB yang 0, menjadikan tidak berwarna.
• #FF0000 = Merah. Didapat 2 digit diawal yang bernilai 256.
• #00FF00 = Hijau.
• #0000FF = Biru.

Silahkan sobat mengkombinasi sendiri nilai dari warna tersebut, yang pasti range atau jangkauan warna maksimal adalah 0-9 lalu A-F. 

Untuk penulisan yang lebih singkat bisa hanya menggunakan 3 digit, bila masing-masing 2 digitnya memiliki nilai yang sama, contoh :

• #FFFFFF = bisa disingkat menjadi #FFF
• #0000FF = #00F
• #66CCFF = #6CF

RGB Color

• RGB Color menggunakan basis nilai desimal dari 0 - 256, per setiap bagian Red, Green, Blue nya.
• Cara menyusun atau penulisannya sedikit lebih rumit dan panjang, seperti ini RGB(256,0,0)
• Pada contoh RGB(256,0,0) berarti nilai dari warna merah sebesar 256, RGB berarti susunan warnanya dimulai dari Merah, Hijau, Biru sama saja sebenarnya dengan Hexa Color

• Silahkan Sobat mengkombinasikan sendiri juga untuk nilai warna lainnya.
• RGB dapat kita beri nilai transparan dengan menggunakan properti RGBA, contoh penulisannya RGBA(256,0,0,1), angka 1 paling belakang tersebut berarti opacity, atau nilai transparency dari warna tersebut, hal ini dapat kita gunakan juga untuk memperindah tampilan suatu elemen dengan warna yang sedikit tembus pandang. Nilai transparency mulai dari 0-1, jadi jika sobat ingin menghilangkan warna sekaligus, gunakanlah nilai 0. Jika ingin membuat transparan gunakanlah nilai 0.1 - 0.9.

Nah, Saya kira cukup sekian saja, semoga ini dapat membantu dan berguna bagi Sobat sekalian. Lebih dan kurangnya Saya mohon maaf, Terima Kasih telah berkunjung.