Dalam CSS sistem dasar warna digunakan adalah RGB. Yaitu singkatan dari Red Green dan Blue. Warna tersebut yang nantinya diubah dan diturunkan menjadi warna warna lainnya seperti coklat, hitam, putih, kuning, kelabu dan lain lain. Model warna dasar RGB ini juga dipakai secara umum dalam seni visual seperti TV, LCD dan layar Computer.
Turunan dari 3 warna dasar tersebut dalam CSS melahirka 16.777.216 warna lainnya. Setiap warna dasar bernilai 0 sampai 255. Nilai 0 adalah tanpa warna dan 255 adalah warna dengan kepekatan maksimal. Dalam dunia komputer ini dikenal dengan true color atau 24 bit warna. Jika dihitung secara matematis perpaduan 3 warna tersebut : red 256 , green 256 dan blue 256 maka jika dipasangkan akan menjadi : redxbluexgreen = 256 x256 x 256 = 16.777.216. Kemudian akan dilihat bagaimana menulis kode warna tersebut dalam CSS.
Pada CSS terdapat beberapa opsi penulisan warna. Berikut penjelasan penulisan koe warna dalam CSS tersebut.
Sebagai contoh untuk warna putih: digunakan kode #000000. Artinya untuk Red bernilai kosong, Green kosong dan Blue kosong. Maka di dapat warna putih. Kemudian contoh lain Misalkan untuk warna Merah , digunakan kode #FF0000. Digit R digunakan full, artinya warna merah full, GG dan BB kosong, sehingga jika dicampur jadi warna merah. Dengan begitu bisa ditebak untuk warna hijau dan biru. #00FF00, (digit merah ama biru kosong, digit hijau full). Biru : #0000FF.
Untuk warna lainnya maka akan digunakan kombinasi ini. Misalkan warna perak. Kode warna perah #777777. Artinya warna perak ini terbentuk dari warna merah, hijau biru level 7 yang dicampur.
Dengan penulisan 3 digit ini, juga sering digunakan pada warna putih (#000, berasal dari #000000) hitam (#fff berasal dari #ffffff), merah ( #f00 berasal dari #ff0000). Dalam penuliasan kode warna ini juga tidak sensitif dengan huruf kapital. Mau menggunakan huruf kapital atau tidak sama saja.
Terakhir untuk melihat penggunaan dan penulisan warna tersebut bisa dilihat pada contoh penulisan warna CSS di bawah ini. Silahkan dijalankan.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</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">
INI BIRU </p>
<br />
<p class="dua">
INI WARNA merah
</p>
<br />
<p class="tiga">
INI WARNA silver
</p>
<br />
<p class="empat">
INI WARNA orange
</p>
<br />
<p class="lima">
INI TRANSPARAN
</p>
</body>
</html>
Dari kode CSS yang diwarnai biru. Bisa dilihat beberapa cara penulisan kode warna dalam CSS. Untuk anda dipersilahkan menggunakan penulisan yang mana saja. Dan untuk kode warna tersebut tak usah dihafalkan. Bisa dilihat pada alamat website yang telah diberikan di atas.
Turunan dari 3 warna dasar tersebut dalam CSS melahirka 16.777.216 warna lainnya. Setiap warna dasar bernilai 0 sampai 255. Nilai 0 adalah tanpa warna dan 255 adalah warna dengan kepekatan maksimal. Dalam dunia komputer ini dikenal dengan true color atau 24 bit warna. Jika dihitung secara matematis perpaduan 3 warna tersebut : red 256 , green 256 dan blue 256 maka jika dipasangkan akan menjadi : redxbluexgreen = 256 x256 x 256 = 16.777.216. Kemudian akan dilihat bagaimana menulis kode warna tersebut dalam CSS.
Pada CSS terdapat beberapa opsi penulisan warna. Berikut penjelasan penulisan koe warna dalam CSS tersebut.
Penulisan warna 6 digit pada CSS #RRGGBB
Penulisan warna dengan cara ini paling banyak digunakan dalam CSS. RR menunjukan warna merah, GG menunjukkan warna hijau dan BB untuk warna biru. Ketiga warna tersebut dikombinasikan menjadi 6 digit. Dimulai dari 0 (kosong) hingga F (full). Dengan demikian ada 0-9, A-F digit yang bisa diacak sehingga semua warna ada 16x16 bentuk acakan = 256. Sesuai dengan semua warna tadi.Sebagai contoh untuk warna putih: digunakan kode #000000. Artinya untuk Red bernilai kosong, Green kosong dan Blue kosong. Maka di dapat warna putih. Kemudian contoh lain Misalkan untuk warna Merah , digunakan kode #FF0000. Digit R digunakan full, artinya warna merah full, GG dan BB kosong, sehingga jika dicampur jadi warna merah. Dengan begitu bisa ditebak untuk warna hijau dan biru. #00FF00, (digit merah ama biru kosong, digit hijau full). Biru : #0000FF.
Untuk warna lainnya maka akan digunakan kombinasi ini. Misalkan warna perak. Kode warna perah #777777. Artinya warna perak ini terbentuk dari warna merah, hijau biru level 7 yang dicampur.
Penulisan warna 3 digit pada CSS #RGB
Penulisan dengan rumus #RRGGBB tersebut bisa disingkat menjadi 3 digit saja. Formatnya menjadi #RGB. Sebagai contoh untuk misalkan #FF0077 bisa disingkat menjadi #F07. Format ini digunakan untuk warna yang sama dalam pasangan digitnya. Untuk jenis warna seperti #C0EF10, karena digit tidak berpasangan maka tidak bisa ditulis menjadi 3 digit.Dengan penulisan 3 digit ini, juga sering digunakan pada warna putih (#000, berasal dari #000000) hitam (#fff berasal dari #ffffff), merah ( #f00 berasal dari #ff0000). Dalam penuliasan kode warna ini juga tidak sensitif dengan huruf kapital. Mau menggunakan huruf kapital atau tidak sama saja.
Penulisan warna rgb(x,y,z) dalam CSS
Penulisan dengan cara ini adalah dengan menuliskan level'kepekatan' warna dalam kurung sebagai pengganti nilai x,y,z. Contoh untuk warna putih karena 'kosong' maka ditulis rgb(0,0,0). Untuk warna biru misalnya lagi, ditulis rgb(0,0,255). angka pertama menyatakan level warna red dalam campuran. Angka ke dua menyatakan level warna green dalam campuran. Dan angka ke tiga level untuk warna blue dalam campuran.
Jadi ketika menulis warna biru barusan ( rgb(0,0,255) artinya blue berada pada level penuh dan red dan green pada level 0. Format ini agak jarang digunakan dalam web design.
Penulisan warna CSS dengan Kata
Penulisan warna selanjutnya adalah dengan menggunakan kata kata. Kata kata untuk warna dasar yaitu aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, dan yellow dll.
Kata tersebut diambil dari warna warna elemen dasar pada VGA Windows. Istilah ini juga dikenal denagn classic internet color. Utuk lebih lengkap bisa dilihat nama warna tersebut di alamat :
https://developer.mozilla.org/en-US/docs/CSS/color_valueTerakhir untuk melihat penggunaan dan penulisan warna tersebut bisa dilihat pada contoh penulisan warna CSS di bawah ini. Silahkan dijalankan.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</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">
INI BIRU </p>
<br />
<p class="dua">
INI WARNA merah
</p>
<br />
<p class="tiga">
INI WARNA silver
</p>
<br />
<p class="empat">
INI WARNA orange
</p>
<br />
<p class="lima">
INI TRANSPARAN
</p>
</body>
</html>
Dari kode CSS yang diwarnai biru. Bisa dilihat beberapa cara penulisan kode warna dalam CSS. Untuk anda dipersilahkan menggunakan penulisan yang mana saja. Dan untuk kode warna tersebut tak usah dihafalkan. Bisa dilihat pada alamat website yang telah diberikan di atas.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment