Cara Mengatur Warna dengan RGB dan RGBA di CSS

Halo teman-teman!

Setelah sebelumnya kita mengenal berbagai cara menggunakan warna di CSS, sekarang kita akan lebih fokus ke satu format warna yang sering banget dipakai dalam desain modern — yaitu RGB dan RGBA.

Kalau kamu ingin punya kontrol lebih dalam menentukan warna, terutama yang nyambung ke transparansi dan efek visual, maka RGB dan RGBA ini wajib kamu kuasai!

Apa Itu Warna RGB di CSS?

RGB adalah singkatan dari Red, Green, Blue. Kamu bisa membuat hampir semua warna hanya dengan mencampur tiga warna dasar ini. Format penulisannya di CSS seperti ini:

rgb(merah, hijau, biru)

Setiap nilai warna bisa berkisar dari 0 sampai 255. Contoh:

h1 {
  color: rgb(255, 0, 0); /* merah */
}

p {
  background-color: rgb(0, 255, 0); /* hijau */
}

Apa Itu RGBA dan Kenapa Penting?

RGBA adalah versi lanjutan dari RGB yang punya tambahan nilai keempat, yaitu alpha. Nilai alpha menentukan tingkat transparansi elemen — dari 0 (benar-benar transparan) sampai 1 (benar-benar solid).

Formatnya:

rgba(merah, hijau, biru, transparansi)

Contoh:

.box {
  background-color: rgba(0, 0, 255, 0.5); /* biru transparan */
}

Dengan RGBA, kamu bisa bikin efek seperti overlay, bayangan, atau highlight yang lebih lembut dan modern.

Kapan Harus Pakai RGB atau RGBA?

• Gunakan RGB kalau kamu ingin warna solid tanpa efek transparan

• Gunakan RGBA saat kamu ingin elemen tampil transparan atau semi-transparan

Contohnya:

• Overlay pada gambar

• Tombol hover dengan efek fade

• Box highlight yang nggak nutup seluruh background

Tips Memilih Warna RGB dan RGBA

• Kalau kamu sudah punya warna hex tapi pengen pakai RGB, kamu bisa konversi dengan tools seperti rgbtohex.net

• Gunakan nilai alpha antara 0.1 sampai 0.6 untuk efek transparan yang lembut

• Pastikan warna tetap terbaca, terutama saat dipakai di atas background berwarna

Contoh Kombinasi RGB dan RGBA

.card {
  background-color: rgba(255, 255, 255, 0.8);
  color: rgb(50, 50, 50);
  border: 1px solid rgb(200, 200, 200);
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

Kombinasi ini sering banget dipakai di UI modern — tampilan bersih, terang, dan sedikit transparansi untuk efek lapisan.

Yuk Coba Sendiri!

Sekarang giliran kamu eksperimen pakai RGB dan RGBA di file CSS kamu. Coba ubah warna teks, latar belakang, atau tambahkan efek overlay. Lihat perbedaan antara warna solid dan warna transparan. Seru banget buat eksplorasi!

Di materi selanjutnya, kita akan bahas format warna lainnya yaitu kode hex di CSS. Format ini juga penting banget dan sering digunakan bareng RGB dan RGBA.

Baca juga