Kuy Belajar - Mengenal Format Penulisan Kode Warna pada CSS. Assalamualaikum sobat semua. Alhamdulillah kita ketemu lagi di blog kuy-belajar, sebelumnya kita sudah membahas materi pertama kita tentang Mengenal Sifat Inheritance atau Penurunan di CSS kita akan menyambung pembahasan tersebut yaitu dengan materi Mengenal Format Penulisan Kode Warna pada CSS. Sobat sudah penasaran kan? kuy simak pembahasan berikut ini!
Warna merupakan salah satu elemen yang sangat penting dalam sebuah desain, misalkan pada sebuah brosur, spanduk, logo, dan lainnya. Coba kita bayangkan apabila sebuah produk di desain dengan menggunakan warna yang tidak serasi, pastinya untuk melihatnya saja kita akan merasa malas.
Untuk itu lah sebelum kita mengkombinasikan warna dalam mendesain sebuah produk, khususnya dalam mendesain tampilan sebuah website, alangkah baiknya jika kita terlebih dahulu mempelajari format penulisan kode warna di css.
Tentu saja jika kita sudah memahami seperti apa format penulisan tersebut, kita akan lebih mudah jika ingin mengkombinasikan warna dalam mendesain tampilan web.
Mengenal Format Kode Warna RGB
Seperti yang kita ketahui, banyak desain pada media visual seperti televisi maupun sebuah monitor komputer, format warna yang dipakai yaitu format RGB (Red Green Blue). Seperti namanya RGB ini merupakan sebuah warna dasar yang terdiri dari warna Red = merah, Green = hijau, Blue = biru.
Sebenarnya CSS mengenal lebih dari tiga warna tersebut, atau lebih tepatnya sekitar 16.777.216 kombinasi warna. Warna tersebut seperti warna kuning, jingga, hitam dan lain-lain, warna-warna tersebut sebenarnya di hasilkan dari kombinasi ketiga warna dasar tersebut.
Masing-masing dari warna Merah, Hijau dan Biru bisa bernilai 0 sampai dengan 255. Dimana nilai 0 berarti tidak memiliki warna, dan nilai 255 merupakan nilai warna maksimum.
Mengenal Format Warna #RRGGBB
Kebanyakan dari web designer menggunakan format warna #RRGGBB ini di dalam membuat sebuah desain website, karena kode warna ini merupakan kode warna yang paling populer digunakan pada CSS.
Dimana RR adalah nilai yang digunakan untuk warna merah, GG digunakan untuk warna hijau, dan BB digunakan untuk warna biru. Masing masing nilai dapat berisi angka 00 sampai dengan FF.
Format angka yang di gunakan pada kode warna tersebut yaitu menggunakan angka hexadecimal dimana nilai 0 merupakan nilai terendah dan nilai F merupakan nilai tertinggi atau setara dengan nilai 255 desimal.
Contoh penulisan kode warna #RRGGBB yaitu : #FF0000 adalah warna merah ‘murni’, #00FF00 adalah warna hijau murni, sedangkan #777777 adalah kode untuk warna silver
Mengenal Format Warna #RGB
Selain menggunakan format warna #RRGGBB, didalam css juga menyediakan sebuah format yang lebih ringas, yaitu format #RGB. format warna ini lebih ringkas penulisannya jika dibandingkan dengan format warna #RRGGBB, karena kita cukup menuliskan tiga digit warna saja dibandingkan pada format #RRGGBB yang berisi enam digit.
Format warna #RGB ini sebenarnya merupakan penulisan singkat dari format warna #RRGGB. Contohnya #F0F adalah singkatan dari #FF00FF, #09A sama dengan #0099AA (merah=00, hijau=99, biru=AA).
Mengenal Format Warna Desimal
Jika pada pembahasan diatas kita menggunakan format nilai hexadesimal, kali ini kita akan menggunakan format angka desimal untuk memberi nilai dari kode warna di css. Karena selain format hexadesimal, css pun mendukung format desimal.
Format penulisannya yaitu : rgb(0, 160, 255) atau rgb(0%, 63%, 100%), dimana urutan warna adalah merah, hijau, dan biru. pada format penulisan yang kedua kita menggunakan satuan %.
Jika kita menuliskan nilai diluar dari angka yang seharusnya, yakni 0 – 255 atau 0% – 100% maka CSS secara otomatis akan menyamakannya dengan nilai yang terdekat. Sebenarnya format penulisan warna seperti ini jarang digunakan.
Mengenal Format Warna Kata(Keyword)
Selain menggunakan format RGB, pada css ini pun disediakan format warna menggunakan sebuah keyword. CSS menyediakan 17 keyword warna dalam bahasa inggris, yaitu : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, dan yellow. Kata-kata ini sebenarnya berasal dari warna dasar VGA pada Windows dan dikenal juga dengan istilah classic internet color.
Berikut ini tabel lengkap keyword warna pada CSS :
| Keyword Warna | Nilai RGB |
|---|---|
| aqua | #00ffff |
| black | #000000 |
| blue | #0000ff |
| fuchsia | #ff00ff |
| gray | #808080 |
| green | #008000 |
| lime | #00ff00 |
| maroon | #800000 |
| navy | #000080 |
| olive | #808000 |
| orange | #ffa500 |
| purple | #800080 |
| red | #ff0000 |
| silver | #c0c0c0 |
| teal | #008080 |
| white | #ffffff |
| yellow | #ffff00 |
Sebenarnya selain keyword warna diatas, pada beberapa browser versi terbaru juga mendukung keyword warna yang disebut 147 SVG colors (atau X11 colors). List lengkap untuk keyword warna tambahan ini dapat dilihat di : https://developer.mozilla.org/en-US/docs/CSS/color_value.
Mengenal Nilai Propoerty Transparent di CSS
Seperti nama nilai property nya, nilai property transparent ini berarti transparan atau tembus pandang, nilai property ini bisa sobat gunakan seandainya sobat ingin membuat sebuah objek di dalam website sobat menjadi transparan atau memperlihatkan warna dari objek yang berada di belakang nya.
Untuk lebih jelasnya, kuy simak kode berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Kuy Belajar Penulisan Kode Warna CSS</title>
<style type="text/css">
p.satu {
color:#0000FF;
}
p.dua {
color:#F00;
}
p.tiga {
color:rgb(10, 255, 10);
}
p.empat {
color:orange;
}
p.lima{
color:transparent;
}
</style>
</head>
<body>
<p class="satu">
Saya akan berwarna biru
</p>
<br />
<p class="dua">
Saya akan berwarna merah
</p>
<br />
<p class="tiga">
Saya akan berwarna hijau
</p>
<br />
<p class="empat">
Saya akan berwarna orange
</p>
<br />
<p class="lima">
Saya sepertinya tidak akan terlihat
</p>
</body>
</html>Maka hasilnya akan seperti pada gambar dibawah ini.
Pada kode di atas setiap kalimat diset menggunakan kode warna yang berbeda-beda. Yang menjadi menarik, nilai transparent yang diberikan kepada selector class=”lima” menjadi tidak terlihat, dan hanya terlihat jika di blok.
Saya rasa itu lah pembahasan kita tentang Mengenal Format Penulisan Kode Warna pada CSS. kita sudah mempelajari fungsi berserta contoh nya masing-masing.
Sekian dulu dari saya "Singkat, Semoga Bermanfaat"
Keep Coding ya sobat!