Kode Warna Html Dan Css - SEON Digital Marketing

Daftar Kode Warna HTML dan CSS Lengkap untuk Website

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.