Nilai warna RGB ( Red, Green, Blue) mewakili sumber cahaya MERAH, HIJAU, dan BIRU.
Nilai warna RGBA merupakan perpanjangan dari RGB dengan Alpha Channel (opacity).
Nilai Warna RGB
Dalam HTML, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:
rgb (red, green, blue)
Setiap parameter ( Red, Green, Blue) 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).
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)
Nuansa 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, alpha)
Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali).
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>
