Skema pemilihan komposisi kode warna HTML pada proses pembuatan website menjadi tantangan tersendiri bagi blogger maupun web developer. Tahapan ini tidak hanya membutuhkan waktu lama, tapi juga memerlukan pemahaman psikologi agar nantinya bisa disukai banyak pengguna.

Dalam dunia pemrograman, penerapan komposisi warna sendiri dilakukan dengan menuliskan susunan enam karakter alfanumerik atau hexadecimal. Biasanya kode warna HTML dituliskan dalam komposisi triplets, dimana setiap dua digit karakter mewakili warna dasar berbasis RGB (Red, Green, Blue) atau #RRGGBB.

Contoh penerapan warna berbasis kode HTML bisa Anda lihat pada paragraf berikutnya tentang macam-macam kode warna HTML & CSS. Namun, sebelumnya mari kita bahas terlebih dahulu tentang tips memilih warna yang baik sesuai kebutuhan masing-masing pengguna.

 

Tips Memilih Warna 

tips memilih warna
tips memilih warna

1.Memilih Warna Berdasarkan Fokus Perusahaan

Ada beragam warna yang bisa dipilih ketika membangun brand, dan pertimbangan penting yang perlu Anda lakukan adalah memilih berdasarkan fokus perusahaan. Misalnya, jika perusahaan atau brand Anda bergelut tentang kuliner maka komposisi warna yang banyak digunakan biasanya yang mengandung nuansa merah atau kuning. Sementara untuk brand travel mayoritas menggunakan warna biru sebagai kesan profesional.

Baca juga: Pentingnya Mengetahui Psikologi Warna Untuk Keperluan Bisnis

2.Jangan Terlalu Banyak Memasukkan Warna

Ide dasar dalam pemilihan warna adalah agar konsumen lebih mudah mengenali brand ketika sedang mencari produk yang dibutuhkan. Maka dari itu, usahakan untuk menjaga kombinasi warna seminimal mungkin dan lebih menonjolkan warna tertentu sebagai bagian dari branding.

3.Warna Netral Relatif Lebih Aman

Jika Anda masih bingung dan kesulitan dalam menentukan warna brand, salah satu opsi yang bisa digunakan adalah warna netral. Jenis warna netral yang kerap digunakan yakni abuabu, perak, emas, hitam, putih, cokelat, atau krem. Untuk memberikan kesan ekslusif Anda tinggal mengarahkan desainer dalam pemilihan tone hangat atau dingin sehingga lebih pas dengan perusahaan.

 

Daftar Kode Wana HTML & CSS

Daftar Kode Warna HTML & CSS Lengkap Full Color
Daftar Kode Warna HTML & CSS Lengkap Full Color

Berikut ini merupakan daftar kode warna HTML mengambil referensi dari daftar warna Wikipedia dan beberapa sumber lain, lengkap dengan contoh warna yang dihasilkan, kode HEX untuk penerapan di website, serta kode RGB yang terdiri dari susunan angka.

Selain bisa digunakan untuk mempercantik tampilan website, kode warna HTML ini juga bisa digunakan sebagai referensi bagi desainer grafis ketika membuat logo, poster, maupun banner d aplikasi smartphone maupun komputer.

Nama Warna HEX RGB
Qwords
Alice Blue #F0F8FF rgb(240, 248, 254)
Qwords
Antique White #FAEBD7 rgb(251, 235, 217)
Qwords
Aqua #00FFFF rgb(0, 255, 254)
Qwords
Aquamarine #7FFFD4 rgb(115, 255, 216)
Qwords
Azure #F0FFFF rgb(239, 255, 255)
Qwords
Beige #F5F5DC rgb(245, 245, 223)
Qwords
Bisque #FFE4C4 rgb(255, 227, 200)
Qwords
Black #000000 rgb(0, 0, 0)
Qwords
Blanched Almond #FFEBCD rgb(255, 234, 208)
Qwords
Blue #0000FF rgb(0, 0, 255)
Qwords
Blue Violet #8A2BE2 rgb(138, 43, 226)
Qwords
Brown #A52A2A rgb(165, 42, 42)
Qwords
Burly Wood #DEB887 rgb(222, 184, 135)
Qwords
Cadet Blue #5F9EA0 rgb(95, 158, 160)
Qwords
Chartreuse #7FFF00 rgb(127, 255, 1)
Qwords
Chocolate #D2691E rgb(210, 105, 30)
Qwords
Coral #FF7F50 rgb(251, 127, 80)
Qwords
Cornflower Blue #6495ED rgb(100, 149, 237)
Qwords
Cornsilk #FFF8DC rgb(225, 248, 220)
Qwords
Crimson #DC143C rgb(220, 20, 60)
Qwords
Cyan #00FFFF rgb(62, 254, 255)
Qwords
Dark Blue #00008B rgb(0, 0, 139)
Qwords
Dark Cyan #008B8B rgb(29, 139, 139)
Qwords
Dark Golden Rod #B8860B rgb(184, 134, 11)
Qwords
Dark Gray #A9A9A9 rgb(169, 169, 169)
Qwords
Dark Green #006400 rgb(19, 100, 0)
Qwords
Dark Khaki #BDB76B rgb(189, 183, 107)
Qwords
Dark Magenta #8B008B rgb(139, 0, 140)
Qwords
Dark Olive Green #556B2F rgb(85, 107, 47)
Qwords
Dark Orange #FF8C00 rgb(251, 140, 1)
Qwords
Dark Orchid #9932CC rgb(153, 50, 204)
Qwords
Dark Red #8B0000 rgb(139, 5, 0)
Qwords
Dark Salmon #E9967A rgb(233, 150, 122)
Qwords
Dark Sea Green #8FBC8F rgb(143, 188, 144)
Qwords
Dark Slate Blue #483D8B rgb(72, 61, 139)
Qwords
Dark Slate Gray #2F4F4F rgb(47, 79, 79)
Qwords
Dark Turquoise #00CED1 rgb(48, 206, 209)
Qwords
Dark Violet #9400D3 rgb(148, 0, 211)
Qwords
Deep Pink #FF1493 rgb(249, 19, 147)
Qwords
Deep Sky Blue #00BFFF rgb(43, 191, 254)
Qwords
Dim Gray #696969 rgb(105, 105, 105)
Qwords
Dodger Blue #1E90FF rgb(30, 144, 255)
Qwords
Fire Brick #B22222 rgb(178, 34, 33)
Qwords
Floral White #FFFAF0 rgb(255, 250, 240)
Qwords
Forest Green #228B22 rgb(34, 139, 35)
Qwords
Fuchsia #FF00FF rgb(249, 0, 255)
Qwords
Gainsboro #DCDCDC rgb(220, 220, 220)
Qwords
Ghost White #F8F8FF rgb(248, 248, 255)
Qwords
Gold #FFD700 rgb(253, 215, 3)
Qwords
Golden Rod #DAA520 rgb(218, 165, 32)
Qwords
Gray #808080 rgb(128, 128, 128)
Qwords
Green #008000 rgb(27, 128, 1)
Qwords
Green Yellow #ADFF2F rgb(173, 255, 48)
Qwords
Honey Dew #F0FFF0 rgb(240, 255, 240)
Qwords
Hot Pink #FF69B4 rgb(240, 255, 240)
Qwords
Indian Red #CD5C5C rgb(205, 92, 92)
Qwords
Indigo #4B0082 rgb(75, 0, 130)
Qwords
Ivory #FFFFF0 rgb(255, 255, 239)
Qwords
Khaki #F0E68C rgb(240, 230, 140)
Qwords
Lavender #E6E6FA rgb(230, 230, 250)
Qwords
Lavender Blush #FFF0F5 rgb(254, 240, 245)
Qwords
Lawn Green #7CFC00 rgb(124, 252, 2)
Qwords
Lemon Chiffon #FFFACD rgb(255, 250, 205)
Qwords
Light Blue #ADD8E6 rgb(173, 216, 230)
Qwords
Light Coral #F08080 rgb(240, 128, 128)
Qwords
Light Cyan #E0FFFF rgb(224, 255, 255)
Qwords
Light Golden Rod Yellow #FAFAD2 rgb(250, 250, 210)
Qwords
Light Gray #D3D3D3 rgb(211, 211, 211)
Qwords
Light Green #90EE90 rgb(144, 238, 144)
Qwords
Light Pink #FFB6C1 rgb(252, 182, 193)
Qwords
Light Salmon #FFA07A rgb(251, 160, 122)
Qwords
Light Sea Green #20B2AA rgb(40, 178, 170)
Qwords
Light Sky Blue #87CEFA rgb(135, 206, 250)
Qwords
Light Slate Gray #778899 rgb(119, 136, 153)
Qwords
Light Steel Blue #B0C4DE rgb(176, 196, 222)
Qwords
Light Yellow #FFFFE0 rgb(255, 255, 224)
Qwords
Lime #00FF00 rgb(63, 255, 0)
Qwords
Lime Green #32CD32 rgb(50, 205, 50)
Qwords
Linen #FAF0E6 rgb(250, 240, 230)
Qwords
Magenta #FF00FF rgb(249, 0, 255)
Qwords
Maroon #800000 rgb(128, 4, 0)
Qwords
Medium Aqua Marine #66CDAA rgb(102, 205, 170)
Qwords
Medium Blue #0000CD rgb(0, 0, 205)
Qwords
Medium Orchid #BA55D3 rgb(186, 85, 211)
Qwords
Medium Purple #9370DB rgb(147, 112, 219)
Qwords
Medium Sea Green #3CB371 rgb(60, 179, 113)
Qwords
Medium Slate Blue #7B68EE rgb(123, 103, 238)
Qwords
Medium Spring Green #00FA9A rgb(62, 250, 153)
Qwords
Medium Turquoise #48D1CC rgb(72, 209, 204)
Qwords
Medium Violet Red #C71585 rgb(199, 21, 133)
Qwords
Midnight Blue #191970 rgb(25, 25, 112)
Qwords
Mint Cream #F5FFFA rgb(245, 255, 250)
Qwords
Misty Rose #FFE4E1 rgb(254, 228, 225)
Qwords
Moccasin #FFE4B5 rgb(254, 228, 181)
Qwords
Navajo White #FFDEAD rgb(254, 222, 173)
Qwords
Navy #000080 rgb(0, 0, 128)
Qwords
Old Lace #FDF5E6 rgb(253, 245, 230)
Qwords
Olive #808000 rgb(128, 128, 1)
Qwords
Olive Drab #6B8E23 rgb(107, 142, 35)
Qwords
Orange #FFA500 rgb(252, 165, 3)
Qwords
Orange Red #FF4500 rgb(250, 69, 1)
Qwords
Orchid #DA70D6 rgb(218, 112, 214)
Qwords
Pale Golden Rod #EEE8AA rgb(238, 232, 170)
Qwords
Pale Green #98FB98 rgb(152, 251, 153)
Qwords
Pale Turquoise #AFEEEE rgb(175, 238, 239)
Qwords
Pale Violet Red #DB7093 rgb(219, 112, 147)
Qwords
Papaya Whip #FFEFD5 rgb(254, 239, 213)
Qwords
Peach Puff #FFDAB9 rgb(253, 218, 185)
Qwords
Peru #CD853F rgb(205, 133, 63)
Qwords
Pink #FFC0CB rgb(252, 192, 203)
Qwords
Plum #DDA0DD rgb(221, 160, 221)
Qwords
Powder Blue #B0E0E6 rgb(176, 224, 230)
Qwords
Purple #800080 rgb(128, 0, 128)
Qwords
Rebecca Purple #663399 rgb(102, 51, 153)
Qwords
Red #FF0000 rgb(255, 0, 0)
Qwords
Rosy Brown #BC8F8F rgb(188, 143, 142)
Qwords
Royal Blue #4169E1 rgb(65, 105, 225)
Qwords
Saddle Brown #8B4513 rgb(139, 69, 19)
Qwords
Salmon #FA8072 rgb(250, 128, 114)
Qwords
Sandy Brown #F4A460 rgb(244, 164, 95)
Qwords
Sea Green #2E8B57 rgb(46, 139, 87)
Qwords
Sea Shell #FFF5EE rgb(255, 245, 238)
Qwords
Sienna #A0522D rgb(160, 82, 45)
Qwords
Silver #C0C0C0 rgb(192, 192, 192)
Qwords
Sky Blue #87CEEB rgb(135, 206, 235)
Qwords
Slate Blue #6A5ACD rgb(106, 90, 205)
Qwords
Slate Gray #708090 rgb(112, 128, 145)
Qwords
Snow #FFFAFA rgb(255, 250, 250)
Qwords
Spring Green #00FF7F rgb(63, 255, 128)
Qwords
Steel Blue #4682B4 rgb(70, 130, 180)
Qwords
Tan #D2B48C rgb(210, 180, 140)
Qwords
Teal #008080 rgb(26, 128, 127)
Qwords
Thistle #D8BFD8 rgb(216, 191, 216)
Qwords
Tomato #FF6347 rgb(250, 99, 71)
Qwords
Turquoise #40E0D0 rgb(64, 224, 208)
Qwords
Violet #EE82EE rgb(238, 130, 238)
Qwords
Wheat #F5DEB3 rgb(245, 222, 179)
Qwords
White #FFFFFF rgb(255, 255, 255)
Qwords
White Smoke #F5F5F5 rgb(245, 245, 245)
Qwords
Yellow #FFFF00 rgb(255, 255, 0)
Qwords
Yellow Green #9ACD32 rgb(154, 205, 49)

 

Contoh Kombinasi Warna Website Populer di Tahun 2020

 

1. Fresh dan Tenang

colorfull and balance qwords
colorfull and balance

Inspirasi warna ini berasal dari karakteristik perusahaan yang tenang dan bisa diandalkan. Cerminan ini bisa dilihat dengan jelas pada kombinasi warna biru tua imperials dan hijau zamrud yang mendominasi bagian latar belakang.

 

2. Dark 

Kontemporer desain qwords
Dark desain

Seperti kita ketahui, dua tahun terakhir ranah desain sedang dihebohkan dengan fitur dark mode yang tidak hanya populer digunakan pada website, tapi juga di aplikasi smartphone. Apple adalah salah satu perusahaan yang turut mempopulerkan trend ini, setelah mereka merilis versi dark pada User Interface MacOS dan iOS.

Untuk mendapatkan kesan dark mode yang lebih astetik, Anda bisa memadukan unsur hitam dengan warna aksen berani seperti contoh kombinasi ini.

Baca juga: Kiat Sukses Membangun Personal Branding Lewat Website

3. Energik

Energik
Energik

Perpaduan warna crayon yang ceria pada desain ini sangat cocok untuk diaplikasikan kedalam website perusahaan yang mengusung visi optimis. Untuk menambah kesan kekinian, Anda bisa menambahkan elemen berbasis Flat desain yang saat ini sedang digandrungi oleh para webmaster untuk mengundang banyak kunjungan.

 

4. Flat

Flat desain
Flat desain

Sangat unik dan menyenangkan ketika melihat website perusahaan yang mengusung konsep flat atau datar pada elemen yang digunakan. Anda bisa melihat pada contoh perpaduan kode warna HTML pada gambar ini, dimana hampir sepenuhnya tidak menggunakan efek tiga dimensi.

 

5. Lively and Inviting

Terminologi
Terminologi

Desain dengan dominasi warna biru aqua bisa menjadi alternatif desain terbaik yang bisa diterapkan kedalam website modern. Website seperti ini sangat cocok untuk mempresentasikan perusahaan dengan target utama anak muda atau generasi milenial yang sehari-hari akrab dengan teknologi.

 

Penutup

 

Tidak diragukan lagi, warna merupakan salah satu aspek penting yang harus diperhatikan dengan seksama ketika membuat desain. Dengan adanya daftar kode warna HTML serta beberapa contoh desain website di atas, diharapkan Anda bisa semakin sukses dalam membuat desain yang banyak disukai pengunjung.

Terlepas dari aspek desain, gunakan juga paket hosting dan domain terbaik yang dirancang untuk mengakomodir kebutuhan sekala perusahaan, agar bisnis bisa semakin berkembang. Salah satu layanan hosting yang recommended digunakan adalah paket Business Cloud Hosting dari Qwords.com. Pasalnya, paket web hosting Indonesia yang khusus ditujukan untuk website bisnis tersebut sudah dibekali dengan teknologi kekinian serta space besar sehingga mampu menmpung lebih banyak kunjungan dibandingkan paket hosting standar.

Sekian pembahasan kali ini, semoga bermanfaat.

5 Replies to “Daftar Kode Warna HTML & CSS Lengkap Full Color

    1. Terima kasih sudah berkunjung di blog Qwords
      jangan lupa untuk urusan domain hosting percayakan pada Qwords saja.

Leave a Reply

Your email address will not be published. Required fields are marked *