Belajar CSS : Penulisan Kode Warna Pada CSS (8) - Suka Code
Didalam dunia visual seperti sekarang ini semua teknologi sekarang sangat berwarna, model warna yang digunakan adalah model warna RGB (red, green, blue). Disebut RGB, karena warna merah, hijau dan biru inilah dasar dari warna lainnya. Warna seperti kuning, coklat, pink, hitam dan putih berasal dari perpaduan ketiga warna ini.
Didalam web desain, CSS mendukung hingga 16 juta kombinasi warna. Warna ini berasal dari berpaduan warna merah, hijau dan biru tersebut. Masing-masing warna dasar ini dapat bernilai 0 sampai 255; dimana 0 adalah tanpa warna, 255 adalah 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 mendapatkan warna kuning, sebenarnya warna kuning adalah berpaduan warna merah dan hijau. Untuk mendapatkan warna kuning terang, maka kita harus mencampurkan merah sebanyak 255, hijau sebanyak 255, dan biru sebanyak 0.
Format #RRGGBB
Format penulisan warna #RRGGBB adalah yang paling populer digunakan untuk CSS. Dimana RR adalah nilai untuk warna merah, GG untuk hijau, dan BB untuk warna biru. Masing-masing nilai ini berisi angka 00 sampai dengan FF. Kenapa FF? karena CSS menggunakan angka heksadesimal. FF adalah nilai maksimal, ekuivalen dengan 255 dalam nilai desimal.
Contohnya, #FF0000 adalah warna merah "murni", #00FF00 adalah warma hijau murni, sedangkan #777777 adalah kode untuk silver.
Format #RGB
Selain menggunakan 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 adalah singkatan dari #FF00FF, #09A sama dengan #0099AA (merah=00, hijau=88, biru=AA).
Penulisan Desimal
Selain penulisan hexadesimal, CSS juga menyediakan penulisan warna menggunakan angka desimal. Format penulisannya adalah: rgb(0, 160, 255) atau rgb(0%, 63%, 100%), dimana urutan warna adalah merah, hijau, dan biru. Menggunaka format pertama, 255 sama dengan 100%. Jika kita menuliskan nilai diluar dari angka seharusnya, yakni 0 - 255 atau 0% - 100%, maka CSS secara otomatis akan menyamakannya dengan nilai yang terdekat. Format penulisan warna seperti ini tidak terlalu sering digunakan.
Kata Warna (keyword)
Selain menggunakan kode warna dengan format RGB, CSS juga mendukung 17 kata warna dalam bahasa Inggris, yakni: aqua, black, blue, fuchdia, gray, green, red, lime, maroon, navy, olive, orange, purple, silver, teal, yellow dan white. Kata-kata ini berasal dari warna VGA pada Windows dan dikenal juga dengan istilah classic internet color. Namun cara ini sudah banyak ditinggalkan karena lebih banyak orang memiliki untuk menggunakan kode warna Hex karena di anggap lebih mudah.
Sebagai contoh untuk penulisan kode warna di atas, saya akan menampilkannya didalam file .html.
Contoh Pembuatan :
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS bersama Suka Code</title>
<style type="text/css">
p.satu {
color: #0000FF;
}
p.dua {
color: #F00;
}
p.tiga {
color: rgb(10, 255, 10);
}
p.empat {
color: orange;
}
</style>
</head>
<body>
<p class="satu"> Tulisan ini berwarna biru </p>
<br />
<p class="dua"> Tulisan ini berwarna merah</p>
<br />
<p class="tiga"> Tulisan ini berwarna hijau </p>
<br />
<p class="empat"> Tulisan ini berwarna oren </p>
<br />
</body>
</html>
Hasil :
Tulisan dari HTML diatas berwarna berbeda karena, kode warna yang saya masukkan berbeda pada CSS internal.
Suka Code Blog adalah website dengan kumpulan konten seputar Game Development, Web Programming, Android Programming, Windows Programming, dan lain-lain.
Belum ada Komentar untuk "Belajar CSS : Penulisan Kode Warna Pada CSS (8) - Suka Code"
Posting Komentar