Kode Warna HTML dan CSS – Pada bahasa pemprogaman dilakukan dengan menggunakan kode, begitu juga dengan warna bagi sebagian orang munkin sudah tidak asing lagi dengan code warna yang biasa digunakan seperti #F0F8FF dan #000000.
Dibagi menjadi beberapa type pada setiap warna di bahasa progam komputer yaitu hexadecimal, RGB, RGBA, HSL, dan HSLA.
Hexadesimal merupakan kombinasi dari beberapa huruf dan angka dan dimulai dengan #, sedangkan RGB merukapan tiga bagian angka yang dipisahkan oleh tanda koma.
Daftar Isi
Daftar Kode Warna HTML Lengkap
Warna merukapan hal yang unik di dalam dunia visual, dengan warna bisa menggambarkan mood atau kepribadian seseorang dan juga pemilihan warna tergantung dari selera karena setiap orang pasti punya selera yang berbeda.
Dibawah ini adalah Daftar Kode Warna HTML dan CSS yang dapat membuat tampilan website Anda semakin menarik perhatian pengunjung.
| Nama Warna | Kode Heximal | 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 Goldenrod 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) |
Dan ini adalah warna dari hexadecimal, Anda dapat melihat perbedannya.
| Color |
HTML / CSS Color Name |
Hex Code #RRGGBB |
Decimal Code (R,G,B) |
|---|---|---|---|
| lightsalmon | #FFA07A | rgb(255,160,122) | |
| salmon | #FA8072 | rgb(250,128,114) | |
| darksalmon | #E9967A | rgb(233,150,122) | |
| lightcoral | #F08080 | rgb(240,128,128) | |
| indianred | #CD5C5C | rgb(205,92,92) | |
| crimson | #DC143C | rgb(220,20,60) | |
| firebrick | #B22222 | rgb(178,34,34) | |
| red | #FF0000 | rgb(255,0,0) | |
| darkred | #8B0000 | rgb(139,0,0) |
Cara Menggunakan Kode Warna
Memilih dan menggunakan warna kesukaan Anda tentunya akan membuat website atau blog semakin menarik dan tentunya nyaman untuk di pandang.
1. Cara Menggunakan Kode Warna HTML di Font
Anda dapat merubah warna pada setiap font di seluruh halaman website dengan cara mendefinisikannya di tag <body>. Namun jika hanya merubah warna hanya beberapa kata atau kalimat bisa menggunakan kode seperti ini yang menggunakan hexadecimal dan RGB
<font color = “#ff0000”> hexadecimal </font>
<font color = “green”> RGB </font>Maka tampilannya akan seperti ini :
RGB
2. Cara Menggunakan Kode Warna HTML di Background
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:#ff0000;}
#p2 {background-color:#00ff00;}
#p3 {background-color:#0000ff;}
#p4 {background-color:#ffff00;}
#p5 {background-color:#ff00ff;}
</style>
</head>
<body>
<p>HEX colors:</p>
<p id=”p1″>Red</p>
<p id=”p2″>Green</p>
<p id=”p3″>Blue</p>
<p id=”p4″>Yellow</p>
<p id=”p5″>Cerise</p>
</body>
</html>Maka tampilannya akan seperti ini :
Red
Green
Blue
Yellow
Ungu
Generator Warna
Selain menggunakan kode warna HTML diatas Anda juga bisa tentunya menggunakan generator warna yang disediakan oleh website ini :
Penutup
Pantinya pemilihan warna agar semakin menariknya website Anda tentunya untuk menarik mata pengunjung dan memanjakannya. Sebelumnya tentu Anda sudah tau bagaimana cara membuat website kan?
Pemilihan warna yang sesuai dengan kepribadian pemiliknya yang bisa menggambarkan berbagai macam hal. Daftar kode warna pada HTML dan CSS semoga bisa membantu mencari referensi warna yang Anda inginkan.