Color HTML

Color atau warna di dalam HTML bisa ditulis dalam 3 jenis, yaitu: namanya, RGB atau HEX.

Contoh, warna merah berdasarkan namanya ditulis "red", jika ditulis dalam bentuk RGB maka "rgb(255,0,0)" dan jika ditulis dalam bentuk HEX maka "#FF0000".

Nama

Berikut ini adalah contoh penggunaan color berdasarkan namanya yang digunakan untuk background:

Color Nama
Red
Orange
Yellow
Cyan
Blue

RGB

Warna RGB (Red Green Blue) merupakan perpaduan dari 3 warna dasar yaitu red (merah), green (hijau) dan blue (biru).

Syntax

rgb(red, green, blue)

Setiap warna red, green dan blue memiliki intensitas warna berbeda mulai dari 0 sampai 255. Campuran dari tiga warna red, green dan blue yang masing-masing telah ditentukan intensitasnya inilah yang membentuk warna RGB.

Contoh 1. rgb(255,0,0). Warna red yang berada pada intensitas 255 dicampur dengan warna green pada intensitas 0 dan warna blue pada intensitas 0 akan membentuk warna red (merah).

Contoh 2. rgb(0,0,0). Warna red yang berada pada intensitas 0 dicampur dengan warna green pada intensitas 0 dan warna blue pada intensitas 0 akan membentuk warna black (hitam).

Berikut ini adalah beberapa contoh warna RGB:

Color RGB
rgb(255,0,0)
rgb(255,255,0)
rgb(0,255,0)
rgb(0,255,255)
rgb(0,0,255)

HEX atau Hexadecimal

Warna hexadecimal hampir sama dengan RGB yaitu merupakan hasil perpaduan dari warna Red, Green dan Blue.

Syntax

#RRGGBB

RR adalah red, GG adalah green dan BB adalah blue. Setiap warna (red, green atau blue) memiliki intensitas warna sebanyak 255 yang dituliskan dalam campuran angka dan huruf (lihat rumus di bawah).

([angka_pertama] * 16) + ([angka_kedua]) = intensitas warna

Contoh 1, kita menggunakan warna hex #004488. Masukkan nilai dari warna hex tersebut ke dalam rumus di atas:

<!-- Red 00 -->
(0 * 16) + (0) = 0
<!-- Green 44 -->
(4 * 16) + (4) = 68
<!-- Blue 88 -->
(8 * 16) + (8) = 136

Dari hasil perhitungan diatas kita mendapatkan warna dalam bentuk RGB yaitu rgb(00,68,136).

Jika warna HEX hanya menggunakan angka maka intensitas warna dari red, green atau blue hanya sebanyak 153 yang seharusnya adalah 255. Lihat contoh di bawah:

Pada contoh berikut ini kita akan memasukkan angka terbesar pada HEX yaitu #999999. Berdasarkan rumus HEX:

<!-- Red 99 -->
(9 * 16) + (9) = 153
<!-- Green 99 -->
(9 * 16) + (9) = 153
<!-- Blue FF -->
(9 * 16) + (9) = 153

Berdasarkan hasil perhitungan di atas kita mendapatkan warna dalam bentuk RGB yaitu rgb(153,153,153). Artinya kita hanya mendapatkan intensitas masing-masing warna red, green atau blue maksimal 153 yang seharusnya kita mendapatkan 255 jika kita menggunakan warna dalam bentuk RGB yaitu rgb(255,255,255).

Untuk mengatasi keterbatasan tersebut maka warna HEX juga menggunakan kombinasi huruf A-F. Lihat tabel di bawah:

Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F

Contoh, kita akan menggunakan huruf pada warna HEX, yaitu: #AA93FF.

<!-- Red AA -->
(10 * 16) + (10) = 170
<!-- Green 93 -->
(9 * 16) + (3) = 147
<!-- Blue FF -->
(15 * 16) + (15) = 255

Berikut ini adalah beberapa contoh warna HEX:

Color HEX
#FF0000
#FFFF00
#00FF00
#00FFFF
#0000FF

Atribut bgcolor

Atribut bgcolor berguna untuk memberi background warna.

Update: Atribut bgcolor telah deprecated pada HTML5, gunakan CSS background-color. Berikut ini adalah contoh penggunaan CSS background-color:

Contoh:

<h3 style="background-color: red;">Background-color: red</h3>
<h3 style="background-color: orange;">Background-color: orange</h3>
<h3 style="background-color: yellow;">Background-color: yellow</h3>
<h3 style="background-color: cyan;">Background-color: cyan</h3>

Hasil contoh:

Background-color: red

Background-color: orange

Background-color: yellow

Background-color: cyan

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>