Mungkin kalian kesini karena sedang mencari kode warna-warni html, ini biasanya digunakan untuk mendesain template blog atau tampilan website. Tenang saja kami akan berbagi kepada Sobat kode warna secara lengkap, sebelumnya juga kita sempat menulis Cara Buat Border pada Postingan Blog maka untuk variasi warna yang lain bisa Sobat temukan disini.
Bahwa kode warna HTML berfungsi untuk mempercantik tampilan blog atau website. Penerapannya sangat mudah karena hanya berupa script sederhana yang bisa ditempelkan pada artikel maupun template. Misalnya, kode warna #00fff digunakan untuk menampilkan warna tertentu. Dengan kode-kode ini, kita bisa membuat efek transparan, pelangi, dan berbagai variasi warna lainnya. Cara memasangnya pun sederhana: cukup klik – copy – paste ke dalam HTML artikel atau template.
Jenis Kode Warna
Ada beberapa format penulisan kode warna yang umum digunakan, yaitu:
- RGB (Red, Green, Blue)
- HEX (Hexadecimal)
- CMYK (Cyan, Magenta, Yellow, Black)
Dalam artikel kita ini “Kumpulan Macam-macam Kode Warna CSS Lengkap”, format yang akan dibagiankan juga dalam bentuk CSS Kode Warna HEX (Hexadecimal).
Penjelasan HEX
- Setiap warna ditulis dengan enam digit angka atau huruf.
- Penulisannya diawali dengan tanda #.
- Warna dasar HEX adalah Red (merah), Green (hijau), dan Blue (biru).
- Kombinasi ketiga warna dasar ini akan menghasilkan warna baru dengan kode berbeda-beda.
Cara Menggunakan Kode Warna di HTML secara Sederhana
Dalam HTML, kode warna biasanya dipasang menggunakan atribut style. Atribut ini memungkinkan kita mengatur warna teks, latar belakang, maupun elemen lainnya.
Contoh Penerapan
Berikut contoh penggunaan kode warna orange dengan kode HEX #ffa500:
<b style="color:#ffa500;">Ini contoh menggunakan kode #ffa500 pada HTML</b>Hasilnya, teks akan tampil dengan warna orange.
Dengan memahami fungsi dan cara penggunaan kode warna HTML, Anda bisa lebih leluasa dalam mendesain tampilan blog atau website agar terlihat menarik dan profesional.
Daftar Kode Warna HTML Lengkap
#000000 black
#fof8ff aliceblue
#faebd7 antiquewhite
#00ffff aqua
#7fffd4 aquamarine
#f0ffff azure
#f5f5dc beige
#ffc4e4 bisque
#00ffff blue
#ffebcd blanchedalmond
#8a2be2 blueviolet
#a52a2a brown
#bed887 burlywood
#5f9ead cadetblue
#7fff00 chartreuse
#d2691e chocolate
#ff7f50 coral
#64950 cornflowerblue
#fff8dc cornsilk
#dc143c crimson
#00ffff cyan
#000088 darkblue
#008b8b darkcyan
#b8860b darkgoldenrod
#a9a9a9 darkgray
#006400 darkgreen
#8b008b darkmagenta
#bdb76b darkkhaki
#556b2f darkolivegreen
#ff8c00 darkorange
#9932cc darkorchid
#8b0000 darkred
#e9967a darksalmon
8fbc8b darkseagreen
#483d8b darkslateblue
#2f4f4f darkslategray
#00ce darkturquois
#9400d3 darkviolet
#ff1493 deeppink
#008bfff deepskyblue
#696969 dimgray
#1e90ff dodgerblue
#b22222 pirebrick
#fffaf0 floralwhite
#228b22 forestgreen
#ff00ff fuchsia
#dcdcdc gainsboro
#f8f8ff ghostwhite
#ffd700 gold
#daa520 goldenrod
#808080 gray
#008000 green
#adff2f greenyellow
#f0fff0 honeydew
#ff69b4 hotpink
#cd5c5c indianred
#4b0082 indigo
#fffff0 ivory
f0e68c khaki
#e6e6fa lavender
#fff0f5 lavenderblush
#7cfc00 lawngreen
#fffacd lemonchiffon
#ade8e6 lightblue
#f08080 lightcoral
#e0ffff lightcyan
#fafad2 lightgoldenrodyellow
#90ee90 lightgreen
#d3d3d3 lightgray
#ffb6c1 lightpink
#ffa072 lightsalmon
#20b2aa lightseagreen
#87cefa lightskyblue
#778899 lightslategray
#b0c4de lightsteelblue
#ffffe0 lightyellow
#00ff00 lime
#32cd32 limegreen
#faf0e6 linen
#ff00ff magenta
#80000 maroon
#66cdaa mediumaquamarine
#0000cd mediumblue
#191970 midnightblue
#f5fffa mintcream
#ffe4e1 mistyrose
#f5f5f5 whitesmoke
#ffdead navajowhite
#000080 navy
#fdf5e6 oldlace
#808000 olive
#6e8b23 olivedrab
#ffa500 orange
#ff1000 orangered
#da70d6 orchid
#eee8aa palegoldenrod
#98fb98 palegreen
#afeeee paleturquoise
#db7093 palevioletred
#ffefd5 papayawhip
#ffdab9 peachpuff
#cd853f peru
#ffc0cb pink
#dda0dd plum
#b0e0e6 powderblue
#800080 purple
#ff0000 red
#bc8f8f rosybrown
#4169e1 royalblue
#8b4513 saddlebrown
#fa8072 salmon
#f4a460 sandybrown
#2e8b57 seagreen
#fff5ee seashell
#a0522d siena
#9acd32 yellowgreen
#C0c0c0 silver
#ffffff white
#708090 slategray
#fffafa snow
#00ff7f springgreen
#4682b4 steelblue
#ffff00 yellow
#d2b48c tan
#008080 teal
#d8bfd8 thistle
#ff6347 tomato
#40e0d0 turquoise
#ee82ee violet
#f5deb3 wheat
#87ceeb skyblue
Daftar CSS Kode Warna HEX (Hexadecimal)
| TABEL CSS KODE WARNA HEX (HEXADECIMAL) | ||||||||
| #000000 | #000022 | #000044 | #000066 | #000088 | #0000AA | #0000CC | #0000EE | #0000FF |
| #002200 | #002222 | #002244 | #002266 | #002288 | #0022AA | #0022CC | #0022EE | #0022FF |
| #004400 | #004422 | #004444 | #004466 | #004488 | #0044AA | #0044CC | #0044EE | #0044FF |
| #006600 | #006622 | #006644 | #006666 | #006688 | #0066AA | #0066CC | #0066EE | #0066FF |
| #008800 | #008822 | #008844 | #008866 | #008888 | #0088AA | #0088CC | #0088EE | #0088FF |
| #00AA00 | #00AA22 | #00AA44 | #00AA66 | #00AA88 | #00AAAA | #00AACC | #00AAEE | #00AAFF |
| #00CC00 | #00CC22 | #00CC44 | #00CC66 | #00CC88 | #00CCAA | #00CCCC | #00CCEE | #00CCFF |
| #00EE00 | #00EE22 | #00EE44 | #00EE66 | #00EE88 | #00EEAA | #00EECC | #00EEEE | #00EEFF |
| #00FF00 | #00FF22 | #00FF44 | #00FF66 | #00FF88 | #00FFAA | #00FFCC | #00FFEE | #00FFFF |
| #220000 | #220022 | #220044 | #220066 | #220088 | #2200AA | #2200CC | #2200EE | #2200FF |
| #222200 | #222222 | #222244 | #222266 | #222288 | #2222AA | #2222CC | #2222EE | #2222FF |
| #224400 | #224422 | #224444 | #224466 | #224488 | #2244AA | #2244CC | #2244EE | #2244FF |
| #226600 | #226622 | #226644 | #226666 | #226688 | #2266AA | #2266CC | #2266EE | #2266FF |
| #228800 | #228822 | #228844 | #228866 | #228888 | #2288AA | #2288CC | #2288EE | #2288FF |
| #22AA00 | #22AA22 | #22AA44 | #22AA66 | #22AA88 | #22AAAA | #22AACC | #22AAEE | #22AAFF |
| #22CC00 | #22CC22 | #22CC44 | #22CC66 | #22CC88 | #22CCAA | #22CCCC | #22CCEE | #22CCFF |
| #22EE00 | #22EE22 | #22EE44 | #22EE66 | #22EE88 | #22EEAA | #22EECC | #22EEEE | #00EEFF |
| #22FF00 | #22FF22 | #22FF44 | #22FF66 | #22FF88 | #22FFAA | #22FFCC | #22FFEE | #22FFFF |
| #440000 | #440022 | #440044 | #440066 | #440088 | #4400AA | #4400CC | #4400EE | #4400FF |
| #442200 | #442222 | #442244 | #442266 | #442288 | #4422AA | #4422CC | #4422EE | #4422FF |
| #444400 | #444422 | #444444 | #444466 | #444488 | #4444AA | #4444CC | #4444EE | #4444FF |
| #446600 | #446622 | #446644 | #446666 | #446688 | #4466AA | #4466CC | #4466EE | #4466FF |
| #448800 | #448822 | #448844 | #448866 | #448888 | #4488AA | #4488CC | #4488EE | #4488FF |
| #44AA00 | #44AA22 | #44AA44 | #44AA66 | #44AA88 | #44AAAA | #44AACC | #44AAEE | #44AAFF |
| #44CC00 | #44CC22 | #44CC44 | #44CC66 | #44CC88 | #44CCAA | #44CCCC | #44CCEE | #44CCFF |
| #44EE00 | #44EE22 | #44EE44 | #44EE66 | #44EE88 | #44EEAA | #44EECC | #44EEEE | #44EEFF |
| #44FF00 | #44FF22 | #44FF44 | #44FF66 | #44FF88 | #44FFAA | #44FFCC | #44FFEE | #44FFFF |
| #660000 | #660022 | #660044 | #660066 | #660088 | #6600AA | #6600CC | #6600EE | #6600FF |
| #662200 | #662222 | #662244 | #662266 | #662288 | #6622AA | #6622CC | #6622EE | #6622FF |
| #664400 | #664422 | #664444 | #664466 | #664488 | #6644AA | #6644CC | #6644EE | #6644FF |
| #666600 | #666622 | #666644 | #666666 | #666688 | #6666AA | #6666CC | #6666EE | #6666FF |
| #668800 | #668822 | #668844 | #668866 | #668888 | #6688AA | #6688CC | #6688EE | #6688FF |
| #66AA00 | #66AA22 | #66AA44 | #66AA66 | #66AA88 | #66AAAA | #66AACC | #66AAEE | #66AAFF |
| #66CC00 | #66CC22 | #66CC44 | #66CC66 | #66CC88 | #66CCAA | #66CCCC | #66CCEE | #66CCFF |
| #66EE00 | #66EE22 | #66EE44 | #66EE66 | #66EE88 | #66EEAA | #66EECC | #66EEEE | #66EEFF |
| #66FF00 | #66FF22 | #66FF44 | #66FF66 | #66FF88 | #66FFAA | #66FFCC | #66FFEE | #66FFFF |
| #880000 | #880022 | #880044 | #880066 | #880088 | #8800AA | #8800CC | #8800EE | #8800FF |
| #882200 | #882222 | #882244 | #882266 | #882288 | #8822AA | #8822CC | #8822EE | #8822FF |
| #884400 | #884422 | #884444 | #884466 | #884488 | #8844AA | #8844CC | #8844EE | #8844FF |
| #886600 | #886622 | #886644 | #886666 | #886688 | #8866AA | #8866CC | #8866EE | #8866FF |
| #888800 | #888822 | #888844 | #888866 | #888888 | #8888AA | #8888CC | #8888EE | #8888FF |
| #88AA00 | #88AA22 | #88AA44 | #88AA66 | #88AA88 | #88AAAA | #88AACC | #88AAEE | #88AAFF |
| #88CC00 | #88CC22 | #88CC44 | #88CC66 | #88CC88 | #88CCAA | #88CCCC | #88CCEE | #88CCFF |
| #88EE00 | #88EE22 | #88EE44 | #88EE66 | #88EE88 | #88EEAA | #88EECC | #88EEEE | #88EEFF |
| #88FF00 | #88FF22 | #88FF44 | #88FF66 | #88FF88 | #88FFAA | #88FFCC | #88FFEE | #88FFFF |
| #AA0000 | #AA0022 | #AA0044 | #AA0066 | #AA0088 | #AA00AA | #AA00CC | #AA00EE | #AA00FF |
| #AA2200 | #AA2222 | #AA2244 | #AA2266 | #AA2288 | #AA22AA | #AA22CC | #AA22EE | #AA22FF |
| #AA4400 | #AA4422 | #AA4444 | #AA4466 | #AA4488 | #AA44AA | #AA44CC | #AA44EE | #AA44FF |
| #AA6600 | #AA6622 | #AA6644 | #AA6666 | #AA6688 | #AA66AA | #AA66CC | #AA66EE | #AA66FF |
| #AA8800 | #AA8822 | #AA8844 | #AA8866 | #AA8888 | #AA88AA | #AA88CC | #AA88EE | #AA88FF |
| #AAAA00 | #AAAA22 | #AAAA44 | #AAAA66 | #AAAA88 | #AAAAAA | #AAAACC | #AAAAEE | #AAAAFF |
| #AACC00 | #AACC22 | #AACC44 | #AACC66 | #AACC88 | #AACCAA | #AACCCC | #AACCEE | #AACCFF |
| #AAEE00 | #AAEE22 | #AAEE44 | #AAEE66 | #AAEE88 | #AAEEAA | #AAEECC | #AAEEEE | #AAEEFF |
| #AAFF00 | #AAFF22 | #AAFF44 | #AAFF66 | #AAFF88 | #AAFFAA | #AAFFCC | #AAFFEE | #AAFFFF |
| #BB0000 | #BB0022 | #BB0044 | #BB0066 | #BB0088 | #BB00AA | #BB00CC | #BB00EE | #BB00FF |
| #BB2200 | #BB2222 | #BB2244 | #BB2266 | #BB2288 | #BB22AA | #BB22CC | #BB22EE | #BB22FF |
| #BB4400 | #BB4422 | #BB4444 | #BB4466 | #BB4488 | #BB44AA | #BB44CC | #BB44EE | #BB44FF |
| #BB6600 | #BB6622 | #BB6644 | #BB6666 | #BB6688 | #BB66AA | #BB66CC | #BB66EE | #BB66FF |
| #BB8800 | #BB8822 | #BB8844 | #BB8866 | #BB8888 | #BB88AA | #BB88CC | #BB88EE | #BB88FF |
| #BBAA00 | #BBAA22 | #BBAA44 | #BBAA66 | #BBAA88 | #BBAAAA | #BBAACC | #BBAAEE | #BBAAFF |
| #BBCC00 | #BBCC22 | #BBCC44 | #BBCC66 | #BBCC88 | #BBCCAA | #BBCCCC | #BBCCEE | #BBCCFF |
| #BBEE00 | #BBEE22 | #BBEE44 | #BBEE66 | #BBEE88 | #BBEEAA | #BBEECC | #BBEEEE | #BBEEFF |
| #BBFF00 | #BBFF22 | #BBFF44 | #BBFF66 | #BBFF88 | #BBFFAA | #BBFFCC | #BBFFEE | #BBFFFF |
| #CC0000 | #CC0022 | #CC0044 | #CC0066 | #CC0088 | #CC00AA | #CC00CC | #CC00EE | #CC00FF |
| #CC2200 | #CC2222 | #CC2244 | #CC2266 | #CC2288 | #CC22AA | #CC22CC | #CC22EE | #CC22FF |
| #CC4400 | #CC4422 | #CC4444 | #CC4466 | #CC4488 | #CC44AA | #CC44CC | #CC44EE | #CC44FF |
| #CC6600 | #CC6622 | #CC6644 | #CC6666 | #CC6688 | #CC66AA | #CC66CC | #CC66EE | #CC66FF |
| #CC8800 | #CC8822 | #CC8844 | #CC8866 | #CC8888 | #CC88AA | #CC88CC | #CC88EE | #CC88FF |
| #CCAA00 | #CCAA22 | #CCAA44 | #CCAA66 | #CCAA88 | #CCAAAA | #CCAACC | #CCAAEE | #CCAAFF |
| #CCCC00 | #CCCC22 | #CCCC44 | #CCCC66 | #CCCC88 | #CCCCAA | #CCCCCC | #CCCCEE | #CCCCFF |
| #CCEE00 | #CCEE22 | #CCEE44 | #CCEE66 | #CCEE88 | #CCEEAA | #CCEECC | #CCEEEE | #CCEEFF |
| #CCFF00 | #CCFF22 | #CCFF44 | #CCFF66 | #CCFF88 | #CCFFAA | #CCFFCC | #CCFFEE | #CCFFFF |
| #DD0000 | #DD0022 | #DD0044 | #DD0066 | #DD0088 | #DD00AA | #DD00CC | #DD00EE | #DD00FF |
| #DD2200 | #DD2222 | #DD2244 | #DD2266 | #DD2288 | #DD22AA | #DD22CC | #DD22EE | #DD22FF |
| #DD4400 | #DD4422 | #DD4444 | #DD4466 | #DD4488 | #DD44AA | #DD44CC | #DD44EE | #DD44FF |
| #DD6600 | #DD6622 | #DD6644 | #DD6666 | #DD6688 | #DD66AA | #DD66CC | #DD66EE | #DD66FF |
| #DD8800 | #DD8822 | #DD8844 | #DD8866 | #DD8888 | #DD88AA | #DD88CC | #DD88EE | #DD88FF |
| #DDAA00 | #DDAA22 | #DDAA44 | #DDAA66 | #DDAA88 | #DDAAAA | #DDAACC | #DDAAEE | #DDAAFF |
| #DDBB00 | #DDBB22 | #DDBB44 | #DDBB66 | #DDBB88 | #DDBBAA | #DDBBCC | #DDBBEE | #DDBBFF |
| #DDCC00 | #DDCC22 | #DDCC44 | #DDCC66 | #DDCC88 | #DDCCAA | #DDCCCC | #DDCCEE | #DDCCFF |
| #DDDD00 | #DDDD22 | #DDDD44 | #DDDD66 | #DDDD88 | #DDDDAA | #DDDDCC | #DDDDEE | #DDDDFF |
| #DDEE00 | #DDEE22 | #DDEE44 | #DDEE66 | #DDEE88 | #DDEEAA | #DDEECC | #DDEEEE | #DDEEFF |
| #DDFF00 | #DDFF22 | #DDFF44 | #DDFF66 | #DDFF88 | #DDFFAA | #DDFFCC | #DDFFEE | #DDFFFF |
| #EE0000 | #EE0022 | #EE0044 | #EE0066 | #EE0088 | #EE00AA | #EE00CC | #EE00EE | #EE00FF |
| #EE2200 | #EE2222 | #EE2244 | #EE2266 | #EE2288 | #EE22AA | #EE22CC | #EE22EE | #EE22FF |
| #EE4400 | #EE4422 | #EE4444 | #EE4466 | #EE4488 | #EE44AA | #EE44CC | #EE44EE | #EE44FF |
| #EE6600 | #EE6622 | #EE6644 | #EE6666 | #EE6688 | #EE66AA | #EE66CC | #EE66EE | #EE66FF |
| #EE8800 | #EE8822 | #EE8844 | #EE8866 | #EE8888 | #EE88AA | #EE88CC | #EE88EE | #EE88FF |
| #EEAA00 | #EEAA22 | #EEAA44 | #EEAA66 | #EEAA88 | #EEAAAA | #EEAACC | #EEAAEE | #EEAAFF |
| #EEBB00 | #EEBB22 | #EEBB44 | #EEBB66 | #EEBB88 | #EEBBAA | #EEBBCC | #EEBBEE | #EEBBFF |
| #EECC00 | #EECC22 | #EECC44 | #EECC66 | #EECC88 | #EECCAA | #EECCCC | #EECCEE | #EECCFF |
| #EEDD00 | #EEDD22 | #EEDD44 | #EEDD66 | #EEDD88 | #EEDDAA | #EEDDCC | #EEDDEE | #EEDDFF |
| #EEEE00 | #EEEE22 | #EEEE44 | #EEEE66 | #EEEE88 | #EEEEAA | #EEEECC | #EEEEEE | #EEEEFF |
| #EEFF00 | #EEFF22 | #EEFF44 | #EEFF66 | #EEFF88 | #EEFFAA | #EEFFCC | #EEFFEE | #EEFFFF |
| #FF0000 | #FF0022 | #FF0044 | #FF0066 | #FF0088 | #FF00AA | #FF00CC | #FF00EE | #FF00FF |
| #FF2200 | #FF2222 | #FF2244 | #FF2266 | #FF2288 | #FF22AA | #FF22CC | #FF22EE | #FF22FF |
| #FF4400 | #FF4422 | #FF4444 | #FF4466 | #FF4488 | #FF44AA | #FF44CC | #FF44EE | #FF44FF |
| #FF6600 | #FF6622 | #FF6644 | #FF6666 | #FF6688 | #FF66AA | #FF66CC | #FF66EE | #FF66FF |
| #FF8800 | #FF8822 | #FF8844 | #FF8866 | #FF8888 | #FF88AA | #FF88CC | #FF88EE | #FF88FF |
| #FFAA00 | #FFAA22 | #FFAA44 | #FFAA66 | #FFAA88 | #FFAAAA | #FFAACC | #FFAAEE | #FFAAFF |
| #FFBB00 | #FFBB22 | #FFBB44 | #FFBB66 | #FFBB88 | #FFBBAA | #FFBBCC | #FFBBEE | #FFBBFF |
| #FFCC00 | #FFCC22 | #FFCC44 | #FFCC66 | #FFCC88 | #FFCCAA | #FFCCCC | #FFCCEE | #FFCCFF |
| #FFDD00 | #FFDD22 | #FFDD44 | #FFDD66 | #FFDD88 | #FFDDAA | #FFDDCC | #FFDDEE | #FFDDFF |
| #FFEE00 | #FFEE22 | #FFEE44 | #FFEE66 | #FFEE88 | #FFEEAA | #FFEECC | #FFEEEE | #FFEEFF |
| #FFFF00 | #FFFF22 | #FFFF44 | #FFFF66 | #FFFF88 | #FFFFAA | #FFFFCC | #FFFFEE | #FFFFFF |