Nilai warna RGB merepresentasikan warna MERAH9red), HIJAU(green), dan BIRU(blue).
Nilai warna RGBA merupakan perpanjangan dari RGB dengan saluran Alpha (opacity).
Nilai Warna RGB
Dalam HTML, warna dapat ditentukan sebagai nilai RGB dengan menggunakan rumus di bawah ini:
RGB (Red,Green,Blue)
Setiap parameter (merah, hijau, dan biru) menentukan intensitas warna dengan nilai antara 0 dan 255.
Ini berarti ada 256 x 256 x 256 = 16777216 kemungkinan warna!
Misalnya, rgb (255, 0, 0) ditampilkan sebagai merah, karena merah ditetapkan ke nilai tertinggi (255), dan dua lainnya (hijau dan biru) ditetapkan ke 0.
Contoh lain, rgb (0, 255, 0) ditampilkan sebagai hijau, karena hijau ditetapkan ke nilai tertinggi (255), dan dua lainnya (merah dan biru) ditetapkan ke 0.
Untuk menampilkan hitam, setel semua parameter warna ke 0, seperti ini: rgb (0, 0, 0).
Untuk menampilkan putih, atur semua parameter warna ke 255, seperti ini: rgb (255, 255, 255).
Berikut ini contoh mencampurkan nilai RGB :
Contoh :
<!DOCTYPE html> <html> <body> <h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1> <h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1> <h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1> <h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1> <h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1> <h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1> </body> </html>
Bayangan abu-abu(Shades of Gray)
Warna abu-abu sering kali ditentukan menggunakan nilai yang sama untuk ketiga parameter:
Contoh :
<!DOCTYPE html> <html> <body> <h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1> <h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1> <h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1> <h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1> <h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1> <h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1> </body> </html>
Nilai Warna RGBA
Nilai warna RGBA merupakan perpanjangan dari nilai warna RGB dengan saluran Alpha – yang menentukan opasitas untuk suatu warna.
Nilai warna RGBA ditentukan dengan:
rgba (red,green,blue, alfa)
Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):
Berikut ini contoh mencampurkan nilai RGBA :
Contoh :
<!DOCTYPE html> <html> <body> <h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1> <h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1> </body> </html>
