Kode Warna HTML adalah kode warna-warna yang digunakan dalam perancangan halaman-halaman web, dan juga cara mendeskripsikan dan melakukan spesifikasi dari warna-warna tersebut.
Warna sangat penting untuk memberikan tampilan dan nuansa yang baik pada sebuah situs web. Anda dapat menentukan warna pada tingkat halaman menggunakan tag <body> atau mengatur warna untuk masing-masing tag menggunakan atribut bgcolor.
Tag <body> memiliki atribut yang dapat digunakan untuk mengatur warna berbeda sebagai berikut:
- bgcolor - menetapkan warna untuk latar belakang halaman.
- texs - menetapkan warna untuk teks isi.
- alink - menyetel warna untuk tautan aktif atau tautan yang dipilih.
- link - menetapkan warna untuk teks yang ditautkan.
- vlink - menetapkan warna untuk tautan yang dikunjungi - yaitu, untuk teks tertaut yang sudah Anda klik.
Warna Rekomendasi
Berikut adalah daftar 216 warna html yang direkomendasikan dan aman digunakan. Warna-warna ini dari kode hexa 000000 ke FFFFFF yang didukung oleh semua komputer yang memiliki 256 palet warna.
000000
|
000033
|
000066
|
000099
|
0000CC
|
0000FF
|
003300
|
003333
|
003366
|
003399
|
0033CC
|
0033FF
|
006600
|
006633
|
006666
|
006699
|
0066CC
|
0066FF
|
009900
|
009933
|
009966
|
009999
|
0099CC
|
0099FF
|
00CC00
|
00CC33
|
00CC66
|
00CC99
|
00CCCC
|
00CCFF
|
00FF00
|
00FF33
|
00FF66
|
00FF99
|
00FFCC
|
00FFFF
|
330000
|
330033
|
330066
|
330099
|
3300CC
|
3300FF
|
333300
|
333333
|
333366
|
333399
|
3333CC
|
3333FF
|
336600
|
336633
|
336666
|
336699
|
3366CC
|
3366FF
|
339900
|
339933
|
339966
|
339999
|
3399CC
|
3399FF
|
33CC00
|
33CC33
|
33CC66
|
33CC99
|
33CCCC
|
33CCFF
|
33FF00
|
33FF33
|
33FF66
|
33FF99
|
33FFCC
|
33FFFF
|
660000
|
660033
|
660066
|
660099
|
6600CC
|
6600FF
|
663300
|
663333
|
663366
|
663399
|
6633CC
|
6633FF
|
666600
|
666633
|
666666
|
666699
|
6666CC
|
6666FF
|
669900
|
669933
|
669966
|
669999
|
6699CC
|
6699FF
|
66CC00
|
66CC33
|
66CC66
|
66CC99
|
66CCCC
|
66CCFF
|
66FF00
|
66FF33
|
66FF66
|
66FF99
|
66FFCC
|
66FFFF
|
990000
|
990033
|
990066
|
990099
|
9900CC
|
9900FF
|
993300
|
993333
|
993366
|
993399
|
9933CC
|
9933FF
|
996600
|
996633
|
996666
|
996699
|
9966CC
|
9966FF
|
999900
|
999933
|
999966
|
999999
|
9999CC
|
9999FF
|
99CC00
|
99CC33
|
99CC66
|
99CC99
|
99CCCC
|
99CCFF
|
99FF00
|
99FF33
|
99FF66
|
99FF99
|
99FFCC
|
99FFFF
|
CC0000
|
CC0033
|
CC0066
|
CC0099
|
CC00CC
|
CC00FF
|
CC3300
|
CC3333
|
CC3366
|
CC3399
|
CC33CC
|
CC33FF
|
CC6600
|
CC6633
|
CC6666
|
CC6699
|
CC66CC
|
CC66FF
|
CC9900
|
CC9933
|
CC9966
|
CC9999
|
CC99CC
|
CC99FF
|
CCCC00
|
CCCC33
|
CCCC66
|
CCCC99
|
Sudah
|
CCCCFF
|
CCFF00
|
CCFF33
|
CCFF66
|
CCFF99
|
CCFFCC
|
CCFFFF
|
FF0000
|
FF0033
|
FF0066
|
FF0099
|
FF00CC
|
FF00FF
|
FF3300
|
FF3333
|
FF3366
|
FF3399
|
FF33CC
|
FF33FF
|
FF6600
|
FF6633
|
FF6666
|
FF6699
|
FF66CC
|
FF66FF
|
FF9900
|
FF9933
|
FF9966
|
FF9999
|
FF99CC
|
FF99FF
|
FFCC00
|
FFCC33
|
FFCC66
|
FFCC99
|
FFCCCC
|
FFCCFF
|
FFFF00
|
FFFF33
|
FFFF66
|
FFFF99
|
FFFFCC
|
FFFFFF
|
Metode Pengkodean Warna HTML
Ada tiga metode yang digunakan untuk mengatur warna di halaman web Anda sebagai berikut:
- Nama Warna - Anda dapat menentukan nama warna secara langsung seperti hijau, biru atau merah.
- Kode Hex - Dengan kode warna enam digit yang mewakili jumlah warna merah, hijau, dan biru.
- Warna Desimal atau Nilai Persentase - Nilai ini ditentukan menggunakan properti rgb ().
Selanjutnya mari kita lihat skema pewarnaan tersebut satu-persatu.
1. Warna HTML Dengan Nama Warna
Anda dapat menentukan langsung nama warna untuk mengatur warna teks atau latar belakang. W3C telah mendaftarkan 16 nama warna dasar yang sudah valid dengan validator HTML, tetapi ada lebih dari 200 nama warna yang berbeda yang sebenarnya juga didukung oleh browser utama.
Berikut ini adalah daftar nama 16 Warna Standar W3C yang direkomendasikan untuk digunakan.
Black
|
Gray
|
Silver
|
White
| ||||
Yellow
|
Lime
|
Aqua
|
Fuchsia
| ||||
Red
|
Green
|
Blue
|
Purple
| ||||
Maroon
|
Olive
|
Navy
|
Teal
|
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor = "black">
<tr>
<td>
<font color = "white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
2. Warna HTML Dengan Kode Hex
Heksadesimal adalah representasi 6 digit warna. Dua digit pertama (RR) mewakili nilai merah, dua digit berikutnya adalah nilai hijau (GG), dan yang terakhir adalah nilai biru (BB).
Nilai heksadesimal dapat diambil dari perangkat lunak grafis apa pun seperti Adobe Photoshop, Paintshop Pro, atau MS Paint. Setiap kode heksadesimal akan didahului dengan tanda pound atau hash #.
Berikut ini adalah beberapa daftar warna menggunakan notasi heksadesimal.
Warna
|
Warna HEX
|
# 000000
| |
# FF0000
| |
# 00FF00
| |
# 0000FF
| |
# FFFF00
| |
# 00FFFF
| |
# FF00FF
| |
# C0C0C0
| |
#FFFFFF
|
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
3. Warna HTML Dengan Nilai RGB
Nilai warna ini ditentukan menggunakan properti rgb () . Properti ini mengambil tiga nilai, masing-masing untuk merah, hijau, dan biru. Nilai dapat berupa bilangan bulat antara 0 dan 255 atau persentase.
Catatan:
Tidak semua browser mendukung properti warna rgb () sehingga disarankan untuk tidak menggunakannya.
Berikut ini adalah daftar beberapa warna dengan menggunakan nilai RGB.
Warna
|
Warna RGB
|
rgb (0,0,0)
| |
rgb (255,0,0)
| |
rgb (0,255,0)
| |
rgb (0,0,255)
| |
rgb (255,255,0)
| |
rgb (0,255,255)
| |
rgb (255,0,255)
| |
rgb (192,192,192)
| |
rgb (255,255,255)
|
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
