HTML - Warna RGB dan RGBA

Selamat datang, calon pengembang web! Hari ini, kita akan mendalam ke dunia berwarna-warna RGB dan RGBA di HTML. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk memandu Anda dalam perjalanan yang penuh warna ini. Mari kita catkan web dengan pengetahuan baru yang kita temukan!

Nilai Warna RGB

RGB berarti Merah, Hijau, dan Biru. Itu seperti memiliki tiga tabung cat ajaib yang, saat dicampur, dapat menciptakan setiap warna yang Anda bisa bayangkan di layar komputer Anda. Setiap warna diwakili oleh sebuah angka dari 0 hingga 255, di mana 0 berarti tidak ada warna itu dan 255 berarti jumlah maksimum.

Berikut adalah cara kita menggunakan RGB di HTML:

<p style="color: rgb(255, 0, 0);">Teks ini merah!</p>
<p style="color: rgb(0, 255, 0);">Teks ini hijau!</p>
<p style="color: rgb(0, 0, 255);">Teks ini biru!</p>

Dalam contoh ini:

• rgb(255, 0, 0) memberikan warna merah murni
• rgb(0, 255, 0) memberikan warna hijau murni
• rgb(0, 0, 255) memberikan warna biru murni

Tapi keajaiban sebenarnya terjadi saat kita mencampur nilai-nilai ini:

<p style="color: rgb(128, 0, 128);">Teks ini ungu!</p>
<p style="color: rgb(255, 165, 0);">Teks ini oranye!</p>
<p style="color: rgb(0, 128, 128);">Teks ini biru laut!</p>

Apakah ini menarik bagaimana kita dapat menciptakan warna-warna berbeda hanya dengan mengubah angka-angka? Itu seperti menjadi seorang seniman digital!

Nilai Warna RGBA

Sekarang, mari kita menambahkan sentuhan mistis ke warna kita dengan RGBA. Huruf 'A' berarti Alpha, yang mengontrol keopakannya warna kita. Itu seperti memiliki tabung cat keempat yang dapat membuat warna kita tampak transparan!

Nilai Alpha berada dalam kisaran dari 0 (completely transparent) hingga 1 (completely opaque).

mari kita lihat contohnya:

<div style="background-color: rgba(255, 0, 0, 0.5); padding: 20px;">
Kotak ini memiliki latar belakang merah semi-transparan!
</div>
<div style="background-color: rgba(0, 0, 255, 0.3); padding: 20px;">
Kotak ini memiliki latar belakang biru yang lebih transparan!
</div>

Dalam contoh ini:

• rgba(255, 0, 0, 0.5) memberikan warna merah 50% transparan
• rgba(0, 0, 255, 0.3) memberikan warna biru 70% transparan

Nilai Alpha sangat berguna untuk menciptakan overlay, latar belakang halus, dan efek lainnya!

Perbandingan Warna RGB & RGBA

mari kita bandingkan RGB dan RGBA bersamaan untuk melihat perbedaannya:

<table style="width:100%; border-collapse: collapse;">
<tr>
<th style="border: 1px solid hitam; padding: 10px;">RGB</th>
<th style="border: 1px solid hitam; padding: 10px;">RGBA</th>
</tr>
<tr>
<td style="border: 1px solid hitam; padding: 10px; background-color: rgb(255, 0, 0);">Merah</td>
<td style="border: 1px solid hitam; padding: 10px; background-color: rgba(255, 0, 0, 0.5);">Merah Semi-transparan</td>
</tr>
<tr>
<td style="border: 1px solid hitam; padding: 10px; background-color: rgb(0, 255, 0);">Hijau</td>
<td style="border: 1px solid hitam; padding: 10px; background-color: rgba(0, 255, 0, 0.5);">Hijau Semi-transparan</td>
</tr>
<tr>
<td style="border: 1px solid hitam; padding: 10px; background-color: rgb(0, 0, 255);">Biru</td>
<td style="border: 1px solid hitam; padding: 10px; background-color: rgba(0, 0, 255, 0.5);">Biru Semi-transparan</td>
</tr>
</table>

Seperti yang Anda lihat, RGBA memungkinkan kita untuk menciptakan versi semi-transparan warna kita, menambahkan kedalaman dan dimensi ke desain kita.

Contoh Warna RGB dan RGBA di HTML

Sekarang, mari kita bersenang-senang dengan proyek mini! Kita akan menciptakan "palet warna" sederhana menggunakan baik RGB dan RGBA:

<div style="display: flex; flex-wrap: wrap;">
<div style="width: 100px; height: 100px; background-color: rgb(255, 105, 180); margin: 10px;">
Pink Panas
</div>
<div style="width: 100px; height: 100px; background-color: rgb(64, 224, 208); margin: 10px;">
Turquoise
</div>
<div style="width: 100px; height: 100px; background-color: rgb(255, 215, 0); margin: 10px;">
Emas
</div>
<div style="width: 100px; height: 100px; background-color: rgba(128, 0, 128, 0.5); margin: 10px;">
Ungu Semi-transparan
</div>
<div style="width: 100px; height: 100px; background-color: rgba(0, 128, 0, 0.7); margin: 10px;">
Hijau Semi-transparan
</div>
</div>

Dalam contoh ini, kita telah menciptakan sebuah kontainer flex dengan lima kotak warna. Tiga pertama menggunakan warna RGB, sedangkan yang terakhir menggunakan RGBA untuk menciptakan efek semi-transparan.

Ingat, kunci untuk menguasai RGB dan RGBA adalah latihan dan eksperimen. Jangan takut untuk memainkan nilai-nilai berbeda dan lihat apa yang terjadi!

Berikut adalah tabel praktis dari nilai warna RGB umum:

Nama Warna	Nilai RGB
Merah	rgb(255, 0, 0)
Hijau	rgb(0, 255, 0)
Biru	rgb(0, 0, 255)
Kuning	rgb(255, 255, 0)
Cyan	rgb(0, 255, 255)
Magenta	rgb(255, 0, 255)
Putih	rgb(255, 255, 255)
Hitam	rgb(0, 0, 0)

Dan itu adalah perjalanan berwarna kita melalui RGB dan RGBA di HTML! Ingat, setiap desainer web yang hebat dimulai tepat di tempat Anda sekarang. Terus latihan, terus eksperimen, dan segera Anda akan mencat web dengan warna seperti seorang pro. Selamat coding, seniman web masa depan!

Credits: Image by storyset