CSS Color
Penambahan warna pada css bisa menggunakan tiga cara yaitu :
RGB/RGBA
HEX
HSL
RGB Merupakan singkatan dari red, green, blue dan RGBA Merupakan singkatan dari red, green, alpha. Kita bisa mengkobinasikan warna tersebut dan akan menghasilkan warna yang baru yang bisa kita gunakan. Bedanya RGB dan RGBA adalah pada RGBA kita bisa mengatur nilai transparan sebuah warna.
Cara menggunakan color RGB/RGBA pada CSS seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.box-rgb{
width: 500px;
height: 500px;
margin: 10px;
background-color: rgb(155, 190, 10);
}
.box-rgba{
width: 500px;
height: 500px;
margin: 10px;
background-color: rgba(155, 190, 10, 0.8);
}
</style>
<body>
<div class="box-rgb"></div>
<div class="box-rgba"></div>
</body>
</html>
Untuk mengatur warna rgb kita bisa mengaturnya dengan angka dengan nilai minimum 0 dan maximum 255 dan untuk alpha nilai minimum 0 dan maximum 1. Kita bisa mengatur nilai dengan menggunakan (.) sebagai tanda baca koma, sebagai rendah nilai alpha maka akan semakin transparan.
Color HEX merupakan warna yang kita gunakan dengan mengkobinasikan huruf dan bilangan desimal (bilangan bulat). Dengan jumlah minimal 6 dan maximal 8 karakter. Namun, kita tidak bisa sembarang memasukan huruf dan bilangan desimal dalam menggunakan color hex ini. Kita bisa gunakan website color pallet sebagai referensi dalam mencari color pallet HEX ini.
Untuk lebih jelasnya bisa kita lihat contoh kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.box-hex-1{
width: 500px;
height: 500px;
margin: 10px;
background-color: #af4567;
}
.box-hex-2{
width: 500px;
height: 500px;
margin: 10px;
background-color: #ba5000;
}
</style>
<body>
<div class="box-hex-1"></div>
<div class="box-hex-2"></div>
</body>
</html>
Color HSL/HSLA merupakan sinkatan dari hue, saturation, lightness dan HSLA singkatan dari sinkatan dari hue, saturation, lightness, alpha. Yang mana kita mengatur warnaya dengan menggunakan persen, dan untuk hue kita bisa mengatur nilai dari 0 sampai 360 dan untuk saturation dan lightness mulai dari 0% - 100% dan alpha untukmengatur nilai transparan sebuah warna dengan nilai minimum 0 - 1. Lihat contoh kode di bawah ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.box-hsl{
width: 500px;
height: 500px;
margin: 10px;
background-color: hsl(30, 100%, 50%);
}
.box-hsla{
width: 500px;
height: 500px;
margin: 10px;
background-color: hsla(0, 50%, 65%, 0.5);
}
</style>
<body>
<div class="box-hsl"></div>
<div class="box-hsla"></div>
</body>
</html>
Pada penggunaan cara membuat warna pada css ini tergantung kita lebih menyukai warna yang mana. Untuk melihat perbedaannya bisa kalian praktekan pada kode kalian, selamat belajar....