Pada struktur html, pewarnaan umumnya menggunakan kode warna HTML. Bagi kamu yang sudah terbiasa dengan pengembangan website atau desain komputer, tentu sudah tidak asing lagi dengan kode hexadecimal yang diawali dengan tanda # seperti #ff0000. Selain hexadecimal, kode warna lain yang juga populer, yaitu RGB.
Apa Itu Kode Warna pada HTML CSS?
Warna adalah hal yang penting dalam dunia desain visual. Warna memang tidak memiliki bentuk, simbol, maupun ukuran. Namun, bisa untuk menyampaikan pesan secara langsung. Jika ingin membuat website, maka kamu perlu mengetahui warna apa saja yang cocok untuk digunakan dalam website.
Kode warna HTML (Hypertext Markup Language) merupakan kode yang ditandai dengan enam karakter setelah tanda #. Warna HTML tersebut menggunakan kode hexadecimal hasil gagasan dari warna RGB.
Setiap kelompok angka hexadecimal merepresentasikan tiga warna, yaitu merah, hijau, biru atau red, green, blue sehingga disebut juga warna RGB.
Selain HTML, untuk membuat latar belakang website menjadi lebih menarik dan user friendly, kamu juga perlu bantuan CSS (Cascading Style Sheets). CSS akan membuat pewarnaan pada website kamu lebih unik dengan perpaduan kode RGB maupun kode hexadecimal. Namun, kamu juga perlu mengetahui apa itu html adalah sebelum kamu memahami berbagai kode warnanya. Agar proses belajar membuat website semakin lebih mudah dan terstruktur.
Daftar Kode Warna HTML CSS Lengkap
Berikut ini adalah kode warna css html yang bisa kamu jadikan referensi untuk memberi warna pada desain website:
Warna | Nama Warna | Kode Heximal | RGB |
| Alice Blue | #F0F8FF | 240, 248, 254 |
| Aqua | #00FFFF | 0, 255, 254 |
| Aquamarine | #7FFFD4 | 115, 255, 216 |
| Beige | #F5F5DC | 245, 245, 223 |
| Black | #000000 | 0, 0, 0 |
| Blue Violet | #8A2BE2 | 138, 43, 226 |
| Brown | #A52A2A | 165, 42, 42 |
| Burly Wood | #DEB887 | 222, 184, 135 |
| Cadet Blue | #5F9EA0 | 95, 158, 160 |
| Chocolate | #D2691E | 210, 105, 30 |
| Crimson | #DC143C | 220, 20, 60 |
| Cyan | #00FFFF | 62, 254, 255 |
| Dark Blue | #00008B | 0, 0, 139 |
| Dark Gray | #A9A9A9 | 169, 169, 169 |
| Dark Green | #006400 | 19, 100, 0 |
| Dark Khaki | #BDB76B | 189, 183, 107 |
| Dark Magenta | #8B008B | 139, 0, 140 |
| Dark Olive Green | #556B2F | 85, 107, 47 |
| Dark Orange | #FF8C00 | 251, 140, 1 |
| Dark Orchid | #9932CC | 153, 50, 204 |
| Dark Red | #8B0000 | 139, 5, 0 |
| Dark Sea Green | #8FBC8F | 143, 188, 144 |
| Dark Slate Blue | #483D8B | 72, 61, 139 |
| Dark Slate Gray | #2F4F4F | 47, 79, 79 |
| Dark Turquoise | #00CED1 | 48, 206, 209 |
| Dark Violet | #9400D3 | 148, 0, 211 |
| Deep Pink | #FF1493 | 249, 19, 147 |
| Deep Sky Blue | #00BFFF | 43, 191, 254 |
| Dim Gray | #696969 | 105, 105, 105 |
| Dodger Blue | #1E90FF | 30, 144, 255 |
| Fire Brick | #B22222 | 178, 34, 33 |
| Forest Green | #228B22 | 34, 139, 35 |
| Fuchsia | #FF00FF | 249, 0, 255 |
| Ghost White | #F8F8FF | 248, 248, 255 |
| Gold | #FFD700 | 253, 215, 3 |
| Golden Rod | #DAA520 | 218, 165, 32 |
| Gray | #808080 | 128, 128, 128 |
| Green | #008000 | 27, 128, 1 |
| Green Yellow | #ADFF2F | 173, 255, 48 |
| Honey Dew | #F0FFF0 | 240, 255, 240 |
| Hot Pink | #FF69B4 | 240, 255, 240 |
| Indian Red | #CD5C5C | 205, 92, 92 |
| Indigo | #4B0082 | 75, 0, 130 |
| Ivory | #FFFFF0 | 255, 255, 239 |
| Khaki | #F0E68C | 240, 230, 140 |
| Lavender | #E6E6FA | 230, 230, 250 |
| Lavender Blush | #FFF0F5 | 254, 240, 245 |
| Lawn Green | #7CFC00 | 124, 252, 2 |
| Lemon Chiffon | #FFFACD | 255, 250, 205 |
| Light Blue | #ADD8E6 | 173, 216, 230 |
| Light Coral | #F08080 | 240, 128, 128 |
| Light Cyan | #E0FFFF | 224, 255, 255 |
| Light Goldenrod Yellow | #FAFAD2 | 250, 250, 210 |
| Light Gray | #D3D3D3 | 211, 211, 211 |
| Light Green | #90EE90 | 144, 238, 144 |
| Light Pink | #FFB6C1 | 252, 182, 193 |
| Light Salmon | #FFA07A | 251, 160, 122 |
| Light Sea Green | #20B2AA | 40, 178, 170 |
| Light Sky Blue | #87CEFA | 135, 206, 250 |
| Light Slate Gray | #778899 | 119, 136, 153 |
| Light Steel Blue | #B0C4DE | 176, 196, 222 |
| Light Yellow | #FFFFE0 | 255, 255, 224 |
| Lime Green | #32CD32 | 50, 205, 50 |
| Maroon | #800000 | 128, 4, 0 |
| Medium Aqua Marine | #66CDAA | 102, 205, 170 |
| Medium Orchid | #BA55D3 | 186, 85, 211 |
| Medium Purple | #9370DB | 147, 112, 219 |
| Medium Slate Blue | #7B68EE | 123, 103, 238 |
| Medium Spring Green | #00FA9A | 62, 250, 153 |
| Medium Violet Red | #C71585 | 199, 21, 133 |
| Midnight Blue | #191970 | 25, 25, 112 |
| Mint Cream | #F5FFFA | 245, 255, 250 |
| Moccasin | #FFE4B5 | 254, 228, 181 |
| Navajo White | #FFDEAD | 254, 222, 173 |
| Old Lace | #FDF5E6 | 253, 245, 230 |
| Olive | #808000 | 128, 128, 1 |
| Olive Drab | #6B8E23 | 107, 142, 35 |
| Orange Red | #FF4500 | 250, 69, 1 |
| Orchid | #DA70D6 | 218, 112, 214 |
| Pale Turquoise | #AFEEEE | 175, 238, 239 |
| Pale Violet Red | #DB7093 | 219, 112, 147 |
| Peach Puff | #FFDAB9 | 253, 218, 185 |
| Pink | #FFC0CB | 252, 192, 203 |
| Purple | #800080 | 128, 0, 128 |
| Rebecca Purple | #663399 | 102, 51, 153 |
| Red | #FF0000 | 255, 0, 0 |
| Rosy Brown | #BC8F8F | 188, 143, 142 |
| Royal Blue | #4169E1 | 65, 105, 225 |
| Saddle Brown | #8B4513 | 139, 69, 19 |
| Sea Green | #2E8B57 | 46, 139, 87 |
| Sea Shell | #FFF5EE | 255, 245, 238 |
| Sienna | #A0522D | 160, 82, 45 |
| Sky Blue | #87CEEB | 135, 206, 235 |
| Slate Blue | #6A5ACD | 106, 90, 205 |
| Slate Gray | #708090 | 112, 128, 145 |
| Spring Green | #00FF7F | 63, 255, 128 |
| Tan | #D2B48C | 210, 180, 140 |
| Thistle | #D8BFD8 | 216, 191, 216 |
| Tomato | #FF6347 | 250, 99, 71 |
| Violet | #EE82EE | 238, 130, 238 |
| Wheat | #F5DEB3 | 245, 222, 179 |
| White | #FFFFFF | 255, 255, 255 |
| Yellow | #FFFF00 | 255, 255, 0 |
Kode tersebut juga bisa kamu gunakan untuk mewarnai tabel HTML. Sehingga, pengunjung website kamu bisa lebih mudah membaca data yang tersaji di dalam tabel tersebut.
Cara Menggunakan Kode Warna HTML CSS
Berikut kode warna HTML yang harus kamu tulis saat akan memberi warna karakter menggunakan HTML:
<p><font size=”3″ color=”#ff0000″>Daftar Kode Warna Pada HTML CSS</font></p>
Sedangkan jika kamu ingin memberi warna pada background, maka gunakan kode berikut :
#p1 {background-color:#ff0000;}
#p2 {background-color:#00ff00;}
List Website untuk Mencari Warna Desain Website
ika kamu ingin mencari referensi html warna yang lengkap, silahkan kunjungi beberapa situs website berikut :
- Canva
- Paletton
- Coolors
- CheckMyColours
- Spy Color
Selain situs web di atas, masih banyak lagi yang lainnya dan bisa kamu cari melalui internet.
Siap Berkreasi dengan Kode Warna HTML CSS?
Setelah kamu mengetahui daftar kode warna html lengkap full color. Langkah selanjutnya adalah mulai berkreasi dengan menerapkan warna-warna pada desain website kamu, agar tampilannya semakin menarik bagi pengguna internet.
Namun, sebelum menerapkan kode-kode tersebut, alangkah baiknya jika kamu mempelajari terlebih dahulu cara membuat website dengan html dan css. Supaya lebih mudah memahaminya. Selamat mencoba!
