Mau tahu cara mengubah skema warna website kamu sendiri? Daftar kode warna CSS dan HTML lengkap full color ini bisa jadi referensi kamu.

Tampilan visual adalah salah satu elemen yang membuat pengunjung tertarik dan betah berlama-laman di website kita. Dan warna adalah salah satu faktor yang penting dalam membuat tampilan visual website yang baik.

Seberapa penting skema warna pada sebuah website? Cek saja dua contoh berikut ini. Kira-kira mana skema warna yang lebih baik?

Dibandingkan gambar pertama, gambar kedua menggunakan dua warna yang jauh lebih menarik. Dengan kontras yang tidak terlalu tinggi, teks akan lebih mudah dibaca dan nyaman saat dilihat lebih lama. Jadi jika kamu ingin memberi user experience yang baik, pilihlah skema warna yang baik pula.

Untungnya mengubah warna pada website dapat dilakukan dengan mudah.

Pada tema/template gratis opsinya mungkin akan sedikit terbatas dibanding versi premium. Namun hal ini bukanlah masalah besar jika kita bisa sedikit HTML dan CSS.

Dan jika kamu butuh inspirasi, daftar kode warna CSS dan HTML lengkap full color ini bisa kamu contek!

Daftar Kode Warna HTML Lengkap

Untuk membuat daftar kode warna CSS dan HTML lengkap mungkin tidak akan bisa dilakukan di sini karena kombinasi warna RGB bisa mencapai 16 juta warna.

Namun berdasarakan situs W3School, ada 140 nama warna yang disupport oleh hampir semua browser.

(Perhatikan, yang saya maksud NAMA WARNA yah! Jadi semua warna tetap bisa ditampilkan di browser apapun, namun jika kita ingin menggunakan warna pada CSS dengan memakai nama warna tersebut, hanya 140 warna ini saja yang bisa digunakan. Agar lebih jelas, kamu bisa melihat cara menggunakan kode warna HTML di bawah tabel ini!)

  Nama Warna 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)

Sebagai informasi, kode HEX dengan deretan angka/huruf yang sama bisa ditulis sebagian saja. Sebagai contoh, kode warna #FFF sama dengan #FFFFFF yang digunakan untuk warna putih.

Alternatif Daftar Kode Warna CSS Lengkap

Jika warna di atas masih kurang lengkap (dan kayaknya iya), ada beberapa situs di mana kamu bisa melihat lebih banyak daftar kode warna CSS. Beberapa di antaranya adalah:

  • W3School HTML Color Picker – Situs online ini dapat digunakan untuk memilih warna berdasarkan warna-warna dasar pada tabel di atas. Jika kita memilih salah satu warna tersebut, akan ada opsi warna lain yang lebih banyak berdasarkan tingkat saturasi warna yang dipilih. Setiap warna yang terpilih akan ditampilkan lengkap dengan kode warna RGB, HEX, dan HSL.
  • Material Color – Situs ini menyediakan beragam tools untuk kamu yang ingin memiliki tampilan berdasarkan material design yang banyak digunakan pada beragam desain produk Google atau aplikasi Android. Di sini kamu bisa memilih warna-warna pilihan pada material palette yang disediakan. Untuk setiap warna yang dipilih, kamu juga akan mendapat dua rekomendasi warna lainnya yang saling melengkapi.
  • HTML Color Code – Pada situs ini terdapat dua cara untuk memilih warna. pertama kita bisa cek kode warna populer dari HTML Color Chart. Kedua, kita bisa memilih warna secara random menggunakan HTML Color picker. Nantinya kita bisa melihat kode HEX warna yang kita pilih.

Cara Menggunakan Kode Warna HTML & CSS

Sebagai informasi pembuka, warna-warna di atas tidak hanya bisa digunakan pada teks saja tetapi juga bisa dipakai untuk mengubah warna background hingga border juga.

Jika kamu perhatikan, ada tiga kolom penting berisi kode yang bisa dipakai untuk menampilkan sebuah warna pada elemen website. Dengan tabel kode warna CSS di atas, kamu bisa menampilkan warna memakai nama warna, kode HEX, atau kode RGB.

Meski begitu, praktik yang umum digunakan adalah dengan menggunakan kode HEX yang terdiri dari kombinasi angka dan huruf.

1. Cara Menggunakan Kode Warna HTML pada Teks

Untuk menggunakan kode warna HTML pada setiap paragraf di sebuah website, kita bisa menambahkan kode berikut ini pada file CSS,

/* Menggunakan Kode Warna dengan Nama Warna */
p {color: MediumVioletRed;}
​
/* Menggunakan Kode Warna dengan kode HEX */
p {color: #C71585}
​
/* Menggunakan Kode Warna dengan kode RGB */
p {color: rgb(199, 21, 133)}

Jika kita hanya ingin menampilkan warna pada satu kata saja, kita bisa mengunakan inline CSS seperti contoh berikut.

<p>Perhatikan, hanya <span style="color:#C71585">teks</span> ini saja yang warnanya berbeda!</p>
​
/* Alternatif kode (hanya pada browser yang support HTML5 */
<p>Perhatikan, hanya <font color="#C71585">teks</font> ini saja yang warnanya berbeda!</p>

Jika berhasil, maka kamu bisa melihat contoh seperti ini,

Perhatikan, hanya teks ini saja yang warnanya berbeda!

2. Cara Menggunakan Kode Warna HTML pada Background

Untuk menggunakan kode warna HTML pada backgrond, kita bisa menggunakan background-color seperti pada contoh berikut ini

// Mengganti warna background dengan CSS //
.kotak {background-color: #F0F8FF}

// Mengganti warna background dengan inline CSS //
<p style="background-color:#F0F8FF">Teks dalam paragraf ini akan memiliki warna background yang berbeda.</p>

Jika berhasil, kamu akan melihat contoh sebagai berikut,

Teks dalam paragraf ini akan memiliki warna background yang berbeda.

3. Cara Menggunakan Kode Warna HTML pada Border

Untuk mengganti warna border, kita bisa menggunakan kode CSS seperti pada contoh berikut ini,

// Mengganti warna background dengan CSS //
.kotak {border:2px solid #FF6347}

// Mengganti warna background dengan inline CSS //
<p style="border:2px solid #FF6347">Teks dalam paragraf ini akan memiliki warna border yang berbeda.</p>

Jika berhasil, kamu akan melihat contoh sebagai berikut,

Teks dalam paragraf ini akan memiliki warna border yang berbeda.

4. Cara Menggunakan Warna Transparan di HTML dan CSS

Selain warna-warna solid, kita juga bisa menggunakan warna transparan pada kode HTML dan CSS. Dengan warna ini, sebuah elemen akan terlihat menyatu dengan warna yang ada di belakangnya.

Untuk menggunakannya, kita bisa memakai kode warna seperti pada contoh berikut ini,

p {background-color: transparent}

atau, jika kita ingin mengatur tingkat transparansinya,

p {opacity: 0.5}

Bagaimana, mudah kan mengganti warna dengan kode warna HTML dan CSS lengkap full color di atas?

Dari pengalaman saya, mengetahui cara mengganti warna secara manual akan sangat membantu sekali jika kita menggunakan template/tema gratisan pada blog kita. Dengan begitu kita tidak perlu bergantung pada developer tema jika hanya ingin mengubah warna pada salah satu elemen website.

1 Comment

Write A Comment