Warna RGB dan RGBA HTML


Nilai warna RGB mewakili sumber cahaya Red (Merah), Green (Hijau), dan Blue (Biru).

Nilai warna RGBA adalah perpanjangan dari Red Green Blue dengan Alpha (opacity).


Nilai Warna RGB

Dalam HTML, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini: 

rgb(red, green, blue)

Setiap parameter (red, green, dan blue) mendefinisikan 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 diatur ke nilai tertinggi (255), dan dua lainnya (hijau dan biru) diset ke 0.

Contoh lain, rgb(0, 255, 0) ditampilkan sebagai hijau, karena hijau diatur ke nilai tertinggi (255), dan dua lainnya (merah dan biru) diset ke 0.

Untuk menampilkan hitam, setel semua parameter warna ke 0 seperti ini: rgb(0, 0, 0).

Untuk menampilkan putih, setel semua parameter warna ke 255 seperti ini: rgb(255, 255, 255).


Contoh

<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>

Hasil

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)


Warna Abu-abu

Nuansa abu-abu sering didefinisikan menggunakan nilai yang sama untuk ketiga parameter.


Contoh

<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>

Hasil

rgb(60, 60, 60)

rgb(100, 100, 100)

rgb(140, 140, 140)

rgb(180, 180, 180)

rgb(200, 200, 200)

rgb(240, 240, 240)


Nilai Warna RGBA

Nilai warna RGBA adalah perpanjangan dari nilai warna RGB dengan A adalah Alpha yang menentukan opasitas (transparan) untuk warna.

Nilai warna RGBA ditentukan dengan:

rgba(red, green, blue, alpha)

Parameter alpha adalah angka antara 0.0 (full transparan) dan 1.0 (tidak transparan sama sekali).


Contoh

<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>

Hasil

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)


Sumber referensi: w3schools

Komentar

Posting Komentar