daftar kode warna html dan css untuk website lengkap full color untuk penggunaan kode warna hexadecimal yang bisa digunakan gratis dan mudah
Bahasa pemrograman itu ada banyak sekali jenisnya, dimulai dari HTML dan CSS hingga sekelas Python yang memungkinkan kita membuat kecerdasan buatan seperti AI dan Robot.
Jika ditilik dari tingkat kesulitannya sendiri, maka HTML dan CSS masuk ke dalam bahasa pemrograman paling mudah dan bisa dipelajari dengan cepat.
Seperti misalnya, kita dapat membuat warna-warna di dalam tampilan website menggunakan kedua unsur bahasa pemrograman tersebut.
Tentunya HTML dan CSS sendiri memiliki perbedaan serta cara penggunaan yang harus disesuaikan dengan porsi dan tempatnya.
Perbedaan HTML dan CSS
Jadi, sebelum kita mulai melihat daftar kode warna HTML dan CSS, mending kita cek dulu perbedaan dari keduanya biar nanti pas proses penjelasan menjadi jauh lebih mudah.
Secara singkatnya, HTML ini digunakan untuk menyusun konten pada halaman website. Sementara CSS digunakan untuk menambahkan gaya pada konten HTML.
Nah, fungsi utama dari HTML ini adalah untuk menyediakan informasi tampilan berupa berbagai macam tag ke browser kita.
Kemudian CSS akan meningkatkan informasi tersebut dengan memberikan gaya pada tag HTML yang sama.
Memang nampak berbeda, akan tetapi secara prakteknya pada desain website keduanya saling berhubungan dan membantu satu sama lain.
Contoh terbaik untuk meniliknya adalah pada saat pembuatan website dengan builder bernama WordPress, yang mana pada saat pembuatan postingan akan berupa HTML.
Sementara itu, CSS seringkali sudah tersemat di dalam templat wordpress yang telah kita pilih, yang mana menentukan desain dan gaya daripada tampilan UX itu sendiri, termasuk warna tulisan.
Buat kamu yang baru pertama kali melihat bahasa pemrograman semacam ini mungkin akan mengerutkan dahi setinggi monas.
Namun untungnya setelah dipelajari, dasar dari HTML dan CSS tidak terlalu sulit kok! Kamu bisa mulai terbiasa dengan HTML dalam hitungan jam.
CSS dasar juga tidak bikin otak puyeng karena sudah ada beberapa coding dasar yang bisa kita tiru. Namun, CSS tetap bisa menjadi rumit saat kamu mencoba membangun tata letak lanjutan.
Biar lebih afdol, diwajibkan untuk belajar secara bertahap, salah satunya dengan diawali oleh coding warna tulisan.
Daftar Kode Warna HTML dan CSS
Sekalipun memiliki fungsi dan bahasa yang berbeda, akan tetapi HTML dan CSS berbagi kode warna yang sama.
Kode warna ini berupa susunan 6 huruf dan angka dengan tanda hashtag # di depannya. Untuk lebih jelasnya, berikut adalah daftar kode warna dasar HTML dan CSS :
- Putih: #FFFFFF
- Hitam: #000000
- Merah: #FF0000
- Hijau: #00FF00
- Biru: #0000FF
- Kuning: #FFFF00
Jika melihat susunan kode di atas dimulai dari FFFFFF hingga 000000, maka spektrum 24-bit ini akan ada 16 juta lebih kemungkinan warna yang berbeda.
Tidak mungkin dong kita menghafal semuanya secara sekaligus. Sebagai gantinya, kita lihat spektrum kode warna html dan css yang paling banyak digunakan serta lazim dijadikan pilihan.
Daftarnya adalah sebagai berikut:
- Perak: #C0C0C0
- Abu: #80080
- Merah Tua: #800000
- Kuning Langsat: #808000
- Hijau Tua: #008000
- Biru Laut: #00FFFF
- Teal: #008080
- Biru Tua: #000080
- Magenta: #FF00FF
- Ungu: #800080
Sebagai informasi tambahan, enam kode tersebut disebut sebagai hex code, yang berkisar dari 00 dengan intensitas warna terendah, hingga FF yang mewakili intensitas tertinggi.
Menurut bahasa pemrograman sendiri, tentunya putih merupakan spektrum warna dengan intensitas tertinggi, sedangkan hitam adalah kebalikannya.
Cara Memasukan Kode Warna HTML dan CSS
Jika kita bandingkan keduanya, maka HTML cenderung lebih mudah untuk kita pelajari dibandingkan dengan CSS.
Jadi sebagai awalan, mari kita pelajari terlebih dahulu cara memasukan kode warna pada HTML dengan mudah!
Untuk mengatur warna font dalam HTML, maka kita harus menggunakan atribut style. Atribut ini akan menentukan gaya inline untuk sebuah elemen.
Tapi perlu dicatat bahwa HTML5 tidak mendukung tag <font> sehingga gaya CSS harus digabungkan untuk menambahkan warna tersebut.
Sebagai gantinya, kita bisa menggunakan tag <style> di area tulisan yang kita ingin ubah warnanya.
Memiliki kepanjangan Hypertext Markup Language, berikut adalah contoh HTML untuk kode warna yang kamu inginkan:
<p style=”color:#kode_warna”>Aku si Tamfan</p>
Untuk contoh lengkapnya, perhatikan kode berikut:
<html>
<head>
<title>Siapa Aku??</title>
</head>
<body>
<h1>Siapa Aku?</h1>
<p style=”color:#FF0000″>Aku si Tamfan.</p>
</body>
</html>
Saat kita masukan ke dalam HTML editor, maka tampilan halaman dari browser kita akan berbentuk seperti ini:
Siapa Aku?
Aku si Tamfan
Ternyata berubah menjadi merah! Karena seperti yang sudah tertulis di atas bahwa kode warna #FF0000 adalah untuk mengubah tampilan teks menjadi warna merah.
Sementara tag <H1> akan mengubah huruf menjadi Heading 1 dan <title> akan dibaca oleh mesin pencari sebagai judul yang tengah ditargetkan.
Cara Memasukan Kode Warna Pada CSS
Sebenarnya, kode warna pada HTML dan CSS ini ada 6 varian yang berbeda, yakni:
- Keywords (misalnya: red, green, yellow, dsb).
- RGB
- RGBA
- HSL
- HSLA
- Hexadecimal
Dikarenakan keywords lebih terbatas pada warna dasar saja, sementara sisanya selain Hexadecimal cenderung lebih sulit diingat karena berupa angka-angka, maka Hex Code jauh lebih disarankan.
Kemudian berbicara mengenai rule atau aturan coding tersebut, CSS syntax terdiri dari selector dan declaration.
Selector akan menunjuk ke elemen HTML mana yang ingin kamu tambahkan gaya tersebut. sementara declaration berisi kode utama yang dipisahkan oleh titik koma.
Setiap declaration haruslah menyertakan nama properti CSS dan nilai, kemudian dipisahkan lagi oleh titik dua.
Selain itu, declaration juga haruslah dipisahkan dengan titik koma, dan declaration block dikelilingi oleh kurung kurawal.
Biar tak pusing, mending kita lihat contoh aplikasinya saja yuk! Katakanlah kita sudah memasukan kode HTML di atas namun tanpa warna, maka untuk mengubahnya via CSS bisa dibuat seperti ini:
<style>
h1 {
color: #0000FF;
text-align: center;
}
p {
color: red;
text-align: center;
}
</style>
Dengan menggunakan CSS ini, maka kita tak perlu lagi memasukan kode warna pada setiap halaman website yang ingin dibuat, terutama jika dibuat menggunakan website builder berupa WordPress.
Pasalnya, warna dari judul H1 dan paragraf <p> akan diubah secara otomatis sekalipun postingan tak menyertakan kode warna HTML dan CSS.
Misalnya, susunan CSS dan HTML saat digabungkan akan menjadi seperti ini:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #0000FF;
text-align: center;
}
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>Siapa Aku?</h1>
<p>Aku si Tamfan</p>
</body>
</html>
Dengan menggunakan kode CSS dan HTML di atas, maka akan dihasilkan sebuah halaman website seperti ini:
Siapa Aku?
Aku si Tamfan
Tentunya warna ini akan berlaku untuk semua halaman postingan yang telah dibuat ataupun yang akan dibuat selama kode CSS tersebut tersemat di editor utama pada WordPress atau website builder lainnya.
Berikut adalah daftar kode warna html dan css
| Nama | Contoh | Kode warna | RGB | CMYK | HSV | ||
|---|---|---|---|---|---|---|---|
| Abu-abu | #808080 | 128 | 128 | 128 | 58, 50, 47, 0 | 0, 0, 50 | |
| Biru | #0000FF | 0 | 0 | 255 | 95, 73, 0, 0 | 240, 100, 100 | |
| Biru dongker | #000080 | 0 | 0 | 128 | 100, 99, 56, 46 | 240, 100, 50 | |
| Biru laut (Sian) | #00FFFF | 0 | 255 | 255 | 100, 0, 0, 0 | 180,100,100 | |
| Coklat | #964B00 | 150 | 75 | 0 | 59, 82, 100, 43 | 30, 100, 59 | |
| Emas | #FFD700 | 255 | 215 | 0 | 0, 17, 94, 0 | 51, 100, 100 | |
| Hijau | #00FF00 | 0 | 255 | 0 | 62, 0, 100, 0 | 120, 100, 100 | |
| Hitam | #000000 | 0 | 0 | 0 | 93, 88, 89, 90 | 0, 0, 0 | |
| Kuning | #FFFF00 | 255 | 255 | 0 | 0, 0, 255, 0 | 60, 100, 100 | |
| Magenta | #FF00FF | 255 | 0 | 255 | 0, 100, 0, 0 | 300, 100, 100 | |
| Mawar | #FF007F | 255 | 0 | 127 | 0, 100, 50, 0 | 330, 100, 100 | |
| Merah | #FF0000 | 255 | 0 | 0 | 0, 255, 255, 0 | 0, 100, 100 | |
| Merah marun | #800000 | 128 | 0 | 0 | 0, 255, 255, 127 | 0, 100, 50 | |
| Merah jambu | #FFC0CB | 255 | 192 | 203 | 0, 63, 52, 0 | 350, 25, 100 | |
| Nila | #6F00FF | 111 | 0 | 255 | 57, 100, 0, 0 | 266, 100, 100 | |
| Jingga | #FF7F00 | 255 | 127 | 0 | 0, 50, 100, 0 | 30, 100, 100 | |
| Perak | #C0C0C0 | 192 | 192 | 192 | 0, 0, 0, 63 | 0, 0, 75 | |
| Putih | #FFFFFF | 255 | 255 | 255 | 0, 0, 0, 0 | 0, 0, 100 | |
| Ungu | #BF00FF | 191 | 0 | 255 | 25, 100, 0, 0 | 285, 100, 100 | |
| Violet | #8F00FF | 143 | 0 | 255 | 44, 255, 0, 0 | 274, 100, 100 | |
| Zaitun | #808000 | 128 | 128 | 0 | 0, 0, 100, 50 | 60, 100, 50 | |
Berikut ini adalah daftar warna untuk kode HTML:
| Nama Warna | kode Hex RGB |
kode Desimal RGB |
|---|---|---|
| Warna dasar Merah | ||
| Merah Indian | CD 5C 5C | 205 92 92 |
| Koral terang | F0 80 80 | 240 128 128 |
| Salmon | FA 80 72 | 250 128 114 |
| Salmon gelap | E9 96 7A | 233 150 122 |
| Salmon terang | FF A0 7A | 255 160 122 |
| Krimson | DC 14 3C | 220 20 60 |
| Merah | FF 00 00 | 255 0 0 |
| Merah Bata | B2 22 22 | 178 34 34 |
| Merah tua | 8B 00 00 | 139 0 0 |
| Warna dasar Merah Jambu | ||
| Merah muda | FF C0 CB | 255 192 203 |
| Merah muda terang | FF B6 C1 | 255 182 193 |
| Merah muda panas | FF 69 B4 | 255 105 180 |
| Merah muda dalam | FF 14 93 | 255 20 147 |
| MediumVioletRed | C7 15 85 | 199 21 133 |
| PaleVioletRed | DB 70 93 | 219 112 147 |
| Warna dasar Oranye | ||
| Salmon terang | FF A0 7A | 255 160 122 |
| Koral | FF 7F 50 | 255 127 80 |
| Tomat | FF 63 47 | 255 99 71 |
| Merah oranye | FF 45 00 | 255 69 0 |
| Jingga tua | FF 8C 00 | 255 140 0 |
| Jingga | FF A5 00 | 255 165 0 |
| Warna dasar Kuning | ||
| Emas | FF D7 00 | 255 215 0 |
| Kuning | FF FF 00 | 255 255 0 |
| Kuning terang | FF FF E0 | 255 255 224 |
| LemonChiffon | FF FA CD | 255 250 205 |
| LightGoldenrodYellow | FA FA D2 | 250 250 210 |
| PapayaWhip | FF EF D5 | 255 239 213 |
| Moccasin | FF E4 B5 | 255 228 181 |
| PeachPuff | FF DA B9 | 255 218 185 |
| PaleGoldenrod | EE E8 AA | 238 232 170 |
| Khaki | F0 E6 8C | 240 230 140 |
| DarkKhaki | BD B7 6B | 189 183 107 |
| Warna dasar Ungu | ||
| Lavender | E6 E6 FA | 230 230 250 |
| Thistle | D8 BF D8 | 216 191 216 |
| Plum | DD A0 DD | 221 160 221 |
| Violet | EE 82 EE | 238 130 238 |
| Orchid | DA 70 D6 | 218 112 214 |
| Fuchsia | FF 00 FF | 255 0 255 |
| Magenta | FF 00 FF | 255 0 255 |
| MediumOrchid | BA 55 D3 | 186 85 211 |
| MediumPurple | 93 70 DB | 147 112 219 |
| BlueViolet | 8A 2B E2 | 138 43 226 |
| DarkViolet | 94 00 D3 | 148 0 211 |
| DarkOrchid | 99 32 CC | 153 50 204 |
| DarkMagenta | 8B 00 8B | 139 0 139 |
| Ungu | 80 00 80 | 128 0 128 |
| Indigo | 4B 00 82 | 75 0 130 |
| SlateBlue | 6A 5A CD | 106 90 205 |
| DarkSlateBlue | 48 3D 8B | 72 61 139 |
| Warna dasar Hijau | ||
| GreenYellow | AD FF 2F | 173 255 47 |
| Chartreuse | 7F FF 00 | 127 255 0 |
| LawnGreen | 7C FC 00 | 124 252 0 |
| Lime | 00 FF 00 | 0 255 0 |
| LimeGreen | 32 CD 32 | 50 205 50 |
| PaleGreen | 98 FB 98 | 152 251 152 |
| LightGreen | 90 EE 90 | 144 238 144 |
| MediumSpringGreen | 00 FA 9A | 0 250 154 |
| SpringGreen | 00 FF 7F | 0 255 127 |
| MediumSeaGreen | 3C B3 71 | 60 179 113 |
| SeaGreen | 2E 8B 57 | 46 139 87 |
| ForestGreen | 22 8B 22 | 34 139 34 |
| Hijau | 00 80 00 | 0 128 0 |
| DarkGreen | 00 64 00 | 0 100 0 |
| YellowGreen | 9A CD 32 | 154 205 50 |
| OliveDrab | 6B 8E 23 | 107 142 35 |
| Olive | 80 80 00 | 128 128 0 |
| DarkOliveGreen | 55 6B 2F | 85 107 47 |
| MediumAquamarine | 66 CD AA | 102 205 170 |
| DarkSeaGreen | 8F BC 8F | 143 188 143 |
| LightSeaGreen | 20 B2 AA | 32 178 170 |
| DarkCyan | 00 8B 8B | 0 139 139 |
| Teal | 00 80 80 | 0 128 128 |
| Warna dasar Biru | ||
| Aqua | 00 FF FF | 0 255 255 |
| Cyan | 00 FF FF | 0 255 255 |
| LightCyan | E0 FF FF | 224 255 255 |
| PaleTurquoise | AF EE EE | 175 238 238 |
| Aquamarine | 7F FF D4 | 127 255 212 |
| Turquoise | 40 E0 D0 | 64 224 208 |
| MediumTurquoise | 48 D1 CC | 72 209 204 |
| DarkTurquoise | 00 CE D1 | 0 206 209 |
| CadetBlue | 5F 9E A0 | 95 158 160 |
| SteelBlue | 46 82 B4 | 70 130 180 |
| LightSteelBlue | B0 C4 DE | 176 196 222 |
| PowderBlue | B0 E0 E6 | 176 224 230 |
| LightBlue | AD D8 E6 | 173 216 230 |
| SkyBlue | 87 CE EB | 135 206 235 |
| LightSkyBlue | 87 CE FA | 135 206 250 |
| DeepSkyBlue | 00 BF FF | 0 191 255 |
| DodgerBlue | 1E 90 FF | 30 144 255 |
| CornflowerBlue | 64 95 ED | 100 149 237 |
| MediumSlateBlue | 7B 68 EE | 123 104 238 |
| RoyalBlue | 41 69 E1 | 65 105 225 |
| Biru | 00 00 FF | 0 0 255 |
| MediumBlue | 00 00 CD | 0 0 205 |
| DarkBlue | 00 00 8B | 0 0 139 |
| Navy | 00 00 80 | 0 0 128 |
| MidnightBlue | 19 19 70 | 25 25 112 |
| Warna dasar Coklat | ||
| Cornsilk | FF F8 DC | 255 248 220 |
| BlanchedAlmond | FF EB CD | 255 235 205 |
| Bisque | FF E4 C4 | 255 228 196 |
| NavajoWhite | FF DE AD | 255 222 173 |
| Wheat | F5 DE B3 | 245 222 179 |
| BurlyWood | DE B8 87 | 222 184 135 |
| Tan | D2 B4 8C | 210 180 140 |
| RosyBrown | BC 8F 8F | 188 143 143 |
| SandyBrown | F4 A4 60 | 244 164 96 |
| Goldenrod | DA A5 20 | 218 165 32 |
| DarkGoldenrod | B8 86 0B | 184 134 11 |
| Peru | CD 85 3F | 205 133 63 |
| Chocolate | D2 69 1E | 210 105 30 |
| SaddleBrown | 8B 45 13 | 139 69 19 |
| Sienna | A0 52 2D | 160 82 45 |
| Brown | A5 2A 2A | 165 42 42 |
| Maroon | 80 00 00 | 128 0 0 |
| Warna dasar Putih | ||
| Putih | FF FF FF | 255 255 255 |
| Snow | FF FA FA | 255 250 250 |
| Honeydew | F0 FF F0 | 240 255 240 |
| MintCream | F5 FF FA | 245 255 250 |
| Azure | F0 FF FF | 240 255 255 |
| AliceBlue | F0 F8 FF | 240 248 255 |
| GhostWhite | F8 F8 FF | 248 248 255 |
| WhiteSmoke | F5 F5 F5 | 245 245 245 |
| Seashell | FF F5 EE | 255 245 238 |
| Beige | F5 F5 DC | 245 245 220 |
| OldLace | FD F5 E6 | 253 245 230 |
| FloralWhite | FF FA F0 | 255 250 240 |
| Ivory | FF FF F0 | 255 255 240 |
| AntiqueWhite | FA EB D7 | 250 235 215 |
| Linen | FA F0 E6 | 250 240 230 |
| LavenderBlush | FF F0 F5 | 255 240 245 |
| MistyRose | FF E4 E1 | 255 228 225 |
| Warna dasar Abu-abu | ||
| Gainsboro | DC DC DC | 220 220 220 |
| Abu-abu Muda | D3 D3 D3 | 211 211 211 |
| Silver | C0 C0 C0 | 192 192 192 |
| Abu-abu Tua | A9 A9 A9 | 169 169 169 |
| Abu-abu | 80 80 80 | 128 128 128 |
| DimGray | 69 69 69 | 105 105 105 |
| LightSlateGray | 77 88 99 | 119 136 153 |
| SlateGray | 70 80 90 | 112 128 144 |
| DarkSlateGray | 2F 4F 4F | 47 79 79 |
| Hitam | 00 00 00 | 0 0 0 |
Demikian pembahasan mengenai Daftar Kode Warna HTML dan CSS lengkap.