Saat kamu mengunjungi sebuah website, salah satu hal pertama yang menarik perhatianmu adalah tampilan visualnya. Salah satu faktor penting dalam menciptakan tampilan menarik tersebut adalah penggunaan kode warna HTML.
Dalam artikel ini, kita akan membahas tentang daftar kode warna HTML dan bagaimana penggunaannya dapat mempengaruhi tampilan dan kesan visual sebuah website.
Daftar Kode Warna HTML
Kode warna HTML memungkinkan kamu mengubah tampilan dan gaya website kamu dengan memilih warna yang sesuai dengan preferensi. Kamu dapat menggunakan nama warna, kode heksadesimal, atau kode RGB untuk mencapai hasil yang diinginkan.
Berikut adalah beberapa contoh kode warna HTML yang dapat kamu gunakan untuk meningkatkan tampilan visual website kamu:
| Warna | Nama Warna | HEX | RGB |
|
.
|
Alice Blue | #F0F8FF | rgb(240, 248, 254) |
|
.
|
Antique White | #FAEBD7 | rgb(251, 235, 217) |
|
.
|
Aqua | #00FFFF | rgb(0, 255, 254) |
|
.
|
Aquamarine | #7FFFD4 | rgb(115, 255, 216) |
|
.
|
Azure | #F0FFFF | rgb(239, 255, 255) |
|
.
|
Beige | #F5F5DC | rgb(245, 245, 223) |
|
.
|
Bisque | #FFE4C4 | rgb(255, 227, 200) |
|
.
|
Black | #000000 | rgb(0, 0, 0) |
|
.
|
Blanched Almond | #FFEBCD | rgb(255, 234, 208) |
|
.
|
Blue | #0000FF | rgb(0, 0, 255) |
|
.
|
Blue Violet | #8A2BE2 | rgb(138, 43, 226) |
|
.
|
Brown | #A52A2A | rgb(165, 42, 42) |
|
.
|
Burly Wood | #DEB887 | rgb(222, 184, 135) |
|
.
|
Cadet Blue | #5F9EA0 | rgb(95, 158, 160) |
|
.
|
Chartreuse | #7FFF00 | rgb(127, 255, 1) |
|
.
|
Chocolate | #D2691E | rgb(210, 105, 30) |
|
.
|
Coral | #FF7F50 | rgb(251, 127, 80) |
|
.
|
Cornflower Blue | #6495ED | rgb(100, 149, 237) |
|
.
|
Cornsilk | #FFF8DC | rgb(225, 248, 220) |
|
.
|
Crimson | #DC143C | rgb(220, 20, 60) |
|
.
|
Cyan | #00FFFF | rgb(62, 254, 255) |
|
.
|
Dark Blue | #00008B | rgb(0, 0, 139) |
|
.
|
Dark Cyan | #008B8B | rgb(29, 139, 139) |
|
.
|
Dark Golden Rod | #B8860B | rgb(184, 134, 11) |
|
.
|
Dark Gray | #A9A9A9 | rgb(169, 169, 169) |
|
.
|
Dark Green | #006400 | rgb(19, 100, 0) |
|
.
|
Dark Khaki | #BDB76B | rgb(189, 183, 107) |
|
.
|
Dark Magenta | #8B008B | rgb(139, 0, 140) |
|
.
|
Dark Olive Green | #556B2F | rgb(85, 107, 47) |
|
.
|
Dark Orange | #FF8C00 | rgb(251, 140, 1) |
|
.
|
Dark Orchid | #9932CC | rgb(153, 50, 204) |
|
.
|
Dark Red | #8B0000 | rgb(139, 5, 0) |
|
.
|
Dark Salmon | #E9967A | rgb(233, 150, 122) |
|
.
|
Dark Sea Green | #8FBC8F | rgb(143, 188, 144) |
|
.
|
Dark Slate Blue | #483D8B | rgb(72, 61, 139) |
|
.
|
Dark Slate Gray | #2F4F4F | rgb(47, 79, 79) |
|
.
|
Dark Turquoise | #00CED1 | rgb(48, 206, 209) |
|
.
|
Dark Violet | #9400D3 | rgb(148, 0, 211) |
|
.
|
Deep Pink | #FF1493 | rgb(249, 19, 147) |
|
.
|
Deep Sky Blue | #00BFFF | rgb(43, 191, 254) |
|
.
|
Dim Gray | #696969 | rgb(105, 105, 105) |
|
.
|
Dodger Blue | #1E90FF | rgb(30, 144, 255) |
|
.
|
Fire Brick | #B22222 | rgb(178, 34, 33) |
|
.
|
Floral White | #FFFAF0 | rgb(255, 250, 240) |
|
.
|
Forest Green | #228B22 | rgb(34, 139, 35) |
|
.
|
Fuchsia | #FF00FF | rgb(249, 0, 255) |
|
.
|
Gainsboro | #DCDCDC | rgb(220, 220, 220) |
|
.
|
Ghost White | #F8F8FF | rgb(248, 248, 255) |
|
.
|
Gold | #FFD700 | rgb(253, 215, 3) |
|
.
|
Golden Rod | #DAA520 | rgb(218, 165, 32) |
|
.
|
Gray | #808080 | rgb(128, 128, 128) |
|
.
|
Green | #008000 | rgb(27, 128, 1) |
|
.
|
Green Yellow | #ADFF2F | rgb(173, 255, 48) |
|
.
|
Honey Dew | #F0FFF0 | rgb(240, 255, 240) |
|
.
|
Hot Pink | #FF69B4 | rgb(240, 105, 180) |
|
.
|
Indian Red | #CD5C5C | rgb(205, 92, 92) |
|
.
|
Indigo | #4B0082 | rgb(75, 0, 130) |
|
.
|
Ivory | #FFFFF0 | rgb(255, 255, 239) |
|
.
|
Khaki | #F0E68C | rgb(240, 230, 140) |
|
.
|
Lavender | #E6E6FA | rgb(230, 230, 250) |
|
.
|
Lavender Blush | #FFF0F5 | rgb(254, 240, 245) |
|
.
|
Lawn Green | #7CFC00 | rgb(124, 252, 2) |
|
.
|
Lemon Chiffon | #FFFACD | rgb(255, 250, 205) |
|
.
|
Light Blue | #ADD8E6 | rgb(173, 216, 230) |
|
.
|
Light Coral | #F08080 | rgb(240, 128, 128) |
|
.
|
Light Cyan | #E0FFFF | rgb(224, 255, 255) |
|
.
|
Light Golden Rod Yellow | #FAFAD2 | rgb(250, 250, 210) |
|
.
|
Light Gray | #D3D3D3 | rgb(211, 211, 211) |
|
.
|
Light Green | #90EE90 | rgb(144, 238, 144) |
|
.
|
Light Pink | #FFB6C1 | rgb(252, 182, 193) |
|
.
|
Light Salmon | #FFA07A | rgb(251, 160, 122) |
|
.
|
Light Sea Green | #20B2AA | rgb(40, 178, 170) |
|
.
|
Light Sky Blue | #87CEFA | rgb(135, 206, 250) |
|
.
|
Light Slate Gray | #778899 | rgb(119, 136, 153) |
|
.
|
Light Steel Blue | #B0C4DE | rgb(176, 196, 222) |
|
.
|
Light Yellow | #FFFFE0 | rgb(255, 255, 224) |
|
.
|
Lime | #00FF00 | rgb(63, 255, 0) |
|
.
|
Lime Green | #32CD32 | rgb(50, 205, 50) |
|
.
|
Linen | #FAF0E6 | rgb(250, 240, 230) |
|
.
|
Magenta | #FF00FF | rgb(249, 0, 255) |
|
.
|
Maroon | #800000 | rgb(128, 4, 0) |
|
.
|
Medium Aqua Marine | #66CDAA | rgb(102, 205, 170) |
|
.
|
Medium Blue | #0000CD | rgb(0, 0, 205) |
|
.
|
Medium Orchid | #BA55D3 | rgb(186, 85, 211) |
|
.
|
Medium Purple | #9370DB | rgb(147, 112, 219) |
|
.
|
Medium Sea Green | #3CB371 | rgb(60, 179, 113) |
|
.
|
Medium Slate Blue | #7B68EE | rgb(123, 103, 238) |
|
.
|
Medium Spring Green | #00FA9A | rgb(62, 250, 153) |
|
.
|
Medium Turquoise | #48D1CC | rgb(72, 209, 204) |
|
.
|
Medium Violet Red | #C71585 | rgb(199, 21, 133) |
|
.
|
Midnight Blue | #191970 | rgb(25, 25, 112) |
|
.
|
Mint Cream | #F5FFFA | rgb(245, 255, 250) |
|
.
|
Misty Rose | #FFE4E1 | rgb(254, 228, 225) |
|
.
|
Moccasin | #FFE4B5 | rgb(254, 228, 181) |
|
.
|
Navajo White | #FFDEAD | rgb(254, 222, 173) |
|
.
|
Navy | #000080 | rgb(0, 0, 128) |
|
.
|
Old Lace | #FDF5E6 | rgb(253, 245, 230) |
|
.
|
Olive | #808000 | rgb(128, 128, 1) |
|
.
|
Olive Drab | #6B8E23 | rgb(107, 142, 35) |
|
.
|
Orange | #FFA500 | rgb(252, 165, 3) |
|
.
|
Orange Red | #FF4500 | rgb(250, 69, 1) |
|
.
|
Orchid | #DA70D6 | rgb(218, 112, 214) |
|
.
|
Pale Golden Rod | #EEE8AA | rgb(238, 232, 170) |
|
.
|
Pale Green | #98FB98 | rgb(152, 251, 153) |
|
.
|
Pale Turquoise | #AFEEEE | rgb(175, 238, 239) |
|
.
|
Pale Violet Red | #DB7093 | rgb(219, 112, 147) |
|
.
|
Papaya Whip | #FFEFD5 | rgb(254, 239, 213) |
|
.
|
Peach Puff | #FFDAB9 | rgb(253, 218, 185) |
|
.
|
Peru | #CD853F | rgb(205, 133, 63) |
|
.
|
Pink | #FFC0CB | rgb(252, 192, 203) |
|
.
|
Plum | #DDA0DD | rgb(221, 160, 221) |
|
.
|
Powder Blue | #B0E0E6 | rgb(176, 224, 230) |
|
.
|
Purple | #800080 | rgb(128, 0, 128) |
|
.
|
Rebecca Purple | #663399 | rgb(102, 51, 153) |
|
.
|
Red | #FF0000 | rgb(255, 0, 0) |
|
.
|
Rosy Brown | #BC8F8F | rgb(188, 143, 142) |
|
.
|
Royal Blue | #4169E1 | rgb(65, 105, 225) |
|
.
|
Saddle Brown | #8B4513 | rgb(139, 69, 19) |
|
.
|
Salmon | #FA8072 | rgb(250, 128, 114) |
|
.
|
Sandy Brown | #F4A460 | rgb(244, 164, 95) |
|
.
|
Sea Green | #2E8B57 | rgb(46, 139, 87) |
|
.
|
Sea Shell | #FFF5EE | rgb(255, 245, 238) |
|
.
|
Sienna | #A0522D | rgb(160, 82, 45) |
|
.
|
Silver | #C0C0C0 | rgb(192, 192, 192) |
|
.
|
Sky Blue | #87CEEB | rgb(135, 206, 235) |
|
.
|
Slate Blue | #6A5ACD | rgb(106, 90, 205) |
|
.
|
Slate Gray | #708090 | rgb(112, 128, 145) |
|
.
|
Snow | #FFFAFA | rgb(255, 250, 250) |
|
.
|
Spring Green | #00FF7F | rgb(63, 255, 128) |
|
.
|
Steel Blue | #4682B4 | rgb(70, 130, 180) |
|
.
|
Tan | #D2B48C | rgb(210, 180, 140) |
|
.
|
Teal | #008080 | rgb(26, 128, 127) |
|
.
|
Thistle | #D8BFD8 | rgb(216, 191, 216) |
|
.
|
Tomato | #FF6347 | rgb(250, 99, 71) |
|
.
|
Turquoise | #40E0D0 | rgb(64, 224, 208) |
|
.
|
Violet | #EE82EE | rgb(238, 130, 238) |
|
.
|
Wheat | #F5DEB3 | rgb(245, 222, 179) |
|
.
|
White | #FFFFFF | rgb(255, 255, 255) |
|
.
|
White Smoke | #F5F5F5 | rgb(245, 245, 245) |
|
.
|
Yellow | #FFFF00 | rgb(255, 255, 0) |
|
.
|
Yellow Green | #9ACD32 | rgb(154, 205, 49) |
Cara Menggunakan Kode Warna HTML
Untuk menggunakan kode warna HTML, kamu perlu memahami beberapa format yang umum digunakan. Berikut adalah penjelasan singkat tentang cara menggunakan kode warna HTML:
1. Cara Menggunakan Kode HTML Warna di Karakter
<!DOCTYPE html>
<html>
<body>
<p><font size=”3″ color=”#ff0000″>Daftar Kode Warna HTML CSS</font></p>
<p><font size=”2″ color=”#00ff00″>Daftar Kode Warna CSS HTML</font></p>
<p><font face=”verdana” color=”#0000ff”>Daftar Kode HTML Warna</font></p>
<p><strong>Catatan:</strong> Elemen font hanya mendukung pada HTML 5. Gunakan CSS sebagai ganti</p>
</body>
</html>
2. Cara Menggunakan Kode Warna HTML Lengkap di Background
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:#ff0000;}
#p2 {background-color:#00ff00;}
#p3 {background-color:#0000ff;}
#p4 {background-color:#ffff00;}
#p5 {background-color:#ff00ff;}
</style>
</head>
<body>
<p>Contoh Beberapa Kode Warna Lengkap:</p>
<p id=”p1″>Red</p>
<p id=”p2″>Green</p>
<p id=”p3″>Blue</p>
<p id=”p4″>Yellow</p>
<p id=”p5″>Cerise</p>
</body>
</html>
3. Cara Menggunakan Kode Warna HTML di Border
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-style: solid;
border-color: #92a8d1;
}
div {
border-style: solid;
border-color: #92a8d1;
}
</style>
</head>
<body>
<p>Daftar Kode Warna HTML CSS</p>
<div>Nilai dari border-color dapat diatur menggunakan angka kode hexadecimal.</div>
<p><strong>Catatan:</strong> border-color tidak dapat bekerja jika digunakan sendiri. Gunakan properti border-style terlebih dahulu untuk mengatur border kode HTML warna.</p>
</body>
</html>
Baca juga: 5 Cara Membuat Desain Website Sendiri
Tips Memilih Warna Untuk Website
Berikut adalah beberapa tips untuk memilih warna yang cocok untuk website kamu
A. Pilih Warna Berdasarkan Citra Merek
Jika kamu sudah memiliki citra merek yang ditetapkan, pertimbangkan warna-warna yang sesuai dengan identitas merek (brand) bisnis kamu. Pelajari psikologi warna dan bagaimana warna tertentu dapat mempengaruhi persepsi, emosi, dan perilaku pengguna.
Misalnya, warna biru mungkin mengirimkan kesan kepercayaan dan profesionalisme, sedangkan warna merah dapat memberikan kesan energi dan keberanian.
B. Jangan Terlalu Banyak Memasukkan Warna
Pilihlah beberapa warna yang akan menjadi palet warna utama dan gunakan secara konsisten di seluruh website kamu. Terlalu banyak warna dapat merusak nilai visual secara keseluruhan.
Pertahankan kesederhanaan dan konsistensi dalam pemilihan warna untuk menciptakan tampilan yang profesional dan harmonis. Palet warna yang terdiri dari warna primer, warna aksen, dan warna netral dapat membantu menciptakan keseimbangan visual dan koherensi desain.
C. Pertimbangkan Kontras dan Pembacaan Teks
Pastikan ada kontras yang cukup antara warna teks dan latar belakang untuk memastikan keterbacaan yang baik. Hindari penggunaan kombinasi warna yang terlalu kontras atau terlalu mirip, yang dapat mengganggu pengalaman pengguna.
Siap Untuk Menambahkan Kekreatifan Melalui Warna HTML?
Penggunaan kode warna HTML dalam pengembangan website merupakan langkah penting dalam menciptakan tampilan yang menarik dan konsisten. Kamu dapat mengendalikan tampilan visual website secara lebih baik jika memahami konsep dasar kode warna HTML dan cara penggunaannya dalam CSS.
