Skema pemilihan komposisi kode warna HTML pada proses pembuatan website, aplikasi, dan proyek lain menjadi tantangan tersendiri bagi blogger maupun developer. Tahapan ini tidak hanya membutuhkan waktu lama, tetapi juga memerlukan pemahaman psikologi agar nantinya hasilnya 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.

Daftar Isi show

Tips Memilih Warna

Dengan memahami tips dalam memilih warna, Anda bisa menghindari warna yang terkesan ‘asal-asalan’. Berikut tipsnya:

1. Memilih Warna Berdasarkan Fokus Perusahaan

Sebenarnya, ada banyak warna yang bisa dipilih ketika membangun sebuah merek/perusahaan. Nah, pertimbangan penting yang perlu Anda lakukan adalah memilih berdasarkan fokus perusahaan. Misalnya, jika perusahaan atau merek Anda bergelut tentang kuliner, maka komposisi warna yang banyak digunakan biasanya yang mengandung nuansa merah atau kuning. Sementara itu, untuk merek travel mayoritas menggunakan warna biru untuk menunjukkan kesan profesional. Meski terlihat sepele, psikologi warna juga menjadi salah satu faktor audiens untuk tertarik pada sebuah merek, lho. Menurut fakta yang disampaikan oleh Web Tribunal, sebanyak 85% penentu pembelian yang dilakukan oleh pelanggan dipengaruhi oleh warna, serta kesadaran merek dapat meningkat sebanyak 80% karena pemilihan warna yang tepat. Selain itu, antara 62% dan 90% first impressions (kesan pertama) sebuah produk ditentukan oleh visual yang dimiliki.

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. Bila Anda perhatikan, sebagain besar merek-merek besar yang ada di dunia pasti hanya menggunakan seidkit warna dalam setiap produk mereka. Sehingga, dalam hal ini, calon pelanggan pun dapat mengenali merek Anda lebih mudah. Contohnya adalah perusahaan makanan cepat saji asal Amerika Serikat yang terkenal dengan ayam gorengnya, McD. Penggunaan warna pada logo hingga website McD tidak jauh-jauh dari warna merah dan kuning.

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. Contoh website yang menggunakan warna dominan netral adalah milik Apple. Jika Anda membukanya, tampilannya sangat sederhana tetapi kesan elegan sagat terasa.

Buat Website Pertama dengan Hosting

Daftar Kode Wana HTML Lengkap Full Color & CSS

Daftar Kode Warna HTML & CSS Lengkap Full Color

Berikut ini merupakan daftar kode warna HTML, yang kami dapatkan dari referensi daftar warna Wikipedia dan beberapa sumber lain, lengkap dengan contoh warna yang dihasilkan. Kode HEX menggunakan kode warna yang diawali tanda pagar (#), sementara kode RGB 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 pada aplikasi baik itu di perangkat komputer atau smartphone.

Warna Asli	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 untuk Referensi

Setelah Anda melihat daftar kode warna HTML & CSS lengkap, coba simak referensi penggunaan warna dan kombinasi bila diterapkan pada website.

1. Segar dan Tenang

colorfull and balance qwords — Colorful 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. Gelap

Kontemporer desain qwords — Desain gelap

Seperti kita ketahui,beberapa terakhir ranah desain sedang dihebohkan dengan mode gelap yang tidak hanya populer digunakan pada website, tapi juga di aplikasi smartphone. Apple adalah salah satu perusahaan yang turut memopulerkan tren ini, setelah mereka merilis versi mode gelap pada antarmuka MacOS dan iOS. Untuk mendapatkan kesan gelap yang lebih estetis, Anda bisa memadukan unsur hitam dengan warna aksen berani seperti contoh kombinasi di atas.

Baca Juga: Kiat Sukses Membangun Personal Branding Lewat Website

3. Energik (Penuh Energi)

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

4. Flat

Kesan unik dan menyenangkan akan muncul 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, di mana hampir sepenuhnya tidak menggunakan efek tiga dimensi.

5. Lively and Inviting

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

Sudah Memilih Warna yang Tepat?

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 oleh audiens. Selain para desainer, Anda yang ingin membuat website terutama untuk bisnis juga wajib memilih warna yang tepat ya, Sahabat Qwords. Jangan sampai pengunjung yang melihatnya merasa tidak nyaman karena penggunaan warna yang kurang tepat. Nah, berbicara soal website, kami punya solusi terbaik di samping pemilihan kode warna HTML seperti di atas, yaitu pilihan hosting terbaik untuk website.

Beli Hosting Murah untuk Website Bisnis

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 dan fitur keamanan yang baik, serta ruang penyimpanan besar sehingga mampu menampung lebih banyak kunjungan dibandingkan paket hosting standar. Jadi, kombinasi pemilihan warna HTML yang tepat, ditambah hosting yang hebat, kesuksesan pun bisa Anda raih dengan cepat. Yuk, buat website Anda sekarang!

10 Replies to “Daftar Kode Warna HTML & CSS…”

resa says:

1 August 2020 at 3:46 PM

sangat bagus
1. Eril says:
  
  3 August 2020 at 3:00 PM
  
  Terima kasih sudah berkunjung di blog Qwords
  jangan lupa untuk urusan domain hosting percayakan pada Qwords saja.
2. iPhone 3G Jerman says:
  
  14 September 2020 at 6:23 PM
  
  Trima kasih banyak kak penjelasannya
Aceer says:

16 August 2020 at 2:10 PM

lengkap di sini , kebetulan saya lag cari kombinasi warna , nemu di sini, makasih ya ka
1. adminblog says:
  
  25 August 2020 at 11:22 AM
  
  Sama-sama kak,
  Jangan lupa untuk urusan domain hosting percayakan pada Qwords saja.
LANGGAMMUTIARA RADIO says:

19 October 2020 at 12:43 AM

Mantap gan. sangat membantu. terimakasih banyak. salam sukses.
1. Eril says:
  
  19 October 2020 at 2:29 PM
  
  Sama-sama kak, selamat bercoding ria membuat website.
  jangan lupa kalau butuh domain hosting bisa langsung pesannya di Qwords saja ya.
Akses Info says:

10 September 2022 at 2:03 PM

Terimaksih bro, Sangat membantu untuk memvariasikan warna di web baru saya. Terimaksih sekali lagi
1. Eril Obeit Choiri says:
  
  12 September 2022 at 8:35 AM
  
  Sama-sama kak,
  Kalau butuh domain hosting bisa cek di Qwords.com
Jasa Pengiriman Barang says:

2 November 2023 at 9:25 AM

Terima kasih , sangat membantu dalam pembuatan website

Daftar Kode Warna HTML & CSS Lengkap Full Color