Cara menggunakan html warna latar belakang

Question

Background merupakan salah satu elemen terpenting yang harus diperhatikan oleh pemilik website agar tampilan website menjadi lebih menarik atau nyaman untuk dilihat.

Table of Contents Show

Pada artikel kali ini saya akan membahas background dan cara merubahnya pada file html

Untuk dapat mengubah background dokumen html, Anda dapat melakukannya dengan berbagai cara, misalnya dengan mengubah warna atau menambahkan gambar.

Daftar isi

#1 Mengubah Latar Belakang dengan Warna

Untuk mengubah warna background kita akan menggunakan atribut background-color

<style type="text/css">
    body {
        background-color: yellow;
    }
</style>

Perhatikan contoh berikut

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Background Warna</title>
    <style> 
        body {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- konten halaman -->
</body>
</html>

_

Pada contoh di atas, kita mencoba mengubah warna background body menjadi kuning

#2 Mengubah Latar Belakang dengan Gambar

Sedangkan untuk mengganti background dengan gambar menggunakan atribut background-image

<style type="text/css">
    body {
        background-image: url("nama_gambar.jpg");
    }
</style>

Untuk mengatur gambar Anda dapat menambahkan beberapa atribut berikut

background-repeat_. untuk mengatur jenis pengulangan gambar jika layar lebih lebar dari gambar
background-position. untuk mengatur tata letak gambar (atas/kiri/kanan/bawah/tengah)
background-size. untuk mengatur ukuran gambar. (otomatis/berisi/penutup)

Silakan lakukan eksperimen agar Anda mengetahui perbedaannya

Perhatikan contoh berikut

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Background Warna</title>
    <style> 
        body {
            background-image: url("nama_gambar.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <!-- konten halaman -->
</body>
</html>

Demikian ulasan tentang cara mengganti background HTML, semoga informasi diatas bermanfaat. Jangan lewatkan rangkaian panduan belajar HTML kami

Yasin K adalah Penulis Konten Teknis untuk Blog Niagahoster. Kata lain adalah hal-hal tidak penting yang tidak perlu Anda ketahui. Biarkan konten berbicara sendiri. )

Beranda » Wawasan Bisnis » Tips & Trik< /a> » Daftar Lengkap Kode Warna HTML CSS dan Cara Menggunakannya

Daftar Kode Warna CSS HTML Lengkap dan Cara Menggunakannya

10 Juni 2022 7 mnt dibaca

Kode warna HTML yang wajib diketahui saat akan melakukan pewarnaan. Baik untuk situs web, aplikasi, dan proyek grafis lainnya

Masalahnya, terkadang orang tidak mengetahui kode warna HTML CSS dari warna yang ingin digunakan. Apalagi ada dua jenis kode warna di internet, yaitu RGB dan Hexadecimal

Untungnya, pada artikel ini, kami akan memperkenalkan Anda pada kode warna HTML terlengkap. Penasaran kan?

Daftar Isi

Kode Warna HTML dan CSS

Berikut ini adalah daftar lengkap kode warna HTML dan CSS berdasarkan kode Hexadecimal (HEX) dan RGB untuk Anda gunakan sebagai referensi

Hasil Warna Nama Warna HEX Kode Warna Kode Warna RGB

.

Alice Biru#F0F8FFrgb(240, 248, 254)

.

Antik Putih#FAEBD7rgb(251, 235, 217)

.

Aqua#00FFFFrgb(0, 255, 254)

.

Aquamarine#7FFFD4rgb(115, 255, 216)

.

Azure#F0FFFFrgb(239, 255, 255)

.

Krem#F5F5DCrgb(245, 245, 223)

.

Biskuit#FFE4C4rgb(255, 227, 200)

.

Hitam#000000rgb(0, 0, 0)

.

Almond Rebus#FFEBCDrgb(255, 234, 208)

.

Biru#0000FFrgb(0, 0, 255)

.

Biru Ungu#8A2BE2rgb(138, 43, 226)

.

Coklat#A52A2Argb(165, 42, 42)

.

Kayu Kekar#DEB887rgb(222, 184, 135)

.

Kadet Biru#5F9EA0rgb(95, 158, 160)

.

Chartreuse#7FFF00rgb(127, 255, 1)

.

Coklat#D2691Ergb(210, 105, 30)

.

Karang#FF7F50rgb(251, 127, 80)

.

Bunga Jagung Biru#6495EDrgb(100, 149, 237)

.

Jagung#FFF8DCrgb(225, 248, 220)

.

Merah tua#DC143Crgb(220, 20, 60)

.

Cyan#00FFFFrgb(62, 254, 255)

.

Biru Tua#00008Brgb(0, 0, 139)

.

Cyan Gelap#008B8Brgb(29, 139, 139)

.

Batang Emas Gelap#B8860Brgb(184, 134, 11)

.

Abu-abu Tua#A9A9A9rgb(169, 169, 169)

.

Hijau Tua#006400rgb(19, 100, 0)

.

Khaki Gelap#BDB76Brgb(189, 183, 107)

.

Magenta Gelap#8B008Brgb(139, 0, 140)

.

Hijau Zaitun Tua#556B2Frgb(85, 107, 47)

.

Oranye Tua#FF8C00rgb(251, 140, 1)

.

Anggrek Hitam#9932CCrgb(153, 50, 204)

.

Merah Tua#8B0000rgb(139, 5, 0)

.

Salmon Hitam#E9967Argb(233, 150, 122)

.

Hijau Laut Gelap#8FBC8Frgb(143, 188, 144)

.

Biru Batu Tulis Gelap#483D8Brgb(72, 61, 139)

.

Dark Slate Grey#2F4F4Frgb(47, 79, 79)

.

Pirus Gelap#00CED1rgb(48, 206, 209)

.

Ungu Tua#9400D3rgb(148, 0, 211)

.

Merah Muda Tua#FF1493rgb(249, 19, 147)

.

Biru Langit Tua#00BFFFrgb(43, 191, 254)

.

Redup Abu-abu#696969rgb(105, 105, 105)

.

Dodger Biru#1E90FFrgb(30, 144, 255)

.

Bata Api#B22222rgb(178, 34, 33)

.

Bunga Putih#FFFAF0rgb(255, 250, 240)

.

Hutan Hijau#228B22rgb(34, 139, 35)

.

Fuchsia#FF00FFrgb(249, 0, 255)

.

Gainsboro#DCDCDCrgb(220, 220, 220)

.

Hantu Putih#F8F8FFrgb(248, 248, 255)

.

Emas#FFD700rgb(253, 215, 3)

.

Batang Emas#DAA520rgb(218, 165, 32)

.

Abu-abu#808080rgb(128, 128, 128)

.

Hijau#008000rgb(27, 128, 1)

.

Hijau Kuning#ADFF2Frgb(173, 255, 48)

.

Embun Madu#F0FFF0rgb(240, 255, 240)

.

Merah Muda Terang#FF69B4rgb(240, 255, 240)

.

Merah India#CD5C5Crgb(205, 92, 92)

.

Indigo#4B0082rgb(75, 0, 130)

.

Gading#FFFFF0rgb(255, 255, 239)

.

Khaki#F0E68Crgb(240, 230, 140)

.

Lavendel#E6E6FArgb(230, 230, 250)

.

Perona Lavender#FFF0F5rgb(254, 240, 245)

.

Rumput Hijau#7CFC00rgb(124, 252, 2)

.

Lemon Chiffon#FFFACDrgb(255, 250, 205)

.

Biru Muda#ADD8E6rgb(173, 216, 230)

.

Karang Ringan#F08080rgb(240, 128, 128)

.

Cyan Muda#E0FFFFrgb(224, 255, 255)

.

Batang Emas Ringan Kuning#FAFAD2rgb(250, 250, 210)

.

Abu-abu Muda#D3D3D3rgb(211, 211, 211)

.

Hijau Muda#90EE90rgb(144, 238, 144)

.

Merah Muda Muda#FFB6C1rgb(252, 182, 193)

.

Salmon Ringan#FFA07Argb(251, 160, 122)

.

Hijau Laut Muda#20B2AArgb(40, 178, 170)

.

Langit Biru Muda#87CEFArgb(135, 206, 250)

.

Abu-abu Batu Tulis Muda#778899rgb(119, 136, 153)

.

Baja Ringan Biru#B0C4DErgb(176, 196, 222)

.

Kuning Muda#FFFFE0rgb(255, 255, 224)

.

Kapur#00FF00rgb(63, 255, 0)

.

Hijau Kapur#32CD32rgb(50, 205, 50)

.

Linen#FAF0E6rgb(250, 240, 230)

.

Magenta#FF00FFrgb(249, 0, 255)

.

Marun#800000rgb(128, 4, 0)

.

Aqua Marine Sedang#66CDAArgb(102, 205, 170)

.

Biru Sedang#0000CDrgb(0, 0, 205)

.

Anggrek Sedang#BA55D3rgb(186, 85, 211)

.

Ungu Sedang#9370DBrgb(147, 112, 219)

.

Hijau Laut Sedang#3CB371rgb(60, 179, 113)

.

Biru Sabak Sedang#7B68EErgb(123, 103, 238)

.

Hijau Pegas Sedang#00FA9Argb(62, 250, 153)

.

Pirus Sedang#48D1CCrgb(72, 209, 204)

.

Merah Ungu Sedang#C71585rgb(199, 21, 133)

.

Biru Tengah Malam#191970rgb(25, 25, 112)

.

Krim Mint#F5FFFArgb(245, 255, 250)

.

Mawar Berkabut#FFE4E1rgb(254, 228, 225)

.

Mokasin#FFE4B5rgb(254, 228, 181)

.

Navajo Putih#FFDEADrgb(254, 222, 173)

.

Angkatan Laut#000080rgb(0, 0, 128)

.

Renda Tua#FDF5E6rgb(253, 245, 230)

.

Zaitun#808000rgb(128, 128, 1)

.

Zaitun Drab#6B8E23rgb(107, 142, 35)

.

Oranye#FFA500rgb(252, 165, 3)

.

Oranye Merah#FF4500rgb(250, 69, 1)

.

Anggrek#DA70D6rgb(218, 112, 214)

.

Batang Emas Pucat#EEE8AArgb(238, 232, 170)

.

Hijau Pucat#98FB98rgb(152, 251, 153)

.

Pirus Pucat#AFEEErgb(175, 238, 239)

.

Merah Ungu Pucat#DB7093rgb(219, 112, 147)

.

Cambuk Pepaya#FFEFD5rgb(254, 239, 213)

.

Kepulan Persik#FFDAB9rgb(253, 218, 185)

.

Peru#CD853Frgb(205, 133, 63)

.

Merah Muda#FFC0CBrgb(252, 192, 203)

.

Plum#DDA0DDrgb(221, 160, 221)

.

Bubuk Biru#B0E0E6rgb(176, 224, 230)

.

Ungu#800080rgb(128, 0, 128)

.

Rebecca Ungu#663399rgb(102, 51, 153)

.

Merah#FF0000rgb(255, 0, 0)

.

Merah Coklat#BC8F8Frgb(188, 143, 142)

.

Royal Blue#4169E1rgb(65, 105, 225)

.

Pelana Coklat#8B4513rgb(139, 69, 19)

.

Salmon#FA8072rgb(250, 128, 114)

.

Coklat Berpasir#F4A460rgb(244, 164, 95)

.

Hijau Laut#2E8B57rgb(46, 139, 87)

.

Kerang Laut#FFF5EErgb(255, 245, 238)

.

Siena#A0522Drgb(160, 82, 45)

.

Perak#C0C0C0rgb(192, 192, 192)

.

Langit Biru#87CEEBrgb(135, 206, 235)

.

Batu Tulis Biru#6A5ACDrgb(106, 90, 205)

.

Batu Tulis Abu-abu#708090rgb(112, 128, 145)

.

Salju#FFFAFargb(255, 250, 250)

.

Musim Semi Hijau#00FF7Frgb(63, 255, 128)

.

Baja Biru#4682B4rgb(70, 130, 180)

.

Tan#D2B48Crgb(210, 180, 140)

.

Biru muda#008080rgb(26, 128, 127)

.

Thistle#D8BFD8rgb(216, 191, 216)

.

Tomat#FF6347rgb(250, 99, 71)

.

Pirus#40E0D0rgb(64, 224, 208)

.

Ungu#EE82EErgb(238, 130, 238)

.

Gandum#F5DEB3rgb(245, 222, 179)

.

Putih#FFFFFFrgb(255, 255, 255)

.

Asap Putih#F5F5F5rgb(245, 245, 245)

.

Kuning#FFFF00rgb(255, 255, 0)

.

Kuning Hijau#9ACD32rgb(154, 205, 49)

Sebagai pelengkap, berikut adalah perbandingan kode warna RGB, HEX, dan HTML CSS untuk beberapa kombinasi warna yang masih berkaitan

Nama WarnaKode Warna CSS HTMLKode Warna HEXKode Warna RGB lightsalmon#FFA07Argb(255,160,122) salmon#FA8072rgb(250,128,114) darksalmon#E9967Argb(233,150,122) lightcoral#F08080rgb(240,128,128) indianred#CD5C5Crgb(205,92,92) crimson#DC143Crgb(220,20 ,60) batu bata tahan api#B222222rgb(178,34,34) merah#FF0000rgb(255,0,0) merah tua#8B0000rgb(139,0,0)

Sampai di sini, Anda tahu daftar lengkap kode warna HTML. Namun sebagian dari Anda mungkin masih bingung dengan perbedaan antara kode RGB dan kode HEX

Nah, keduanya akan dibahas pada poin berikutnya. Mari kita menonton bersama

Baca juga. Desain Situs Web Warna yang Efektif

Apa itu Kode Warna RGB dan HEX?

RGB adalah kode warna yang terdiri dari tiga angka. Ketiga bagian ini dipisahkan dengan tanda koma, misalnya "rgb(251, 235, 217)". Setiap digit kode melambangkan warna merah (merah), hijau (hijau), biru (biru) atau #RRGGBB.

Mungkin Anda bertanya-tanya, kenapa harus merah, hijau, dan biru?

Sebab, ketiganya merupakan warna primer yang biasa digunakan di web dan layar komputer. Selain itu, kombinasi ketiga warna tersebut juga mampu menghasilkan hingga lebih dari 16 juta warna

Selain kode RGB, ada juga kode warna Hexadecimal atau lebih dikenal dengan HEX

Kode HEX adalah jenis kode warna yang umumnya dimulai dengan tanda "#". Anda pasti pernah melihat kode warna HEX seperti kombinasi warna #92a8d1 dan #ff0000 saat mendesain sesuatu

Sebenarnya tidak ada perbedaan yang mencolok antara kode warna HEX dan RGB, selain jumlah digitnya. Semuanya berfungsi saat Anda menggunakannya sebagai kode warna CSS dan HTML

Anda sudah paham apa itu kode HTML warna RGB dan HEX bukan?

Langsung turun, ya

Cara Menggunakan Kode Warna CSS HTML Lengkap

Penggunaan daftar kode warna HTML CSS, dan warna RGB dapat diterapkan ke situs web. Anda dapat menggunakan kode warna di hampir semua bagian, seperti karakter, latar belakang, dan batas

Berikut adalah beberapa cara untuk menggunakan kode warna CSS dan HTML

Cara Menggunakan Kode HTML Berwarna dalam Karakter

<!DOCTYPE html>
<html>
<body>
  <p><font size=”3″ color=”#ff0000″>Daftar Kode Warna HTML CSS</font></p>
  <p><font size=”2″ color=”#00ff00″>Daftar Kode Warna CSS HTML</font></p>
  <p><font face=”verdana” color=”#0000ff”>Daftar Kode HTML Warna</font></p>
  <p><strong>Catatan:</strong> Elemen font hanya mendukung pada HTML 5. Gunakan CSS sebagai ganti</p>
</body>
</html>

_

Script diatas akan menghasilkan tampilan seperti dibawah ini

Daftar Kode Warna HTML CSS

Daftarkan Kode Warna CSS HTML

Daftar Kode HTML Berwarna

Catatan. Elemen font hanya mendukung HTML 5. Gunakan CSS sebagai gantinya

Cara Menggunakan Kode Warna HTML Lengkap 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>Contoh Beberapa Kode Warna Lengkap:</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>

Kode di atas menghasilkan tampilan seperti ini

Contoh Beberapa Kode Warna Lengkap

Merah

Hijau

Biru

Kuning

ceri

Cara Menggunakan Kode Warna HTML di Perbatasan

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
   border-style: solid;
   border-color: #92a8d1;
}
div {
   border-style: solid;
   border-color: #92a8d1;
}
</style>
</head>
<body>
  <p>Daftar Kode Warna HTML CSS</p>
  <div>Nilai dari border-color dapat diatur menggunakan angka kode hexadecimal.</div>
  <p><strong>Catatan:</strong> border-color tidak dapat bekerja jika digunakan sendiri. Gunakan properti border-style terlebih dahulu untuk mengatur border kode HTML warna.</p>
</body>
</html>

_

Daftar Kode Warna HTML CSS

Nilai border-color dapat diatur menggunakan angka kode heksadesimal

Catatan. border-color tidak berfungsi jika digunakan sendiri. Gunakan properti border-style terlebih dahulu untuk mengatur warna batas kode HTML

10 Situs Web untuk Menemukan Kombinasi Kode Warna Lengkap

Ingin mencoba berbagai kombinasi kode warna HTML tanpa ribet?

1. Kanvas

Canva adalah alat desain grafis online dengan segudang fitur. Nah, salah satunya adalah roda warna yang memungkinkan Anda mencoba berbagai kombinasi warna kode HTML.

Hal yang patut diacungi jempol adalah Canva juga menjelaskan tentang teori warna selain roda warna. Jadi Anda juga bisa belajar sekaligus bereksperimen

2. CC Warna Adobe

Brand raksasa di dunia desain grafis ini juga memiliki color wheel gratis yang bisa kamu gunakan untuk kombinasi warna CSS lho

Berbeda dengan Canva, Adobe Color CC lebih kompleks dengan banyak pilihan pengaturan. Nah, website ini sangat cocok bagi Anda yang ingin bereksperimen dengan kombinasi kode warna HTML lebih dalam

3. Paletton

Situs kombinasi kode warna lengkap berikutnya adalah Paletton. Bisa dikatakan, fitur Paletton ini berada di tengah-tengah antara Canva dan Adobe Color CC; .

Selain itu, ada panduan lengkap cara menggunakan Paletton tepat di bawah roda warna. Jadi kalau bingung bisa langsung baca panduannya

4. Keren

Coolors cukup berbeda dengan situs kombinasi kode warna RGB sebelumnya. Sebab, kamu harus terlebih dahulu memilih warna yang ditampilkan secara acak berdasarkan koleksi Coolors

Namun, Anda tidak perlu khawatir. Setelah memilih kode warna HTML, Anda masih bebas mengubah warna dan bereksperimen sesuka Anda

5. Bola Warna Lumpur

Mudcube Color Sphere adalah situs web kombinasi warna yang sederhana dan sangat mudah digunakan. Yang harus Anda lakukan adalah memindahkan slide yang disediakan atau memindahkan panah untuk mendapatkan kombinasi kode warna HTML

6. PeriksaWarnaKu

Seperti namanya, CheckMyColours akan memeriksa kombinasi warna sebuah situs web untuk melihat apakah kontras warnanya bagus. Nah, selain mengetahui kombinasi warna apa yang digunakan, Anda juga mengetahui apakah kombinasi kode HTML warna tersebut cocok untuk diterapkan.

7. Warna Mata-mata

Spy Color adalah situs web kombinasi kode warna lengkap yang memungkinkan Anda menemukan informasi lengkap tentang kode warna HTML. Mulai dari nama, kode hex, angka RGB, angka CMYK, dan masih banyak lainnya. Menarik juga, ya?

8. Penjelajah Warna

Website kombinasi kode warna RGB selanjutnya adalah Color Explorer. Di sini, Anda tidak hanya dapat bereksperimen dengan kode warna HTML, tetapi juga pada gambar, halaman situs web, tata letak, dan banyak lainnya.

9. Pemilih Warna HTML W3School

W3School HTML Color Picker dapat Anda gunakan untuk memilih warna berdasarkan warna dasar. Anda bisa memilih tingkat kejenuhan dan melihat langsung (preview) hasilnya

Selain itu, ada juga opsi untuk memasukkan warna berdasarkan kode dan juga memunculkan jendela HTML 5 untuk pemilihan warna. Kode warna CSS, HTML, dan RGB mudah ditemukan melalui situs ini

10. Kode Warna HTML

Kode Warna HTML adalah situs web sederhana yang menyediakan tampilan pemilihan warna. Yang harus Anda lakukan adalah mengarahkan kursor ke tabel warna atau menggerakkan slider untuk mendapatkan warna yang sesuai dengan kode warna HTML dalam bentuk heksadesimal.

Baca Juga. Cara Membuat Website dengan HTML dan CSS

Mari Terapkan Kombinasi Kode HTML Warna Terbaik

Penting untuk mengetahui daftar kode warna HTML, kode warna CSS dan kode warna RGB

Penggunaan kode warna yang lengkap baik dalam HTML, CSS, dan RGB digunakan di berbagai bagian pengembangan website. Warna juga dapat mempengaruhi sisi psikologis seseorang. Sehingga pemilihan warna yang akurat dan menarik dapat mempengaruhi bagaimana user experience pengunjung

Website yang menarik tentunya dapat membuat pengunjung betah dan tertarik untuk berkunjung kembali. Salah satunya adalah menggabungkan beberapa warna dalam satu halaman website

Daftar kode warna HTML lengkap di atas setidaknya bisa sedikit membantu Anda untuk memahami cara mewarnai website dan menerapkannya agar pengunjung lebih nyaman dan tertarik untuk mengunjunginya kembali. Sekian artikel kali ini, semoga bermanfaat. Anda bisa klik tombol Subscribe untuk mendapatkan update artikel terbaru dari kami

Membagikan

Yasin K Ikuti Yasin K adalah Penulis Konten Teknis untuk Blog Niagahoster. Kata lain adalah hal-hal tidak penting yang tidak perlu Anda ketahui. Biarkan konten berbicara sendiri. )

Berlangganan sekarang

Dapatkan berbagai artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Berlangganan sekarang dan raih kesuksesan bersama kami

Bagaimana cara menambahkan warna latar belakang dalam HTML?

Jika Anda ingin menggunakan warna dasar dalam kode HTML, ketikkan nama warna tanpa hashtag (“#”) sebagai ganti kode warna HTML . Misalnya, jika Anda ingin menggunakan oranye sebagai warna latar belakang halaman, ketik warna latar. jeruk;.

Bagaimana cara mewarnai latar belakang?

Ubah warna latar belakang .

Buka Desain > Warna Halaman

Pilih warna yang Anda inginkan. Jika Anda tidak melihat warna yang diinginkan, pilih Warna Lain, lalu pilih warna dari setiap opsi di kotak Warna. Kiat. Untuk memilih warna dari file, pilih gambar, klik ikon roda gigi, dan pilih Baru dari File

Apa HTML yang benar untuk menyisipkan gambar latar belakang?

Ketuk

di baris berikutnya. Ini adalah tag HTML untuk menambahkan gambar latar belakang ke halaman web. Ganti "[url gambar]" dengan lokasi URL asli dari gambar yang diinginkan.

Perintah apa yang diberikan untuk menambahkan warna latar belakang?

BODY command adalah perintah untuk membuat warna background pada layar, mengubah warna link, mengubah warna dasar link, menampilkan pesan saat halaman tertutup, dan lain-lain sesuai dengan atribut yang diberikan.

kode html