HTML -Warna RGB dan RGBA

Selamat datang, para pengembang web yang sedang berkembang! Hari ini, kita akan masuk 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 cati 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, bisa menciptakan setiap warna yang Anda bisa bayangkan di layar komputer Anda. Setiap warna direpresentasikan oleh sebuah nomor dari 0 hingga 255, di mana 0 berarti tanpa warna itu dan 255 berarti jumlah maksimum.

Berikut 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 kita merah murni
• rgb(0, 255, 0) memberikan kita hijau murni
• rgb(0, 0, 255) memberikan kita biru murni

Tapi keajaiban sebenarnya terjadi saat kita mencampur 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 bisa menciptakan warna yang 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 bisa membuat warna kita tampak transparan!

Nilai Alpha berada dalam kisaran dari 0 (tepat透视) hingga 1 (tepat opak).

mari kita lihatnya dalam aksi:

<div style="background-color: rgba(255, 0, 0, 0.5); padding: 20px;">
Kotak ini memiliki latar belakang merah setengah 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 kita merah 50% transparan
• rgba(0, 0, 255, 0.3) memberikan kita biru 70% transparan

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

Perbandingan Warna RGB dan RGBA

mari kita bandingkan RGB dan RGBA bersamaan untuk melihat perbedaan:

<table style="width:100%; border-collapse: collapse;">
<tr>
<th style="border: 1px solid black; padding: 10px;">RGB</th>
<th style="border: 1px solid black; padding: 10px;">RGBA</th>
</tr>
<tr>
<td style="border: 1px solid black; padding: 10px; background-color: rgb(255, 0, 0);">Merah</td>
<td style="border: 1px solid black; padding: 10px; background-color: rgba(255, 0, 0, 0.5);">Merah Setengah Transparan</td>
</tr>
<tr>
<td style="border: 1px solid black; padding: 10px; background-color: rgb(0, 255, 0);">Hijau</td>
<td style="border: 1px solid black; padding: 10px; background-color: rgba(0, 255, 0, 0.5);">Hijau Setengah Transparan</td>
</tr>
<tr>
<td style="border: 1px solid black; padding: 10px; background-color: rgb(0, 0, 255);">Biru</td>
<td style="border: 1px solid black; padding: 10px; background-color: rgba(0, 0, 255, 0.5);">Biru Setengah 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 HTML RGB dan RGBA

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 Setengah Transparan
</div>
<div style="width: 100px; height: 100px; background-color: rgba(0, 128, 0, 0.7); margin: 10px;">
Hijau Setengah Transparan
</div>
</div>

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

Ingat, kunci untuk menguasai RGB dan RGBA adalah latihan dan eksperimen. Jangan takut untuk memainkan nilai yang 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, para seniman web masa depan!

Credits: Image by storyset