Some text some message..
Some text some message..
Some text some message..
Some text some message..
  • Beranda
  • »
  • HTML
  • »
  • Warna RGBA (Red Green Blue Alpha) Pada HTML

Warna RGBA (Red Green Blue Alpha) Pada HTML

previous Previous Page

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

elemen {color:rgba(255,0,0,0.3);}
elemen {color:rgba(255,0,255,0.3);}

Contoh di bawah ini menggunakan warna RGBA untuk warna merah dengan nilai opacity atau Alpha dari 0.1 sampai dengan 1.0 :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo menggunakan warna rgba</title>
6.     <style>
7.     .paragraf_1,.paragraf_2,.paragraf_3,.paragraf_4,.paragraf_5,.paragraf_6,.paragraf_7,.paragraf_8,.paragraf_9,.paragraf_10{
8.     border:solid 1px blue;
9.     margin:10px;
10.    padding:10px;
11.    }
12.    .paragraf_1{background-color:rgba(255,0,0,0.1);}
13.    .paragraf_2{background-color:rgba(255,0,0,0.2);}
14.    .paragraf_3{background-color:rgba(255,0,0,0.3);}
15.    .paragraf_4{background-color:rgba(255,0,0,0.4);}
16.    .paragraf_5{background-color:rgba(255,0,0,0.5);}
17.    .paragraf_6{background-color:rgba(255,0,0,0.6);}
18.    .paragraf_7{background-color:rgba(255,0,0,0.7);}
19.    .paragraf_8{background-color:rgba(255,0,0,0.8);}
20.    .paragraf_9{background-color:rgba(255,0,0,0.9);}
21.    .paragraf_10{background-color:rgba(255,0,0,1.0);}
22.    </style>
23. </head>
24. <body>
25.    <h3>Belajar menggunakan warna RGBA pada HTML</h3>
26.    <p class="paragraf_1">Ini adalah paragraf pertama, menggunakan "background-color:rgba(255,0,0,0.1);".</p>
27.    <p class="paragraf_2">Ini adalah paragraf kedua, menggunakan "background-color:rgba(255,0,0,0.2);".</p>
28.    <p class="paragraf_3">Ini adalah paragraf ketiga, menggunakan "background-color:rgba(255,0,0,0.3);".</p>
29.    <p class="paragraf_4">Ini adalah paragraf keempat, menggunakan "background-color:rgba(255,0,0,0.4);".</p>
30.    <p class="paragraf_5">Ini adalah paragraf kelima, menggunakan "background-color:rgba(255,0,0,0.5);".</p>
31.    <p class="paragraf_6">Ini adalah paragraf keenam, menggunakan "background-color:rgba(255,0,0,0.6);".</p>
32.    <p class="paragraf_7">Ini adalah paragraf ketujuh, menggunakan "background-color:rgba(255,0,0,0.7);".</p>
33.    <p class="paragraf_8">Ini adalah paragraf kedelapan, menggunakan "background-color:rgba(255,0,0,0.8);".</p>
34.    <p class="paragraf_9">Ini adalah paragraf kesembilan, menggunakan "background-color:rgba(255,0,0,0.9);".</p>
35.    <p class="paragraf_10">Ini adalah paragraf kesepuluh, menggunakan "background-color:rgba(255,0,0,1.0);".</p>
36. </body>
37. </html>
38. 
39. 
40. 

 

Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :

Hasil Script :

Belajar menggunakan warna RGBA pada HTML

Ini adalah paragraf pertama, menggunakan "background-color:rgba(255,0,0,0.1);".

Ini adalah paragraf kedua, menggunakan "background-color:rgba(255,0,0,0.2);".

Ini adalah paragraf ketiga, menggunakan "background-color:rgba(255,0,0,0.3);".

Ini adalah paragraf keempat, menggunakan "background-color:rgba(255,0,0,0.4);".

Ini adalah paragraf kelima, menggunakan "background-color:rgba(255,0,0,0.5);".

Ini adalah paragraf keenam, menggunakan "background-color:rgba(255,0,0,0.6);".

Ini adalah paragraf ketujuh, menggunakan "background-color:rgba(255,0,0,0.7);".

Ini adalah paragraf kedelapan, menggunakan "background-color:rgba(255,0,0,0.8);".

Ini adalah paragraf kesembilan, menggunakan "background-color:rgba(255,0,0,0.9);".

Ini adalah paragraf kesepuluh, menggunakan "background-color:rgba(255,0,0,10);".

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)

noteCatatan : 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.

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML