#5 CSS – Hex, RGB dan RGBA Value

Selain menggunakan colors name yang telah disediakan css, kita juga bisa menggunakan hex dan rgba pada pemberiaan warna suatu elemen.

Hex Value

hex value yaitu pemilihan warna berdasarkan nilai hexadecimal dari 00 untuk nilai terendah dan ff untuk nilai tertinggi dengan format #rrggbb r untuk red g untuk green dan b untuk blue. Sebagai contoh #ff0000 akan menghasilkan warna merah.

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>

<p>In HTML, you can specify colors using Hex values.</p>

</body>
</html>

RGB Value

RGBA atau red, green, blue merupakan metode pembuatan warna dengan menggunakan nilai decimal, nilai 0 sebagai nilai terendah dan 255 sebagai nilai tertinggi sebagai contoh rgb(0,0,0) akan menghasilkan warna hitam dan rgb(255,255,255) akan menghasilkan warna putih untuk menghasilkan warna merah rgb(255,0,0).

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 255, 0);">rgb(0, 255, 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>

RGBA Value

Cara pewarnaan RGBA sama dengan RGB hanya saja kita menambahkan nilai alpha sebagai metode transparansinya. Nilai alpha dimulai dari 0 sampai 1. Nilai 0 mendefinisikan suatu warna benar-benar transparan sedangkan 1 warna akan terlihat pekat. 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>You can make transparent colors by using the RGBA color value.</p>

</body>
</html>

Untuk memudahkan dalam pemilihan warna kita bisa menggunakan bantuan color picker yang telah disediakan oleh google.

Tinggalkan sebuah komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *