Pada web development, pewarnaan dilakukan dengan menggunakan kode warna HTML. Bagi seorang developer, tentu sudah tidak asing lagi dengan beberapa daftar kode warna HTML seperti #FFFFFF dan #000000 ini.
Namun, dalam memilih kode warna HTML yang tepat dan sesuai untuk sebuah situs web tidaklah mudah. Sebab, ada begitu banyak faktor yang harus dipertimbangkan, baik dari jenis website maupun target audiens. Nah, agar lebih jelas mengenai kode warna HTML, yuk simak pembahasannya berikut ini.
Daftar Isi
Apa Itu Kode Warna HTML?
Kode warna HTML merupakan kode warna yang identik dengan 6 karakter setelah tanda tagar (#), contohnya seperti #0000FF untuk warna biru. Setiap warna HTML dihasilkan oleh warna Hexadecimal atau biasa disebut HEX. Dan setiap warna Hexadecimal tersebut dihasilkan juga oleh RGB.
Lantas, apa itu RGB? RGB merupakan sebuah kode warna yang terdiri dari 3 angka dan terpisah oleh tanda koma, misalnya rgb(251, 235, 217). Setiap digit kode RGB melambangkan tiga warna, yaitu merah (red), hijau (green) dan biru (blue).
Mungkin hampir sebagian orang akan bertanya-tanya, mengapa harus warna merah, hijau serta biru? Karena ketiga warna tersebut merupakan warna utama yang paling umum digunakan di situs website dan layar komputer. Tidak hanya itu saja, kombinasi dari ketiga warna tersebut mampu membuat hingga lebih dari 16 juta warna.
Daftar Kode Warna HTML Lengkap
Warna adalah suatu hal yang paling penting dan unik di dalam dunia desain, terutama dalam bentuk visual. Dikarenakan warna tidak mempunyai bentuk, ukuran serta simbol, maka Anda harus mengetahui dan memahami warna apa saja yang cocok untuk diimplementasikan di dalam situs web.
Berikut adalah daftar kode warna HTML lengkap yang bisa Anda manfaatkan untuk memperindah website ataupun sistem web based.
| Nama Warna | Kode 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, 255, 240) |
| 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) |
Selain menggunakan kode warna HTML manual, Anda juga bisa memanfaatkan beberapa generator yang memberikan kemudahan dalam menerapkan kode warna HTML di dalam website. Berikut adalah kumpulan kode warna HTML lengkap berdasarkan tools nya.
- Colors & Skillshare
Colors & Skillshare merupakan situs yang menyediakan schema generator kode warna HTML untuk memenuhi dan membantu kebutuhan web development.
- HTML Color Code
HTML Color Code merupakan situs web sederhana yang sangat mudah digunakan serta menyediakan tampilan pemilihan warna yang dinamis. Pemilihan warna di situs ini sangat lengkap dan mudah didapatkan, cukup arahkan kursor Anda ke dalam tabel warna atau menggeser slider untuk mendapatkan warna yang diinginkan.
Cara Menggunakan Kode Warna HTML
Berikut adalah beberapa cara menggunakan kode warna HTML, diantaranya:
- Menggunakan Kode Warna HTML untuk Font
Anda dapat menerapkan warna HTML pada situs web dengan cara menuliskan script kode di bawah ini.
<p><font color = “#FFFF00”>Teknohacks</font></p>
atau
<p><font color=“yellow”>Teknohacks</font></p>
- Menggunakan Kode Warna HTML untuk Latar Belakang
Secara umum, penerapan ini biasa digunakan pada syntax kode CSS dan penggunaannya pun tergantung pada kebutuhan website Anda. Berikut contohnya.
<body style=”background-color:#FFFF00;”>
Baca juga : Web Developer: Pengertian, Tugas, Gaji, Skill dan Tipsnya
Itulah pembahasan lengkap mengenai kode warna HTML yang perlu Anda ketahui. Selain itu, Anda juga bisa menggunakan kode warna di atas jika ingin menentukan warna saat mengembangkan website.
![Pengertian Hosting, Jenis, Fungsi, & Cara Kerjanya [LENGKAP] (sumber: Pexels)](https://teknohacks.com/wp-content/uploads/2021/12/pexels-markus-spiske-2004161.jpg)
![Pengertian Hosting, Jenis, Fungsi, & Cara Kerjanya [LENGKAP] (sumber: Pexels)](https://teknohacks.com/wp-content/uploads/2021/12/pexels-markus-spiske-2004161-150x150.jpg)
Tidak ada komentar