Jika Anda sudah lama berurusan dengan web development, pastinya Anda tahu bahwa memilih kode warna HTML & CSS yang tepat untuk website adalah hal yang penting.
Pemilihan warna yang tepat untuk sebuah website dapat membangkitkan suatu emosi, mengatur tone website, dan membuat keseluruhan desain Anda lebih kohesif dan hidup.
Namun memilih kode warna HTML yang tepat untuk website memang tidak mudah 一 ada banyak faktor yang perlu dipertimbangkan. Mulai dari jenis website sampai target audiens.
Nah di artikel kali ini, kami akan membahas semua yang perlu Anda ketahui tentang HTML color code. Mulai dari jenis-jenis, cara menerapkannya pada website, sampai kode lengkapnya.
Yuk langsung saja kita mulai!
Daftar isi :
HTML Color Coding 101
Di kehidupan sehari-hari, Anda pasti sering melihat berbagai macam warna 一 kuning, merah, biru, dan lain sebagainya. Nah di dalam warna-warna ini ada juga nuansa yang berbeda.
Mulai dari biru muda, biru tua, biru laut, biru langit, dan lain-lain. Warna-warna dengan nuansa unik tersebut sangat mungkin untuk bisa diartikan secara berbeda bagi setiap orang.
Nah untuk menghindari kesalahan penafsiran warna saat melakukan desain online, kode warna HTML memberikan solusi terbaik melalui format kode warna yang sudah dikenali komputer.
Nantinya, komputer akan membaca dan mengartikan kode HTML tersebut. Selanjutnya, komputer akan menampilkan warna yang sesuai dengan kode yang dimasukan ke website Anda.
Baca juga: Apa Itu HTML? Pengertian, Fungsi, dan Cara Kerjanya
Sebenarnya, kode warna HTML mempunyai beberapa format yang berbeda. Namun, dua format HTML color code yang paling dikenal di antara developer adalah Hex color codes & RGB values.
Nah berikut ini adalah daftar lengkap kode warna HTML & CSS dengan format HEX dan juga RGB!
Kode Warna HTML & CSS Full Color
| Nama Warna | HEX | RGB VALUES | |
|---|---|---|---|
|
GFN
|
Alice Blue | #F0F8FF | rgb(240, 248, 254) |
|
GFN
|
Antique White | #FAEBD7 | rgb(251, 235, 217) |
|
GFN
|
Aqua | #00FFFF | rgb(0, 255, 254) |
|
GFN
|
Aquamarine | #7FFFD4 | rgb(115, 255, 216) |
|
GFN
|
Azure | #F0FFFF | rgb(239, 255, 255) |
|
GFN
|
Beige | #F5F5DC | rgb(245, 245, 223) |
|
GFN
|
Bisque | #FFE4C4 | rgb(255, 227, 200) |
|
GFN
|
Black | #000000 | rgb(0, 0, 0) |
|
GFN
|
Blanched Almond | #FFEBCD | rgb(255, 234, 208) |
|
GFN
|
Blue | #0000FF | rgb(0, 0, 255) |
|
GFN
|
Blue Violet | #8A2BE2 | rgb(138, 43, 226) |
|
GFN
|
Brown | #A52A2A | rgb(165, 42, 42) |
|
GFN
|
Burly Wood | #DEB887 | rgb(222, 184, 135) |
|
GFN
|
Cadet Blue | #5F9EA0 | rgb(95, 158, 160) |
|
GFN
|
Chartreuse | #7FFF00 | rgb(127, 255, 1) |
|
GFN
|
Chocolate | #D2691E | rgb(210, 105, 30) |
|
GFN
|
Coral | #FF7F50 | rgb(251, 127, 80) |
|
GFN
|
Cornflower Blue | #6495ED | rgb(100, 149, 237) |
|
GFN
|
Cornsilk | #FFF8DC | rgb(225, 248, 220) |
|
GFN
|
Crimson | #DC143C | rgb(220, 20, 60) |
|
GFN
|
Cyan | #00FFFF | rgb(62, 254, 255) |
|
GFN
|
Dark Blue | #00008B | rgb(0, 0, 139) |
|
GFN
|
Dark Cyan | #008B8B | rgb(29, 139, 139) |
|
GFN
|
Dark Golden Rod | #B8860B | rgb(184, 134, 11) |
|
GFN
|
Dark Gray | #A9A9A9 | rgb(169, 169, 169) |
|
GFN
|
Dark Green | #006400 | rgb(19, 100, 0) |
|
GFN
|
Dark Khaki | #BDB76B | rgb(189, 183, 107) |
|
GFN
|
Dark Magenta | #8B008B | rgb(139, 0, 140) |
|
GFN
|
Dark Olive Green | #556B2F | rgb(85, 107, 47) |
|
GFN
|
Dark Orange | #FF8C00 | rgb(251, 140, 1) |
|
GFN
|
Dark Orchid | #9932CC | rgb(153, 50, 204) |
|
GFN
|
Dark Red | #8B0000 | rgb(139, 5, 0) |
|
GFN
|
Dark Salmon | #E9967A | rgb(233, 150, 122) |
|
GFN
|
Dark Sea Green | #8FBC8F | rgb(143, 188, 144) |
|
GFN
|
Dark Slate Blue | #483D8B | rgb(72, 61, 139) |
|
GFN
|
Dark Slate Gray | #2F4F4F | rgb(47, 79, 79) |
|
GFN
|
Dark Turquoise | #00CED1 | rgb(48, 206, 209) |
|
GFN
|
Dark Violet | #9400D3 | rgb(148, 0, 211) |
|
GFN
|
Deep Pink | #FF1493 | rgb(249, 19, 147) |
|
GFN
|
Deep Sky Blue | #00BFFF | rgb(43, 191, 254) |
|
GFN
|
Dim Gray | #696969 | rgb(105, 105, 105) |
|
GFN
|
Dodger Blue | #1E90FF | rgb(30, 144, 255) |
|
GFN
|
Fire Brick | #B22222 | rgb(178, 34, 33) |
|
GFN
|
Floral White | #FFFAF0 | rgb(255, 250, 240) |
|
GFN
|
Forest Green | #228B22 | rgb(34, 139, 35) |
|
GFN
|
Fuchsia | #FF00FF | rgb(249, 0, 255) |
|
GFN
|
Gainsboro | #DCDCDC | rgb(220, 220, 220) |
|
GFN
|
Ghost White | #F8F8FF | rgb(248, 248, 255) |
|
GFN
|
Gold | #FFD700 | rgb(253, 215, 3) |
|
GFN
|
Golden Rod | #DAA520 | rgb(218, 165, 32) |
|
GFN
|
Gray | #808080 | rgb(128, 128, 128) |
|
GFN
|
Green | #008000 | rgb(27, 128, 1) |
|
GFN
|
Green Yellow | #ADFF2F | rgb(173, 255, 48) |
|
GFN
|
Honey Dew | #F0FFF0 | rgb(240, 255, 240) |
|
GFN
|
Hot Pink | #FF69B4 | rgb(240, 255, 240) |
|
GFN
|
Indian Red | #CD5C5C | rgb(205, 92, 92) |
|
GFN
|
Indigo | #4B0082 | rgb(75, 0, 130) |
|
GFN
|
Ivory | #FFFFF0 | rgb(255, 255, 239) |
|
GFN
|
Khaki | #F0E68C | rgb(240, 230, 140) |
|
GFN
|
Lavender | #E6E6FA | rgb(230, 230, 250) |
|
GFN
|
Lavender Blush | #FFF0F5 | rgb(254, 240, 245) |
|
GFN
|
Lawn Green | #7CFC00 | rgb(124, 252, 2) |
|
GFN
|
Lemon Chiffon | #FFFACD | rgb(255, 250, 205) |
|
GFN
|
Light Blue | #ADD8E6 | rgb(173, 216, 230) |
|
GFN
|
Light Coral | #F08080 | rgb(240, 128, 128) |
|
GFN
|
Light Cyan | #E0FFFF | rgb(224, 255, 255) |
|
GFN
|
Light Golden Rod Yellow | #FAFAD2 | rgb(250, 250, 210) |
|
GFN
|
Light Gray | #D3D3D3 | rgb(211, 211, 211) |
|
GFN
|
Light Green | #90EE90 | rgb(144, 238, 144) |
|
GFN
|
Light Pink | #FFB6C1 | rgb(252, 182, 193) |
|
GFN
|
Light Salmon | #FFA07A | rgb(251, 160, 122) |
|
GFN
|
Light Sea Green | #20B2AA | rgb(40, 178, 170) |
|
GFN
|
Light Sky Blue | #87CEFA | rgb(135, 206, 250) |
|
GFN
|
Light Slate Gray | #778899 | rgb(119, 136, 153) |
|
GFN
|
Light Steel Blue | #B0C4DE | rgb(176, 196, 222) |
|
GFN
|
Light Yellow | #FFFFE0 | rgb(255, 255, 224) |
|
GFN
|
Lime | #00FF00 | rgb(63, 255, 0) |
|
GFN
|
Lime Green | #32CD32 | rgb(50, 205, 50) |
|
GFN
|
Linen | #FAF0E6 | rgb(250, 240, 230) |
|
GFN
|
Magenta | #FF00FF | rgb(249, 0, 255) |
|
GFN
|
Maroon | #800000 | rgb(128, 4, 0) |
|
GFN
|
Medium Aqua Marine | #66CDAA | rgb(102, 205, 170) |
|
GFN
|
Medium Blue | #0000CD | rgb(0, 0, 205) |
|
GFN
|
Medium Orchid | #BA55D3 | rgb(186, 85, 211) |
|
GFN
|
Medium Purple | #9370DB | rgb(147, 112, 219) |
|
GFN
|
Medium Sea Green | #3CB371 | rgb(60, 179, 113) |
|
GFN
|
Medium Slate Blue | #7B68EE | rgb(123, 103, 238) |
|
GFN
|
Medium Spring Green | #00FA9A | rgb(62, 250, 153) |
|
GFN
|
Medium Turquoise | #48D1CC | rgb(72, 209, 204) |
|
GFN
|
Medium Violet Red | #C71585 | rgb(199, 21, 133) |
|
GFN
|
Midnight Blue | #191970 | rgb(25, 25, 112) |
|
GFN
|
Mint Cream | #F5FFFA | rgb(245, 255, 250) |
|
GFN
|
Misty Rose | #FFE4E1 | rgb(254, 228, 225) |
|
GFN
|
Moccasin | #FFE4B5 | rgb(254, 228, 181) |
|
GFN
|
Navajo White | #FFDEAD | rgb(254, 222, 173) |
|
GFN
|
Navy | #000080 | rgb(0, 0, 128) |
|
GFN
|
Old Lace | #FDF5E6 | rgb(253, 245, 230) |
|
GFN
|
Olive | #808000 | rgb(128, 128, 1) |
|
GFN
|
Olive Drab | #6B8E23 | rgb(107, 142, 35) |
|
GFN
|
Orange | #FFA500 | rgb(255,159,53) |
|
GFN
|
Orange Red | #FF4500 | rgb(250, 69, 1) |
|
GFN
|
Orchid | #DA70D6 | rgb(218, 112, 214) |
|
GFN
|
Pale Golden Rod | #EEE8AA | rgb(238, 232, 170) |
|
GFN
|
Pale Green | #98FB98 | rgb(152, 251, 153) |
|
GFN
|
Pale Turquoise | #AFEEEE | rgb(175, 238, 239) |
|
GFN
|
Pale Violet Red | #DB7093 | rgb(219, 112, 147) |
|
GFN
|
Papaya Whip | #FFEFD5 | rgb(254, 239, 213) |
|
GFN
|
Peach Puff | #FFDAB9 | rgb(253, 218, 185) |
|
GFN
|
Peru | #CD853F | rgb(205, 133, 63) |
|
GFN
|
Pink | #FFC0CB | rgb(252, 192, 203) |
|
GFN
|
Plum | #DDA0DD | rgb(221, 160, 221) |
|
GFN
|
Powder Blue | #B0E0E6 | rgb(176, 224, 230) |
|
GFN
|
Purple | #800080 | rgb(128, 0, 128) |
|
GFN
|
Rebecca Purple | #663399 | rgb(102, 51, 153) |
|
GFN
|
Red | #FF0000 | rgb(255, 0, 0) |
|
GFN
|
Rosy Brown | #BC8F8F | rgb(188, 143, 142) |
|
GFN
|
Royal Blue | #4169E1 | rgb(65, 105, 225) |
|
GFN
|
Saddle Brown | #8B4513 | rgb(139, 69, 19) |
|
GFN
|
Salmon | #FA8072 | rgb(250, 128, 114) |
|
GFN
|
Sandy Brown | #F4A460 | rgb(244, 164, 95) |
|
GFN
|
Sea Green | #2E8B57 | rgb(46, 139, 87) |
|
GFN
|
Sea Shell | #FFF5EE | rgb(255, 245, 238) |
|
GFN
|
Sienna | #A0522D | rgb(160, 82, 45) |
|
GFN
|
Silver | #C0C0C0 | rgb(192, 192, 192) |
|
GFN
|
Sky Blue | #87CEEB | rgb(135, 206, 235) |
|
GFN
|
Slate Blue | #6A5ACD | rgb(106, 90, 205) |
|
GFN
|
Slate Gray | #708090 | rgb(112, 128, 145) |
|
GFN
|
Snow | #FFFAFA | rgb(255, 250, 250) |
|
GFN
|
Spring Green | #00FF7F | rgb(63, 255, 128) |
|
GFN
|
Steel Blue | #4682B4 | rgb(70, 130, 180) |
|
GFN
|
Tan | #D2B48C | rgb(210, 180, 140) |
|
GFN
|
Teal | #008080 | rgb(26, 128, 127) |
|
GFN
|
Thistle | #D8BFD8 | rgb(216, 191, 216) |
|
GFN
|
Tomato | #FF6347 | rgb(250, 99, 71) |
|
GFN
|
Turquoise | #40E0D0 | rgb(64, 224, 208) |
|
GFN
|
Violet | #EE82EE | rgb(238, 130, 238) |
|
GFN
|
Wheat | #F5DEB3 | rgb(245, 222, 179) |
|
GFN
|
White | #FFFFFF | rgb(255, 255, 255) |
|
GFN
|
White Smoke | #F5F5F5 | rgb(245, 245, 245) |
|
GFN
|
Yellow | #FFFF00 | rgb(255, 255, 0) |
|
GFN
|
Yellow Green | #9ACD32 | rgb(154, 205, 49) |
Cara Penerapan HTML Color Code
Nah setelah mengetahui daftar kode warna HTML dalam format Hex dan RGB di atas, sekarang waktunya belajar cara menerapkannya pada website Anda.
Ada beberapa metode penerapan HTML color code yang bisa Anda coba. Yuk langsung saja kita bahas beberapa metode tersebut dan contoh penerapannya!
1. HEX Color Codes
Salah satu metode penerapan kode warna HTML yang paling umum adalah melalui format hexadecimal color codes atau yang juga dikenal dengan HEX.
HEX color codes terdiri dari kombinasi bilang bulat dari 0 sampai 9 dan 6 angka pertama di alfabet; A, B, C, D, E, dan F. Contoh kombinasi tersebut adalah #FFA500 atau #FFD700.
Setiap kode warna merujuk ke sebuah warna yang spesific. Misalnya, dua contoh kode HEX yang kami berikan diatas merujuk ke warna Orange dan Gold.
Nah untuk mendapatkan kode warna HEX yang Anda inginkan, silakan gunakan daftar warna yang sudah kami sediakan. Selanjutnya, tentukan atribut website yang ingin diberi warna.
Contohnya jika Anda ingin mengubah sub-heading keempat menjadi berwarna Orange, cukup selipkan kode warna HEX seperti berikut ini:
| <h4 style=”color: #FFA500″> GoldenFast Network </h4> |
Nantinya kode tersebut akan terlihat seperti:
GoldenFast Network
Sangat mudah bukan Golden friends? Jika Anda ingin mengubah warna atribut website yang lainnya, ubah kode <h4> </h4> ke atribut pilihan Anda!
2. RGB Value
Metode penerapan kode warna HTML yang lainnya adalah melalui kode RGB value. Metode yang satu ini cukup mudah digunakan. Cara kerjanya pun sama seperti HEX color codes.
Anda hanya perlu menemukan RGB value yang Anda inginkan di daftar atas. Lalu, masukkan kode tersebut di dalam baris kode HTML seperti berikut ini:
| <h4 style=”color: rgb(255,159,53)”> GoldenFast Network</h4> |
Selain memberi warna pada text dan website, RGB value juga sangat populer akan kemampuannya untuk mengubah opacity dari warna tersebut.
Caranya juga cukup mudah. Anda hanya perlu menambahkan atau mengurangi nilai 0.5 pada editor HTML. Semakin rendah nilainya, semakin transparan teksnya.
Untuk contoh, mari kita buat teks dengan warna yang sama menjadi lebih transparan melalui contoh berikut ini:
| <h4 style=”color: rgb(255,159,53, 0.5)”> GoldenFast Network </h4> |
Hasil kode tersebut akan terlihat seperti:
GoldenFast Network
3. Melalui Nama Warna
Cara lain untuk menggunakan kode warna HTML untuk memberikan warna pada website adalah melalui nama warna itu sendiri.
Melalui metode ini, Anda cukup menggunakan baris kode yang sama seperti contoh dan mengganti kode HEX atau RGB ke nama warna itu sendiri.
Contoh kode warna HTML melalui nama warna akan terlihat seperti ini:
| <h4 style=”color: orange”> GoldenFast Network </h4> |
Baca juga: 25+ Perintah Dasar Linux [Lengkap dengan Fungsi & Contohnya]
3 Contoh Website Color Scheme Terbaik
Nah berikut adalah beberapa contoh skema warna terbaik yang bisa Anda tiru untuk menerapkan warna kode HTML pada website!
1. Simple & Mencolok
Salah satu kombinasi color scheme yang terbaik biasanya datang dari website yang mempunyai desain yang simple namun mencolok.
Campuran antara warna-warna yang tenang dan berani dapat membuat pengunjung website merasa lebih tertarik untuk membuka website secara lebih jauh.
2. Elegan dan tenang
Jika website Anda berurusan dengan hal-hal yang elegan dan feminim, contoh color scheme berikut ini bisa menjadi pilihan yang tepat.
Kombinasi dari warna-warna pastel yang elegan dan warna gelap yang terkesan misterius, Anda bisa mendapatkan sebuah website yang terlihat lebih indah.
3. Bold & Berani
Jika Anda ingin membuat website yang mencolok dan terlihat berani, kombinasi warna-warna yang terang dan tegas bisa menjadi pilihan terbaik.
Kombinasi dari warna-warna yang berani memang tidak bisa sembarangan digunakan. Anda hanya bisa melakukannya jika target audiens memang menyukai warna-warna tersebut.
Jika Anda tidak ingin memilih color scheme terbaik untuk website secara manual, Anda juga dapat menggunakan online HTML color code generator loh Golden friends!
Berikut adalah beberapa contoh dari generator warna website online:
Baca juga: PHP Framework Terbaik yang Patut Anda Gunakan
Penutup
Kode warna HTML adalah daftar baris kode yang digunakan untuk menentukan dan mengubah skema warna sebuah website. Mulai dari teks, background, dan lain sebagainya.
Meskipun HTML color coding termasuk skill HTML yang paling dasar, ada banyak hal yang bisa Anda lakukan melalui kode warna tersebut 一 terutama untuk urusan desain front-end website.
Nah pada artikel ini, kami telah membahas semua hal yang perlu Anda ketahui tentang kode warna HTML. Mulai dari pengertian, daftar lengkap, sampai cara penerapannya.
Jika Golden friends masih punya pertanyaan lebih lanjut tentang HTML color coding, silahkan tinggalkan pesan pada kolom bawah ya!
Sekedar mengingatkan, untuk membangun sebuah website yang baik tentunya Anda membutuhkan web server yang handal.
Untungnya, GoldenFast Network punya solusinya! Mulai dari 135 ribuan per bulan saja, Anda bisa mendapatkan Cloud VPS dengan 98% uptime, 24/7 monitoring, dan customer service.
Bukan hanya itu, semua layanan Golden Fast Network juga dilengkapi dengan High Grade hardware kelas enterprise dan juga beberapa tier 1 network loh Golden friends!
Sangat menarik bukan? Yuk langsung saja bergabung dengan GFN!
