info-b

Tutorial Belajar CSS Part 10: Penulisan Kode Warna pada CSS

Posted on

Desain bermain di warna. Oleh karena itu, di panduan CSS kali ini kita akan membahas cara penulisan kode warna pada CSS. CSS mempunyai banyak variasi nilai warna yang dapat digunakan.


Mengenal Model Warna RGB

Pada desain di media visual seperti televisi maupun monitor komputer, model warna yang digunakan yaitu model warna RGB (Red Green Blue). Disebut RGB, karena warna merah, hijau dan biru inilah basic dari warna lainnya. Warna seperti 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 basic ini dapat bernilai 0 hingga 255, dimana 0 yaitu tanpa warna, 255 yaitu warna maksimal. Pada dunia ilmu komputer, kombinasi warna ini dikenal dengan 24bit warna, atau disebut pun 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, bagi memperoleh warna kuning, hakekatnya warna kuning yaitu perpaduan warna merah dan hijau. Bagi memperoleh warna kuning terang, karenanya kita mesti mencampurkan merah sebanyak 255, hijau sebanyak 255, dan biru sebanyak 0.

Format #RRGGBB

Format penulisan warna #RRGGBB yaitu yang sangat populer digunakan bagi CSS. Dimana RR yaitu nilai bagi warna merah, GG bagi hijau, dan BB bagi warna biru. Masing-masing nilai ini berisi angka 00 hingga dengan FF. Kenapa FF? Karena CSS menggunakan angka hexadesimal. FF yaitu nilai maksimal, equivalen dengan 255 pada nilai desimal

Contohnya, #FF0000 yaitu warna merah ‘murni’, #00FF00 yaitu warna hijau murni, sedangkan #777777 yaitu kode bagi warna silver.

Format #RGB

Selain menggunakan format warna 6 digit, CSS pun mendukung penulisan 3 digit. Format penulisan 3 digit ini adalah penulisan singkat dari 6 digit. Contohnya #RGB adalah penulisan singkat dari #RRGGBB, #F0F yaitu singkatan dari #FF00FF, #09A sama dengan #0099AA (merah=00, hijau=99, biru=AA).

Penulisan Desimal

Selain penulisan hexadesimal, CSS pun menyediakan penulisan warna menggunakan angka desimal. Format penulisannya yaitu: rgb(0, 160, 255) atau rgb(0%, 63%, 100%), dimana urutan warna yaitu merah, hijau, dan biru. Menggunakan format pertama-tama, 255 sama dengan 100%. Sekiranya kita menuliskan nilai diluar dari angka yang seharusnya, yakni 0 – 255 atau 0% – 100% karenanya CSS secara otomatis akan menyamakannya dengan nilai yang terdekat. Format penulisan warna seperti ini tak terlalu sering digunakan.

Kata Warna (Keyword)

Selain menggunakan kode warna dengan format RGB, CSS pun mendukung 17 kata warna pada 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 basic VGA di Windows dan dikenal pun dengan istilah classic internet color. Berikut tabel komplit kata warna CSS:

Tabel Kata 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

Selain tabel warna standar di atas, beberapa modern web browser pun mendukung keyword warna yang disebut 147 SVG colors (atau X11 colors). List komplit bagi keyword warna tambahan ini dapat dilihat di : https://developer.mozilla.org/en-US/docs/CSS/color_value.

Nilai property: Transparent

Di kasus tertentu, kita ingin sebuah tag pada CSS menjadi transparan, bagi kebutuhan ini CSS menyediakan keyword transparent selaku nilai. Dengan memberikan nilai transparan, sebuah tag akan ‘melewatkan’ warna dari tag dibelakangnya.

Selaku contoh pemakaian kode warna diatas, saya akan menampilkannya pada file warna.html selaku berikut:

 Seperti yang terlihat dari kode HTML di atas, setiap kalimat diset menggunakan kode warna yang berbeda-beda. Yang menjadi menarik, nilai transparent yang diberikan kepada selector class=”lima” menjadi tak terlihat, dan hanya terlihat sekiranya di blok.

Selain kode warna, property dari CSS dapat bernilai seperti pixel, point, maupun persen. Perbedaan nilai ini akan kita bahas di Mengenal Satuan Nilai (Value) dalam CSS.


eBook CSS Uncover Duniailkom

Sekiranya sahabat ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/