10 - Penulisan Instruksi Warna Pada Css
Desain bermain di warna. Oleh alasannya ialah itu, pada tutorial CSS kali ini kita akan membahas cara penulisan isyarat warna pada CSS. CSS mempunyai banyak variasi nilai warna yang sanggup digunakan.
Mengenal Model Warna RGB
Dalam desain di media visual menyerupai televisi maupun monitor komputer, model warna yang dipakai ialah model warna RGB (Red Green Blue). Disebut RGB, alasannya ialah warna merah, hijau dan biru inilah dasar dari warna lainnya. Warna menyerupai kuning, coklat, pink, hitam dan putih berasal dari perpaduan ketiga warna ini.
Didalam desain web, CSS mendukung hingga 16.777.216 kombinasi warna. Warna ini berasal dari perpaduan warna merah, hijau dan biru tersebut. Masing-masing warna dasar ini sanggup bernilai 0 hingga 255, dimana 0 ialah tanpa warna, 255 ialah warna maksimal. Dalam dunia ilmu komputer, kombinasi warna ini dikenal dengan 24bit warna, atau disebut juga true color. Perpaduan ketiga warna ini akan memberi kita 256 kombinasi merah x 256 kombinasi hijau x 256 kombinasi biru = 16.777.216 kombinasi warna.
Misalkan, untuk mendapat warna kuning, bergotong-royong warna kuning ialah perpaduan warna merah dan hijau. Untuk mendapat warna kuning terang, maka kita harus mencampurkan merah sebanyak 255, hijau sebanyak 255, dan biru sebanyak 0.
Format #RRGGBB
Format penulisan warna #RRGGBB ialah yang paling terkenal dipakai untuk CSS. Dimana RR ialah nilai untuk warna merah, GG untuk hijau, dan BB untuk warna biru. Masing-masing nilai ini berisi angka 00 hingga dengan FF. Kenapa FF? Karena CSS memakai angka hexadesimal. FF ialah nilai maksimal, equivalen dengan 255 dalam nilai desimal
Contohnya, #FF0000 ialah warna merah ‘murni’, #00FF00 ialah warna hijau murni, sedangkan #777777 ialah isyarat untuk warna silver.
Format #RGB
Selain memakai format warna 6 digit, CSS juga mendukung penulisan 3 digit. Format penulisan 3 digit ini merupakan penulisan singkat dari 6 digit. Contohnya #RGB merupakan penulisan singkat dari #RRGGBB, #F0F ialah kependekan dari #FF00FF, #09A sama dengan #0099AA (merah=00, hijau=99, biru=AA).
Penulisan Desimal
Selain penulisan hexadesimal, CSS juga menyediakan penulisan warna memakai angka desimal. Format penulisannya adalah: rgb(0, 160, 255) atau rgb(0%, 63%, 100%), dimana urutan warna ialah merah, hijau, dan biru. Menggunakan format pertama, 255 sama dengan 100%. 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. Format penulisan warna menyerupai ini tidak terlalu sering digunakan.
Kata Warna (Keyword)
Selain memakai isyarat warna dengan format RGB, CSS juga mendukung 17 kata warna dalam bahasa inggris, yakni: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, dan yellow. Kata-kata ini berasal dari warna dasar VGA pada Windows dan dikenal juga dengan istilah classic internet color. Berikut tabel lengkap kata warna CSS:
Tabel Kata Warna dalam 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 |
Nilai property: Transparent
Pada perkara tertentu, kita ingin sebuah tag dalam CSS menjadi transparan, untuk keperluan ini CSS menyediakan keyword transparent sebagai nilai. Dengan menunjukkan nilai transparan, sebuah tag akan ‘melewatkan’ warna dari tag dibelakangnya.
Sebagai pola penggunaan isyarat warna diatas, aku akan menampilkannya dalam file warna.html sebagai berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html><html><head> <title>Contoh 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"> Kalimat ini akan berwarna biru </p> <br /> <p class="dua"> Kalimat ini akan berwarna merah </p> <br /> <p class="tiga"> Kalimat ini akan berwarna hijau </p> <br /> <p class="empat"> Kalimat ini akan berwarna orange </p> <br /> <p class="lima"> Kalimat ini tampaknya tidak akan terlihat </p></body></html> |
Seperti yang terlihat dari isyarat HTML di atas, setiap kalimat diset memakai isyarat warna yang berbeda-beda. Yang menjadi menarik, nilai transparent yang diberikan kepada selector class=”lima” menjadi tidak terlihat, dan hanya terlihat kalau di blok.
Selain isyarat warna, property dari CSS sanggup bernilai menyerupai pixel, point, maupun persen. Perbedaan nilai ini akan kita bahas pada Mengenal Satuan Nilai (Value) dalam CSS.
Dosen Desain Web | Muqorobin, S.Kom
