{"id":6955,"date":"2021-06-23T03:32:00","date_gmt":"2021-06-22T20:32:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=6955"},"modified":"2021-06-22T12:06:00","modified_gmt":"2021-06-22T05:06:00","slug":"kode-warna-css-dan-html","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/kode-warna-css-dan-html\/","title":{"rendered":"Kode Warna CSS dan HTML"},"content":{"rendered":"\n<p>Kalian sudah tahu kah kalau skema warna merupakan salah satu faktor yang menentukan keberhasilan atau kegagalan sebuah website? Warna adalah elemen yang dapat memberikan dampak secara psikologis bagi si pengamat. Lalu, apa sih yang dimaksud dengan kode warna CSS dan kode warna HTML? Oke, yuk baca <strong>Kode Warna CSS dan HTML<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Serba-serbi Kode Warna <\/strong><\/h2>\n\n\n\n<p>Kode warna HTML (Hypertext Markup Language) ditandai dengan enam karakter setelah tagar (#), misalnya #000000. Warna HTML diatur dengan menggunakan kode HEX yang merupakan gagasan heksadesimal dari RGB.<\/p>\n\n\n\n<p>Kalian perlu tahu nih bahwa warna diwakili oleh tiga kelompok angka HEX, yang mana setiap kelompok merepresentasikan warna tertentu. Tiga warna tersebut adalah merah, hijau, dan biru dan model warna yang tersusun dari ketiganya disebut dengan RGB (<em>Red, Green, Blue)<\/em>.<\/p>\n\n\n\n<p><em>Background <\/em>dari sebuah website merupakan bagian penting yang perlu mendapat perhatian juga lho, Guys. Dengan bantuan CSS (<em>Cascading Style Sheets<\/em>), kalian bisa membuat latar belakang halaman web dan entri lainnya. Anyway, CSS juga memungkinkan kalian untuk menggunakan sekitarnya 16.777.216 warna yang masing-masing diwakili oleh nama, kode RGB, atau kode HEX.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Daftar Kode Warna CSS dan HTML <\/strong><\/h2>\n\n\n\n<p>Berikut ini kode warna CSS dan HTML yang bisa kalian jadikan referensi untuk <em>color branding<\/em> atau <em>web design<\/em>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"727\" height=\"448\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-1.png\" alt=\"kode-warna-html-1\" class=\"wp-image-6958\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-1.png 727w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-1-300x185.png 300w\" sizes=\"auto, (max-width: 727px) 100vw, 727px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"520\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-2.png\" alt=\"kode-warna-html-2\" class=\"wp-image-6959\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-2.png 728w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-2-300x214.png 300w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"479\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-3.png\" alt=\"kode-warna-html-3\" class=\"wp-image-6960\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-3.png 730w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-3-300x197.png 300w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"722\" height=\"515\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-4.png\" alt=\"kode-warna-html-4\" class=\"wp-image-6961\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-4.png 722w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-4-300x214.png 300w\" sizes=\"auto, (max-width: 722px) 100vw, 722px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"518\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-5.png\" alt=\"kode-warna-html-5\" class=\"wp-image-6962\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-5.png 728w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-5-300x213.png 300w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"731\" height=\"519\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-6.png\" alt=\"kode-warna-html-6\" class=\"wp-image-6963\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-6.png 731w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-6-300x213.png 300w\" sizes=\"auto, (max-width: 731px) 100vw, 731px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-7.png\"><img loading=\"lazy\" decoding=\"async\" width=\"725\" height=\"514\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-7.png\" alt=\"kode-warna-html-7\" class=\"wp-image-6964\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-7.png 725w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-7-300x213.png 300w\" sizes=\"auto, (max-width: 725px) 100vw, 725px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-8.png\"><img loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"518\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-8.png\" alt=\"kode-warna-html-8\" class=\"wp-image-6965\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-8.png 729w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-8-300x213.png 300w\" sizes=\"auto, (max-width: 729px) 100vw, 729px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-9.png\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"517\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-9.png\" alt=\"kode-warna-html-9\" class=\"wp-image-6966\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-9.png 728w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-9-300x213.png 300w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-9.png\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"517\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-9.png\" alt=\"kode-warna-html-9\" class=\"wp-image-6966\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-9.png 728w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-9-300x213.png 300w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-10.png\"><img loading=\"lazy\" decoding=\"async\" width=\"726\" height=\"521\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-10.png\" alt=\"kode-warna-html-10\" class=\"wp-image-6968\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-10.png 726w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-10-300x215.png 300w\" sizes=\"auto, (max-width: 726px) 100vw, 726px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-11.png\"><img loading=\"lazy\" decoding=\"async\" width=\"723\" height=\"524\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-11.png\" alt=\"kode-warna-html-11\" class=\"wp-image-6969\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-11.png 723w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-11-300x217.png 300w\" sizes=\"auto, (max-width: 723px) 100vw, 723px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-12.png\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"81\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-12.png\" alt=\"kode-warna-html-12\" class=\"wp-image-6970\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-12.png 730w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-12-300x33.png 300w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Nah, kalian juga dapat melihat perbedaan mengenai hexadecimal dan RGB<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-13.png\"><img loading=\"lazy\" decoding=\"async\" width=\"727\" height=\"430\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-13.png\" alt=\"kode-warna-html-13\" class=\"wp-image-6971\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-13.png 727w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/06\/kode-warna-html-13-300x177.png 300w\" sizes=\"auto, (max-width: 727px) 100vw, 727px\" \/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cara Penggunaan Kode Warna <\/strong><\/h2>\n\n\n\n<p>Penggunaan kode warna HTML tidak hanya membuat website terlihat lebih menarik tapi juga meningkatkan peluang pengunjung untuk datang kembali. Setuju dong pastinya!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Penggunaan Kode Warna untuk HTML Font <\/strong><\/h3>\n\n\n\n<p>Untuk mengubah warna teks pada seluruh halaman website, kalian bisa mendefinisikannya di <em>tag <\/em>&lt;body&gt;. Sedangkan untuk mengubah warna pada satu atau sebagian kecil teks, kalian bisa menggunakan tag font yang lama dengan format:<\/p>\n\n\n\n<p>&lt;font color = \u201c# ff0000\u201d&gt; text &lt;\/font&gt;<\/p>\n\n\n\n<p>Warna dalam HTML harus didefinisikan sebagai kode HEX, yang mana merupakan kode enam digit yang mewakili jumlah warna merah, hijau, dan biru (RGB), misal:<\/p>\n\n\n\n<p>&lt;font color = \u201cgreen\u201d&gt; text &lt;\/font&gt;<\/p>\n\n\n\n<p>Sejumlah browser baru memungkinkan kalian untuk memberi nama warna seperti yang dicontohkan di atas tetapi opsi yang kalian punya lebih terbatas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Penggunaan Kode Warna untuk HTML Background <\/strong><\/h3>\n\n\n\n<p>Mengubah warna <em>background <\/em>halaman web sebenarnya cukup sederhana. Cara pertama dan paling populer adalah dengan menggunakan kode warna HEX dengan properti <em>background-color<\/em>.<\/p>\n\n\n\n<p>Kalian bisa menerapkan kode warna HEX langsung pada elemen HTML &lt;body&gt; menggunakan atribut <em>style <\/em>seperti di bawah ini.<\/p>\n\n\n\n<p>&lt;body style=\u201dbackground-color:#FF0000;\u201d&gt;<\/p>\n\n\n\n<p>&lt;\/body&gt;<\/p>\n\n\n\n<p>Metode di atas bisa digunakan untuk menata hampir semua elemen HTML. Namun, perlu diingat bahwa langkah-langkahnya mungkin berbeda Guys, bergantung pada apakah elemen-elemen tersebut sebaris atau bertingkat.<\/p>\n\n\n\n<p>Nah, Kawan-kawan, memang penting untuk mengetahui daftar kode warna di HTML dan CSS. Penggunaan kode warna sendiri hampir digunakan di berbagai bagian di pengembangan website. Penggunaan warna tepat serta menarik di website, terbukti mampu mempengaruhi <em>user experience. <\/em>Jadi, silakan gunakan daftar kode di atas agar bisa membantu kalian ya \ud83d\ude42<\/p>\n\n\n\n<p>Oya Guys, <a href=\"https:\/\/www.jetorbit.com\/\">Jetorbit<\/a> menyediakan web hosting terbaik dan <a href=\"https:\/\/www.jetorbit.com\/domain\/\">domain murah<\/a> di tahun 2021 ini. Nah, kalian bisa banget nih memanfaatkan jasa pembuatan website <a href=\"https:\/\/www.jetorbit.com\/jasa-website-toko-online\/\">toko online<\/a> dan jasa pembuatan <a href=\"https:\/\/www.jetorbit.com\/100-website-umkm\/\">website untuk UMKM<\/a>. &nbsp;Selain itu, kami juga menyediakan VPS dan bisa kalian cek <a href=\"https:\/\/www.jetvm.com\/\" target=\"_blank\" rel=\"noopener\">di sini<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kalian sudah tahu kah kalau skema warna merupakan salah satu faktor yang menentukan keberhasilan atau kegagalan sebuah website? Warna adalah elemen yang dapat memberikan dampak secara psikologis bagi si pengamat. Lalu, apa sih yang dimaksud dengan kode warna CSS dan kode warna HTML? Oke, yuk baca Kode Warna CSS dan HTML Serba-serbi Kode Warna Kode &#8230; <a title=\"Kode Warna CSS dan HTML\" class=\"read-more\" href=\"https:\/\/www.jetorbit.com\/blog\/kode-warna-css-dan-html\/\" aria-label=\"Read more about Kode Warna CSS dan HTML\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":6956,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[1832,283,7,1834,1833,1827,1829,1828,1835,1831,1830],"class_list":["post-6955","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-angka-hex","tag-domain-murah","tag-hosting-murah","tag-kode-hex","tag-kode-rgb","tag-kode-warna","tag-kode-warna-css","tag-kode-warna-html","tag-penggunaan-kode-warna","tag-rgb","tag-skema-warna","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/6955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=6955"}],"version-history":[{"count":2,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/6955\/revisions"}],"predecessor-version":[{"id":6972,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/6955\/revisions\/6972"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/6956"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=6955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=6955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=6955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}