Assalamualaikum Wr. Wb. Kali ini saya akan menjelaskan tentang Warna di HTML, tentu kita sudah banyak melihat warna di HTML tetapi mungkin kita belum tahu bagaimana mewarnai HTML, sebenarnya warna HTML menggunakan kode CSS background-color: [warna] untuk warna background dan color: [warna] untuk warna dalam (biasanya teks dalam elemen), nah diisi apa [warna] tersebut? disini [warna] bisa diisi dengan red, green, blue, yellow, dll..., tetapi ada juga warna yang tidak bisa ditulis nama warnanya, kita gantikan dengan kode #RRGGBB, contoh warna biru berarti ditulis #0000FF, kode tersebut menggunakan angka 0-255 yang ditulis dalam bentuk hexadesimal 00-FF yang berarti intensitas warnanya, semakin besar angka(hex) semakin terang(jelas) warnanya, baris pertama mewakili RED #RR----, kedua mewakili GREEN #--GG-- dan ketiga mewakili blue #----BB.
Disini berarti warna dibuat dengan kombinasi warna, misal warna kuning ditulis #FFFF00, kenapa? karena kuning adalah campuran merah dengan hijau, jadi kita buat birunya menjadi 00 sehingga ditulis #FFFF00, FF bisa diganti dengan jumlah berapa saja asalkan dalam bentuk hexa desimal (FF = 255, FE = 254, FD = 253, dst --- 00 = 0).
Nah, bagaimana dengan warna yang transparan? Tentu tidak bisa menggunakan warna transparan dengan kode warna diatas (sebenarnya bisa tetapi kita perlu menambahkan opacity: [jumlah] di CSS tetapi mempengaruhi semua isi elemen), kita perlu kode [warna] yang ditulis dengan rgba([R], [G], [B], [A]) dengan aturan depan yg sama yaitu background-color: [warna] untuk warna background dan color: [warna] untuk warna dalam (biasanya teks dalam elemen), nah diisi apa [warna], tetapi apa itu [A]? [A] adalah Alpha atau transparannya, bisa diisi dengan angka desimal 0-1, hah, cuma 0 dan 1? Tidak 0-1 artinya bisa diisi dengan 0.0-1.0, semakin kecil nilainya semakin transparan, misal rgba(126, 126, 126, 0.5). kenapa RGB-nya diisi dengan desimal biasa? Karena kita menggunakan kode rgba maka cara penulisannya berbeda, dengan kode biasa (#) memang ditulis hexadesimal, tetapi dengan rgba ini kita menulisnya desimal biasa yaitu antara 0-255, dan aturannya sama, semakin besar angka semakin tampak warnanya.
Disini saya membuat demo warna sederhana yang akan membuat kita mengetahui warna dengan cepat:|
R
|
|||
|
G
|
|||
|
B
|
|||
|
A
|
|||
|
RGB:
|
|||
|
RGBA:
|
|||
Anda bisa membuat warna sesuka Anda dengan menarik Slider diatas, warna dan kode akan langsung berubah sesuai dengan nilai yang diberikan. mungkin ada yang membutuhkan HTML diatas untuk digunakan secara offline, saya berikan source codenya.
No comments:
Post a Comment