Nilai RGB adalah nilai warna yang berdasarkan campuran 3 warna dasar yaitu Red (merah), Green (hijau), dan Blue (biru) yang disingkat RGB.
Nilai RGBA adalah nilai warna yang berdasarkan campuran 3 warna dasar yaitu Red (merah), Green (hijau), dan Blue (biru) ditambah Alpha atau transparansi yang disingkat RGBA.
rgb(red, green, blue)
rgba(red, green, blue, alpha)
Masing-masing nilai warna berada pada rentang nilai 0 sampai 255, dengan nilai nol untuk warna hitam, yang artinya hanya warna hitam yang muncul dan makin besar nilainya maka makin solid warnanya dan nilai 255 artinya warnanya full sesuai dengan warnanya (red untuk merah, green untuk hijau dan blue untuk biru).
Red
Mengatur nilai kepadatan warna merah, makin kecil nilainya maka warnanya makin gelap, dengan nilai nol hanya akan menampilkan warna hitam dan makin besar nilainya maka warna merahnya makin dominan dan nilai 255 artinya warna merah full.
rgb(0, 0, 0) akan menampilkan warna hitam.
rgb(125, 0, 0) akan menampilkan warna merah kehitaman.
rgb(255, 0, 0) akan menampilkan warna merah.
Green
Mengatur nilai kepadatan warna hijau, makin kecil nilainya maka warnanya makin gelap, dengan nilai nol hanya akan menampilkan warna hitam dan makin besar nilainya maka warna hijaunya makin dominan dan nilai 255 artinya warna hijau full.
rgb(0, 0, 0) akan menampilkan warna hitam.
rgb(0, 125, 0) akan menampilkan warna hijau kehitaman.
rgb(0, 255, 0) akan menampilkan warna hijau.
Blue
Mengatur nilai kepadatan warna biru, makin kecil nilainya maka warnanya makin gelap, dengan nilai nol hanya akan menampilkan warna hitam dan makin besar nilainya maka warna birunya makin dominan dan nilai 255 artinya warna biru full.
rgb(0, 0, 0) akan menampilkan warna hitam.
rgb(0, 0, 125) akan menampilkan warna biru kehitaman.
rgb(0, 0, 255) akan menampilkan warna biru.
Apha
Nilai alpha adalah nilai tranparansi dengan rentang nilai 0 sampai 1, makin besar nilainya maka makin solid dan makin kecil nilainya maka makin transparan.
Nilai 0 artinya warna dengan nilai trasparansi full yaitu tidak terlihat.
Nilai 0.5 artinya warna dengan nilai trasparansi setengah.
Nilai 1 artinya warna solid full tanpa trasparansi.
Perhatikan contoh berikut untuk lebih jelasnya.
<!DOCTYPE html>
<html>
<head>
<title>Warna CSS dengan RGB dan RGBA</title>
</head>
<body>
<h1 style="color:rgb(255,255,0);">Judul Dengan Warna Teks</h1>
<h1 style="background-color:rgb(0,0,255);">Judul Dengan Warna Latar</h1>
<h1 style="background-color:rgba(0,0,255,0.5);">Judul Dengan Warna Latar Transparan 50%</h1>
<h1 style="border:2px solid rgb(255,0,0);">Judul Dengan Border</h1>
<h1 style="color:rgb(255,255,0);background-color:rgb(0,0,255);">Judul Dengan Warna Teks dan Latar</h1>
<h1 style="color:rgb(255,255,0);background-color:rgb(0,0,255);border:2px solid rgb(255,0,0);">Judul Dengan Warna Teks, Latar dan Border</h1>
</body>
</html>
Contoh diatas bila dilihat pada browser akan didapat hasil seperti berikut.
