Home » CSS » Color RGB di CSS: Nilai dan Cara Menggunakannya

Color RGB di CSS: Nilai dan Cara Menggunakannya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Nilai RGB

Di CSS, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:

rgb (red,green,blue)

Setiap parameter (merah, hijau, dan biru) menentukan intensitas warna antara 0 dan 255.

Misalnya, rgb (255, 0, 0) ditampilkan sebagai merah, karena merah ditetapkan ke nilai tertinggi (255) dan yang lainnya 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>

<p> Dalam HTML, Anda dapat menentukan warna menggunakan nilai RGB. </p>

</body>
</html>

Nuansa abu-abu sering ditentukan menggunakan nilai yang sama untuk ketiga warnanya:

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

<p> Dengan menggunakan nilai yang sama untuk merah, hijau, dan biru, kita akan mendapatkan nuansa abu-abu yang berbeda. </p>

</body>
</html>

Nilai RGBA

Nilai warna RGBA merupakan perpanjangan dari nilai warna RGB dengan saluran alfa – yang menentukan opasitas 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):

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>

<p> Buatlah warna transparan dengan menggunakan nilai warna RGBA. </p>

</body>
</html>

You may also like