Warna RGBA (Red Green Blue Alpha) merupakan perluasan warna dari warna RGB, sedangkan warna RGB (Red Green Blue) sendiri merupakan penamaan warna additive yang berpatokan pada campuran warna merah (red), warna hijau(green) dan warna biru (blue). Jadi warna RGBA merupakan warna RGB dengan tambahan berupa parameter Alpha yang berfungsi sebagai pengatur tingkat transparansi atau opacity pada warna RGB.
Nilai terendah dari parameter Alpha adalah "0.0" atau zero opacity dan nilai tertingginya adalah "1.0" atau full opacity. Misalnya pada warna merah (rgb(255,0,0)), jika menginginkan warna merah dengan tingkat kepekatan warna merah normal menggunakan nilai parameter Alpha berupa "1.0" dan untuk tingkat kepekatan yang rendah dapat menggunakan parameter Alpha dengan nilai "0.1 -0.5".
RGBA(255, 69, 0, 1.0)
RGBA(255, 69, 0, 0.75)
RGBA(255, 69, 0, 0.5)
RGBA(255, 69, 0, 0.25)
RGB(34, 139, 34, 1.0)
RGB(34, 139, 34, 0.75)
RGB(34, 139, 34, 0.5)
RGB(34, 139, 34, 0.25)
Metode Penulisan
Contoh penulisan warna RGBA pada style sheet CSS :
CSS
1
2
Previous Pageelemen {color: rgba(255,0,0,0.3);}
elemen {color: rgba(255,0,255,0.3);}
Contoh di bawah ini menggunakan warna RGBA pada warna merah dengan nilai opacity atau Alpha dari 0.1 sampai dengan 1.0 :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan Warna RGBA Pada HTML</title>
<style>
.paragraf_1,.paragraf_2,.paragraf_3,.paragraf_4,.paragraf_5,.paragraf_6,.paragraf_7,.paragraf_8,.paragraf_9,.paragraf_10{
border:solid 1px blue;
margin:10px;
padding:10px;
}
.paragraf_1{background-color:rgba(255,0,0,0.1);}
.paragraf_2{background-color:rgba(255,0,0,0.2);}
.paragraf_3{background-color:rgba(255,0,0,0.3);}
.paragraf_4{background-color:rgba(255,0,0,0.4);}
.paragraf_5{background-color:rgba(255,0,0,0.5);}
.paragraf_6{background-color:rgba(255,0,0,0.6);}
.paragraf_7{background-color:rgba(255,0,0,0.7);}
.paragraf_8{background-color:rgba(255,0,0,0.8);}
.paragraf_9{background-color:rgba(255,0,0,0.9);}
.paragraf_10{background-color:rgba(255,0,0,0);}
</style>
</head>
<body>
<h3>Belajar Menggunakan Warna RGBA Pada HTML</h3>
<p class="paragraf_1">Ini adalah paragraf pertama, menggunakan "background-color:rgba(255,0,0,0.1);".</p>
<p class="paragraf_2">Ini adalah paragraf kedua, menggunakan "background-color:rgba(255,0,0,0.2);".</p>
<p class="paragraf_3">Ini adalah paragraf ketiga, menggunakan "background-color:rgba(255,0,0,0.3);".</p>
<p class="paragraf_4">Ini adalah paragraf keempat, menggunakan "background-color:rgba(255,0,0,0.4);".</p>
<p class="paragraf_5">Ini adalah paragraf kelima, menggunakan "background-color:rgba(255,0,0,0.5);".</p>
<p class="paragraf_6">Ini adalah paragraf keenam, menggunakan "background-color:rgba(255,0,0,0.6);".</p>
<p class="paragraf_7">Ini adalah paragraf ketujuh, menggunakan "background-color:rgba(255,0,0,0.7);".</p>
<p class="paragraf_8">Ini adalah paragraf kedelapan, menggunakan "background-color:rgba(255,0,0,0.8);".</p>
<p class="paragraf_9">Ini adalah paragraf kesembilan, menggunakan "background-color:rgba(255,0,0,0.9);".</p>
<p class="paragraf_10">Ini adalah paragraf kesepuluh, menggunakan "background-color:rgba(255,0,0,0);".</p>
</body>
</html>
Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :
Cari Warna RGBA (Red Green Blue Alpha)
Masukkan Warna (RGBA Color) :
RGBA (Red Green Blue Alpha) Color Picker
Klik untuk menampilkan picker :
Daftar Warna RGBA (Red Green Blue Alpha)
Berikut ini daftar warna RGBA (Red Green Blue Alpha) :
rgba(240, 15, 255, 0.5)
rgba(240, 15, 255, 0.75)
rgba(240, 15, 255, 1.0)
rgba(250, 174, 215, 0.5)
rgba(250, 174, 215, 0.75)
rgba(250, 174, 215, 1.0)
rgba(0, 15, 255, 0.5)
rgba(0, 15, 255, 0.75)
rgba(0, 15, 255, 1.0)
rgba(127, 255, 212, 0.5)
rgba(127, 255, 212, 0.75)
rgba(127, 255, 212, 1.0)
rgba(240, 15, 255, 0.5)
rgba(240, 15, 255, 0.75)
rgba(240, 15, 255, 1.0)
rgba(245, 95, 220, 0.5)
rgba(245, 95, 220, 0.75)
rgba(245, 95, 220, 1.0)
rgba(0, 0, 255, 0.5)
rgba(0, 0, 255, 0.75)
rgba(0, 0, 255, 1.0)
rgba(138, 162, 226, 0.5)
rgba(138, 162, 226, 0.75)
rgba(138, 162, 226, 1.0)
rgba(229, 82, 42, 0.5)
rgba(229, 82, 42, 0.75)
rgba(229, 82, 42, 1.0)
rgba(222, 235, 135, 0.5)
rgba(222, 235, 135, 0.75)
rgba(222, 235, 135, 1.0)
rgba(95, 249, 160, 0.5)
rgba(95, 249, 160, 0.75)
rgba(95, 249, 160, 1.0)
rgba(127, 255, 0, 0.5)
rgba(127, 255, 0, 0.75)
rgba(127, 255, 0, 1.0)
rgba(210, 38, 30, 0.5)
rgba(210, 38, 30, 0.75)
rgba(210, 38, 30, 1.0)
rgba(255, 247, 80, 0.5)
rgba(255, 247, 80, 0.75)
rgba(255, 247, 80, 1.0)
rgba(100, 73, 237, 0.5)
rgba(100, 73, 237, 0.75)
rgba(100, 73, 237, 1.0)
rgba(220, 193, 60, 0.5)
rgba(220, 193, 60, 0.75)
rgba(220, 193, 60, 1.0)
rgba(0, 0, 139, 0.5)
rgba(0, 0, 139, 0.75)
rgba(0, 0, 139, 1.0)
rgba(0, 8, 139, 0.5)
rgba(0, 8, 139, 0.75)
rgba(0, 8, 139, 1.0)
rgba(184, 136, 169, 0.5)
rgba(184, 136, 169, 0.75)
rgba(184, 136, 169, 1.0)
rgba(189, 219, 107, 0.5)
rgba(189, 219, 107, 0.75)
rgba(189, 219, 107, 1.0)
rgba(139, 176, 139, 0.5)
rgba(139, 176, 139, 0.75)
rgba(139, 176, 139, 1.0)
rgba(85, 86, 47, 0.5)
rgba(85, 86, 47, 0.75)
rgba(85, 86, 47, 1.0)
rgba(255, 248, 0, 0.5)
rgba(255, 248, 0, 0.75)
rgba(255, 248, 0, 1.0)
rgba(153, 147, 204, 0.5)
rgba(153, 147, 204, 0.75)
rgba(153, 147, 204, 1.0)
rgba(139, 176, 0, 0.5)
rgba(139, 176, 0, 0.75)
rgba(139, 176, 0, 1.0)
rgba(233, 153, 122, 0.5)
rgba(233, 153, 122, 0.75)
rgba(233, 153, 122, 1.0)
rgba(143, 251, 143, 0.5)
rgba(143, 251, 143, 0.75)
rgba(143, 251, 143, 1.0)
rgba(72, 131, 139, 0.5)
rgba(72, 131, 139, 0.75)
rgba(72, 131, 139, 1.0)
rgba(47, 244, 79, 0.5)
rgba(47, 244, 79, 0.75)
rgba(47, 244, 79, 1.0)
rgba(0, 12, 209, 0.5)
rgba(0, 12, 209, 0.75)
rgba(0, 12, 209, 1.0)
rgba(146, 32, 211, 0.5)
rgba(146, 32, 211, 0.75)
rgba(146, 32, 211, 1.0)
rgba(255, 241, 147, 0.5)
rgba(255, 241, 147, 0.75)
rgba(255, 241, 147, 1.0)
rgba(0, 11, 255, 0.5)
rgba(0, 11, 255, 0.75)
rgba(0, 11, 255, 1.0)
rgba(105, 150, 105, 0.5)
rgba(105, 150, 105, 0.75)
rgba(105, 150, 105, 1.0)
rgba(30, 233, 255, 0.5)
rgba(30, 233, 255, 0.75)
rgba(30, 233, 255, 1.0)
rgba(210, 36, 68, 0.5)
rgba(210, 36, 68, 0.75)
rgba(210, 36, 68, 1.0)
rgba(34, 40, 34, 0.5)
rgba(34, 40, 34, 0.75)
rgba(34, 40, 34, 1.0)
rgba(245, 95, 245, 0.5)
rgba(245, 95, 245, 0.75)
rgba(245, 95, 245, 1.0)
rgba(220, 205, 220, 0.5)
rgba(220, 205, 220, 0.75)
rgba(220, 205, 220, 1.0)
rgba(248, 143, 255, 0.5)
rgba(248, 143, 255, 0.75)
rgba(248, 143, 255, 1.0)
rgba(173, 223, 47, 0.5)
rgba(173, 223, 47, 0.75)
rgba(173, 223, 47, 1.0)
rgba(240, 15, 240, 0.5)
rgba(240, 15, 240, 0.75)
rgba(240, 15, 240, 1.0)
rgba(255, 246, 180, 0.5)
rgba(255, 246, 180, 0.75)
rgba(255, 246, 180, 1.0)
rgba(220, 197, 92, 0.5)
rgba(220, 197, 92, 0.75)
rgba(220, 197, 92, 1.0)
rgba(242, 32, 130, 0.5)
rgba(242, 32, 130, 0.75)
rgba(242, 32, 130, 1.0)
rgba(240, 14, 140, 0.5)
rgba(240, 14, 140, 0.75)
rgba(240, 14, 140, 1.0)
rgba(230, 110, 250, 0.5)
rgba(230, 110, 250, 0.75)
rgba(230, 110, 250, 1.0)
rgba(240, 15, 255, 0.5)
rgba(240, 15, 255, 0.75)
rgba(240, 15, 255, 1.0)
rgba(124, 207, 0, 0.5)
rgba(124, 207, 0, 0.75)
rgba(124, 207, 0, 1.0)
rgba(173, 221, 230, 0.5)
rgba(173, 221, 230, 0.75)
rgba(173, 221, 230, 1.0)
rgba(240, 8, 128, 0.5)
rgba(240, 8, 128, 0.75)
rgba(240, 8, 128, 1.0)
rgba(224, 15, 255, 0.5)
rgba(224, 15, 255, 0.75)
rgba(224, 15, 255, 1.0)
rgba(250, 175, 210, 0.5)
rgba(250, 175, 210, 0.75)
rgba(250, 175, 210, 1.0)
rgba(211, 61, 211, 0.5)
rgba(211, 61, 211, 0.75)
rgba(211, 61, 211, 1.0)
rgba(144, 14, 144, 0.5)
rgba(144, 14, 144, 0.75)
rgba(144, 14, 144, 1.0)
rgba(32, 11, 170, 0.5)
rgba(32, 11, 170, 0.75)
rgba(32, 11, 170, 1.0)
rgba(135, 124, 250, 0.5)
rgba(135, 124, 250, 0.75)
rgba(135, 124, 250, 1.0)
rgba(119, 120, 153, 0.5)
rgba(119, 120, 153, 0.75)
rgba(119, 120, 153, 1.0)
rgba(176, 12, 222, 0.5)
rgba(176, 12, 222, 0.75)
rgba(176, 12, 222, 1.0)
rgba(250, 175, 230, 0.5)
rgba(250, 175, 230, 0.75)
rgba(250, 175, 230, 1.0)
rgba(128, 0, 0, 0.5)
rgba(128, 0, 0, 0.75)
rgba(128, 0, 0, 1.0)
rgba(102, 108, 170, 0.5)
rgba(102, 108, 170, 0.75)
rgba(102, 108, 170, 1.0)
rgba(0, 0, 205, 0.5)
rgba(0, 0, 205, 0.75)
rgba(0, 0, 205, 1.0)
rgba(186, 165, 211, 0.5)
rgba(186, 165, 211, 0.75)
rgba(186, 165, 211, 1.0)
rgba(147, 55, 216, 0.5)
rgba(147, 55, 216, 0.75)
rgba(147, 55, 216, 1.0)
rgba(60, 203, 113, 0.5)
rgba(60, 203, 113, 0.75)
rgba(60, 203, 113, 1.0)
rgba(123, 182, 238, 0.5)
rgba(123, 182, 238, 0.75)
rgba(123, 182, 238, 1.0)
rgba(0, 15, 154, 0.5)
rgba(0, 15, 154, 0.75)
rgba(0, 15, 154, 1.0)
rgba(72, 141, 204, 0.5)
rgba(72, 141, 204, 0.75)
rgba(72, 141, 204, 1.0)
rgba(199, 113, 133, 0.5)
rgba(199, 113, 133, 0.75)
rgba(199, 113, 133, 1.0)
rgba(25, 145, 112, 0.5)
rgba(25, 145, 112, 0.75)
rgba(25, 145, 112, 1.0)
rgba(245, 95, 250, 0.5)
rgba(245, 95, 250, 0.75)
rgba(245, 95, 250, 1.0)
rgba(255, 254, 181, 0.5)
rgba(255, 254, 181, 0.75)
rgba(255, 254, 181, 1.0)
rgba(255, 253, 173, 0.5)
rgba(255, 253, 173, 0.75)
rgba(255, 253, 173, 1.0)
rgba(245, 93, 179, 0.5)
rgba(245, 93, 179, 0.75)
rgba(245, 93, 179, 1.0)
rgba(0, 0, 128, 0.5)
rgba(0, 0, 128, 0.75)
rgba(0, 0, 128, 1.0)
rgba(128, 8, 0, 0.5)
rgba(128, 8, 0, 0.75)
rgba(128, 8, 0, 1.0)
rgba(107, 184, 35, 0.5)
rgba(107, 184, 35, 0.75)
rgba(107, 184, 35, 1.0)
rgba(218, 167, 214, 0.5)
rgba(218, 167, 214, 0.75)
rgba(218, 167, 214, 1.0)
rgba(152, 143, 152, 0.5)
rgba(152, 143, 152, 0.75)
rgba(152, 143, 152, 1.0)
rgba(175, 254, 238, 0.5)
rgba(175, 254, 238, 0.75)
rgba(175, 254, 238, 1.0)
rgba(216, 135, 147, 0.5)
rgba(216, 135, 147, 0.75)
rgba(216, 135, 147, 1.0)
rgba(205, 216, 63, 0.5)
rgba(205, 216, 63, 0.75)
rgba(205, 216, 63, 1.0)
rgba(221, 218, 221, 0.5)
rgba(221, 218, 221, 0.75)
rgba(221, 218, 221, 1.0)
rgba(176, 14, 230, 0.5)
rgba(176, 14, 230, 0.75)
rgba(176, 14, 230, 1.0)
rgba(128, 0, 128, 0.5)
rgba(128, 0, 128, 0.75)
rgba(128, 0, 128, 1.0)
rgba(255, 240, 0, 0.5)
rgba(255, 240, 0, 0.75)
rgba(255, 240, 0, 1.0)
rgba(188, 200, 143, 0.5)
rgba(188, 200, 143, 0.75)
rgba(188, 200, 143, 1.0)
rgba(65, 22, 225, 0.5)
rgba(65, 22, 225, 0.75)
rgba(65, 22, 225, 1.0)
rgba(139, 180, 19, 0.5)
rgba(139, 180, 19, 0.75)
rgba(139, 180, 19, 1.0)
rgba(250, 168, 114, 0.5)
rgba(250, 168, 114, 0.75)
rgba(250, 168, 114, 1.0)
rgba(244, 74, 96, 0.5)
rgba(244, 74, 96, 0.75)
rgba(244, 74, 96, 1.0)
rgba(46, 232, 87, 0.5)
rgba(46, 232, 87, 0.75)
rgba(46, 232, 87, 1.0)
rgba(160, 5, 45, 0.5)
rgba(160, 5, 45, 0.75)
rgba(160, 5, 45, 1.0)
rgba(192, 12, 192, 0.5)
rgba(192, 12, 192, 0.75)
rgba(192, 12, 192, 1.0)
rgba(135, 124, 235, 0.5)
rgba(135, 124, 235, 0.75)
rgba(135, 124, 235, 1.0)
rgba(106, 165, 205, 0.5)
rgba(106, 165, 205, 0.75)
rgba(106, 165, 205, 1.0)
rgba(112, 8, 144, 0.5)
rgba(112, 8, 144, 0.75)
rgba(112, 8, 144, 1.0)
rgba(0, 15, 127, 0.5)
rgba(0, 15, 127, 0.75)
rgba(0, 15, 127, 1.0)
rgba(70, 104, 180, 0.5)
rgba(70, 104, 180, 0.75)
rgba(70, 104, 180, 1.0)
rgba(210, 43, 140, 0.5)
rgba(210, 43, 140, 0.75)
rgba(210, 43, 140, 1.0)
rgba(0, 8, 128, 0.5)
rgba(0, 8, 128, 0.75)
rgba(0, 8, 128, 1.0)
rgba(216, 139, 216, 0.5)
rgba(216, 139, 216, 0.75)
rgba(216, 139, 216, 1.0)
rgba(255, 246, 71, 0.5)
rgba(255, 246, 71, 0.75)
rgba(255, 246, 71, 1.0)
rgba(64, 14, 208, 0.5)
rgba(64, 14, 208, 0.75)
rgba(64, 14, 208, 1.0)
rgba(218, 170, 32, 0.5)
rgba(218, 170, 32, 0.75)
rgba(218, 170, 32, 1.0)
rgba(128, 8, 128, 0.5)
rgba(128, 8, 128, 0.75)
rgba(128, 8, 128, 1.0)
rgba(154, 172, 50, 0.5)
rgba(154, 172, 50, 0.75)
rgba(154, 172, 50, 1.0)
rgba(255, 253, 0, 0.5)
rgba(255, 253, 0, 0.75)
rgba(255, 253, 0, 1.0)
Catatan : Pemberian warna RGBA pada halaman HTML memiliki konsekuensi tersendiri. Hal ini disebabkan karena jika pengguna menggunakan web browser dengan versi jadul dikhawatirkan browser tersebut tidak support terhadap warna RGBA. Sebagai alternatif lain adalah menggunakan jenis warna aman yang lainnya seperti warna Hexadecimal atau RGB tanpa nilai Alpha.
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
