Salah satu hal penting yang juga harus dipikirkan dalam membuat website adalah masalah desain. Desain yang baik akan membuat pengunjung website anda nyaman dan betah berlama – lama. Salah satu hal yang pastinya penting untuk pembuatan desain ini adalah pemilihan warna.
Pemilihan warna tentu tidak bisa sembarangan. Warna haruslah melambangkan seperti apa konten yang ada dalam web anda. Dalam banyak hal pemilihan warna juga akan berperan dalam menentukan estetika desain dari web anda. Lalu bagaimana memberi warna pada halaman web?.
Ada banyak cara untuk memberikan warna pada web yang anda buat. Salah satunya dengan menggunakan kode warna HTML. Dalam dunia pemograman, warna – warna yang kita kenal ini dirubah ke dalam bentuk kode. Ada dua sistem untuk kode warna di HTML. Ada yang menggunanakan sistem HEXA dan juga sistem RGB. Kedua cara ini merupakan cara yang umum digunakan untuk memberikan warna menggunakan bahasa HTML.
Berikut adalah kode warna HTML lengkap dengan menggunakan sistem hexa dan juga RGB.
Kode warna HTML dan CSS
| Warna | 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) |
Cara Penggunaan Kode Warna di HTML
Setelah mengetahui kode warna di HTML, maka anda bisa langsung mencobanya dengan membuat text sederahana. Pada penulisannya, kode warna di HTML ini bisa ditulis dengan menggunakan kode hexa, RGB ataupun dengan nama warna yang kita inginkan dalam bahasa inggris. Ini merupakan contoh pemberian warna menggunakan kode warna HTML
<html>
<head>
<title>Contoh warna</title>
</head>
<body>
<h1 style="color:#7FFFD4">contoh warna</h1>
<h1 style="color:rgb(255, 255, 0)">contoh warna</h1>
<h1 style="color:red"> contoh warna</h1>
</body>
</html>Kode seperti di atas akan menampilkan seperti ini
Pada line pertama warna dibuat dengan menggunakan kode hexa :#7FFFD4 untuk warna aqua marine. Pada line kedua warna dibuat dengan menggunakan kode RGB 255, 255, 0 untuk warna kuning. Sementara pada line ketiga warna dibuat dengan menuliskan warna yang kita inginkan yaitu red.
Ada banyak cara untuk mengetahui kode warna baik secara hexa maupun RGB. Bisa mencari secara online ataupun melalui web generator. Ada beberapa web generator yang menyediakan data lengkap tentang kode warna secara hexa ataupun RGB. Kita juga bisa membuat kode warna yang kita inginkan. Beberapa web generator tersebut seperti
- W3Scholl HTML Color Picker
- Colors & Skillshare
- HTML Color Code
Sementara jika kita ingin mengetahui kode warna dari suatu gambar yang sudah ada, maka kita bisa menggunakan aplikasi salah satunya adalah Adobe Photoshop.
Dalam penggunaannya, warna – warna ini bisa diaplikasikan untuk banyak hal. Merubah warna font, Membuat shading atau backgroud pada tulisan, ataupun memberi warna untuk border line. Berikut adalah contoh – contoh penggunaannya.
1. Memberi Warna Font
Warna pada font – font di atas bisa dirubah menggunakan kode seperti ini
<html>
<head>
<title>Contoh Warna</title>
</head>
<body>
<h1 style="color:#FF4500">Contoh warna pada font</h1>
<h1 style="color:rgb(128, 128, 1)">Contoh warna pada font</h1>
<h1 style="color:Tomato;">Contoh warna pada font</h3>
</body>
</html>Ini merupakan salah satu contoh penggunaan kode warna HTML untuk merubah warna font.
2. Membuat Warna untuk Border
Border atau garis batas, biasa dibuat ketika anda membuat sebuah tabel. Garis ini juga bisa diberi warna menggunakan kode HTML. Dengan kode seperti di bawah ini :
<html>
<head>
<title>Contoh Warna</title>
</head>
<body>
<h1 style="border: 3px solid #0000FF;">Contoh warna untuk border</h1>
<h1 style="border: 3px dotted rgb(165, 42, 42);">Contoh warna untuk border</h1>
<h1 style="border: 3px dashed Crimson;">Contoh warna untuk border</h1>
</body>
</html>
Kode di atas akan menghasilkan seperti ini
Angka pada px merupakan ukuran untuk ketebalan border sementara solid, dotted, dan dashed merupakan jenis border yang akan dipakai.
3. Memberi Warna untuk Background
Hal lain yang juga bisa dibuat menggunakan kode warna HTML ini adalah background untuk tulisan. Seperti contoh di bawah ini.
Untuk membuat seperti di atas maka kita bisa menggunakan kode seperti ini :
<html>
<head>
<title>Contoh Warna</title>
</head>
<body>
<h1 style="background-color:#7FFF00;">Contoh warna untuk background</h1>
<h1 style="background-color:rgb(189, 183, 107);">Contoh warna untuk background</h1>
<h1 style="background-color:darkred;">Contoh warna untuk background</h1>
</body>
</html>Kode di atas berfungsi untuk membuat background atau shading pada sebuah tulisan.
Selain menggunakan kode HTML, pemberian warna juga bisa menggunakan CSS. Cara menggunakan CSS ini tidak jauh berbeda dengan HTML. Keduanya masih menggunakan kode yang sama, yaitu hexa, RGB, ataupun nama warna dalam bahasa inggris.
Nantinya semua yang berhubungan dengan tampilan dari sebuah web akan lebih banyak menggunakan bahasa pemograman CSS ini. Dibanding menggunakan HTML, untuk masalah desain seperti warna font, backgroud, border dan lainnya dianggap lebih ringkas dengan menggunakan CSS.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development