Mengenal CSS RGB Colors: RGB dan RGBA Value (Tutorial CSS Part 7)
 |
| Gambar 7.0 : Logo CSS |
Kalau kamu lagi belajar CSS dan pengen main-main sama warna, pasti bakal ketemu yang namanya RGB dan RGBA. Nah, artikel ini bakal bantu kamu ngerti apa itu RGB dan RGBA di CSS, plus gimana cara pakainya. Santai aja bacanya, karena kita bahasnya gak pakai bahasa kaku.
1. Apa Itu RGB Value?
RGB adalah singkatan dari Red, Green, Blue. Jadi, warna-warna di layar komputer atau website itu sebenernya campuran dari tiga warna dasar ini. Di CSS, kita bisa atur seberapa banyak merah, hijau, dan biru yang mau kita pakai buat bikin satu warna.
Format penulisannya kayak gini:
color: rgb(255, 0, 0);
Artinya:
- Merah: 255 (maksimum)
- Hijau: 0
- Biru: 0
Hasilnya? Warna merah solid!
Nilai untuk masing-masing warna bisa dari 0 sampai 255. Makin besar angkanya, makin terang warnanya. Misalnya:
color: rgb(0, 255, 0); /* Hijau terang */
color: rgb(0, 0, 255); /* Biru terang */
color: rgb(128, 0, 128); /* Ungu */
Kalau mau warna abu-abu? Tinggal samakan ketiga nilainya:
color: rgb(100, 100, 100); /* Abu-abu gelap */
color: rgb(200, 200, 200); /* Abu-abu terang */
Contoh lengkap menggunakan internal CSS:
<!DOCTYPE html>
<html>
<head>
<title>Contoh RGB</title>
<style>
/* CSS */
.merah {
color: rgb(255, 0, 0);
}
.hijau {
color: rgb(0, 255, 0);
}
.biru {
color: rgb(0, 0, 255);
}
.ungu {
color: rgb(128, 0, 128);
}
.abu-gelap {
color: rgb(100, 100, 100);
}
.abu-terang {
color: rgb(200, 200, 200);
}
</style>
</head>
<body>
<h2 class="merah">Ini teks merah (rgb)</h2>
<h2 class="hijau">Ini teks hijau (rgb)</h2>
<h2 class="biru">Ini teks biru (rgb)</h2>
<h2 class="ungu">Ini teks ungu (rgb)</h2>
<h2 class="abu-gelap">Ini abu-abu gelap (rgb)</h2>
<h2 class="abu-terang">Ini abu-abu terang (rgb)</h2>
</body>
</html>
Hasilnya:
 |
| Gambar 7.1 : Contoh CSS nilai RGB |
2. Apa Itu RGBA Value?
Nah, sekarang kenalan juga sama RGBA. Bedanya sama RGB, yang satu ini punya tambahan huruf “A” di belakang.
A itu singkatan dari Alpha, alias tingkat transparansi atau kejelasan warna.
Formatnya:
color: rgba(255, 0, 0, 0.5);
Artinya:
- Merah: 255
- Hijau: 0
- Biru: 0
- Alpha: 0.5 (setengah transparan)
Nilai alpha itu mulai dari 0 (benar-benar transparan) sampai 1 (benar-benar solid). Contoh lain:
color: rgba(0, 0, 0, 0.1); /* Hitam samar-samar */
color: rgba(0, 255, 0, 0.8); /* Hijau hampir solid */
RGBA ini berguna banget kalau kamu mau bikin efek lapisan, bayangan transparan, atau overlay di atas gambar.
Contoh lengkap menggunakan internal CSS:
<!DOCTYPE html>
<html>
<head>
<title>Contoh RGBA</title>
<style>
.box {
width: 200px;
height: 100px;
margin: 10px;
padding: 20px;
color: white;
font-weight: bold;
}
.transparan-merah {
background-color: rgba(255, 0, 0, 0.5);
}
.transparan-hijau {
background-color: rgba(0, 255, 0, 0.7);
}
.samar-hitam {
background-color: rgba(0, 0, 0, 0.1);
color: black;
}
</style>
</head>
<body>
<div class="box transparan-merah">Merah transparan (rgba)</div>
<div class="box transparan-hijau">Hijau transparan (rgba)</div>
<div class="box samar-hitam">Hitam samar-samar (rgba)</div>
</body>
</html>Hasilnya:
 |
| Gambar 7.2 : Contoh CSS nilai RGBA |
Kesimpulan
- RGB buat atur warna berdasarkan campuran merah, hijau, dan biru.
- RGBA itu RGB + alpha, jadi bisa atur tingkat transparansinya juga.
- Nilai RGB dari 0–255, sedangkan Alpha dari 0–1.
- Pakainya gampang dan fleksibel, cocok buat bikin desain web yang keren.
Yuk, coba eksplor sendiri dan mainkan warna-warna di proyek CSS kamu. Siapa tahu jadi jago desain web cuma gara-gara ngerti RGB dan RGBA!
Kalau kamu suka artikel kayak gini, tinggal bilang aja. Bisa lanjut ke topik warna lain kayak HSL, HEX, atau tips bikin tema warna kece.
Posting Komentar untuk "Mengenal CSS RGB Colors: RGB dan RGBA Value (Tutorial CSS Part 7)"