Cara menggunakan cara mewarnai header html

Yasin K is a Technical Content Writer for Niagahoster Blog. Other words are unimportant things you will never need to know. Let the content speak for itself :)

Home » Insight Bisnis » Tips & Trik » Daftar Kode Warna HTML CSS Lengkap dan Cara Menggunakannya

Daftar Kode Warna HTML CSS Lengkap dan Cara Menggunakannya

June 10, 2022 7 min read

Cara menggunakan cara mewarnai header html

Kode warna HTML adalah hal yang wajib diketahui ketika Anda akan melakukan pewarnaan. Baik untuk website, aplikasi, maupun project grafis lainnya.

Masalahnya, terkadang orang tidak mengetahui kode warna HTML CSS dari warna yang hendak dipakai. Apalagi, terdapat dua jenis kode warna di internet, yakni RGB dan Hexadecimal.

Untungnya di artikel kali ini, Anda akan kami ajak mengenal berbagai kode warna HTML terlengkap. Penasaran, kan? Yuk langsung scroll ke bawah!

Daftar isi

Kode Warna HTML dan CSS

Berikut adalah daftar kode warna HTML dan CSS lengkap berdasarkan kode Hexadecimal (HEX) serta RGB untuk Anda jadikan sebagai referensi:

Hasil WarnaNama WarnaKode Warna HEXKode Warna RGB

.

Alice Blue#F0F8FFrgb(240, 248, 254)

.

Antique White#FAEBD7rgb(251, 235, 217)

.

Aqua#00FFFFrgb(0, 255, 254)

.

Aquamarine#7FFFD4rgb(115, 255, 216)

.

Azure#F0FFFFrgb(239, 255, 255)

.

Beige#F5F5DCrgb(245, 245, 223)

.

Bisque#FFE4C4rgb(255, 227, 200)

.

Black#000000rgb(0, 0, 0)

.

Blanched Almond#FFEBCDrgb(255, 234, 208)

.

Blue#0000FFrgb(0, 0, 255)

.

Blue Violet#8A2BE2rgb(138, 43, 226)

.

Brown#A52A2Argb(165, 42, 42)

.

Burly Wood#DEB887rgb(222, 184, 135)

.

Cadet Blue#5F9EA0rgb(95, 158, 160)

.

Chartreuse#7FFF00rgb(127, 255, 1)

.

Chocolate#D2691Ergb(210, 105, 30)

.

Coral#FF7F50rgb(251, 127, 80)

.

Cornflower Blue#6495EDrgb(100, 149, 237)

.

Cornsilk#FFF8DCrgb(225, 248, 220)

.

Crimson#DC143Crgb(220, 20, 60)

.

Cyan#00FFFFrgb(62, 254, 255)

.

Dark Blue#00008Brgb(0, 0, 139)

.

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

.

Dark Golden Rod#B8860Brgb(184, 134, 11)

.

Dark Gray#A9A9A9rgb(169, 169, 169)

.

Dark Green#006400rgb(19, 100, 0)

.

Dark Khaki#BDB76Brgb(189, 183, 107)

.

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

.

Dark Olive Green#556B2Frgb(85, 107, 47)

.

Dark Orange#FF8C00rgb(251, 140, 1)

.

Dark Orchid#9932CCrgb(153, 50, 204)

.

Dark Red#8B0000rgb(139, 5, 0)

.

Dark Salmon#E9967Argb(233, 150, 122)

.

Dark Sea Green#8FBC8Frgb(143, 188, 144)

.

Dark Slate Blue#483D8Brgb(72, 61, 139)

.

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

.

Dark Turquoise#00CED1rgb(48, 206, 209)

.

Dark Violet#9400D3rgb(148, 0, 211)

.

Deep Pink#FF1493rgb(249, 19, 147)

.

Deep Sky Blue#00BFFFrgb(43, 191, 254)

.

Dim Gray#696969rgb(105, 105, 105)

.

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

.

Fire Brick#B22222rgb(178, 34, 33)

.

Floral White#FFFAF0rgb(255, 250, 240)

.

Forest Green#228B22rgb(34, 139, 35)

.

Fuchsia#FF00FFrgb(249, 0, 255)

.

Gainsboro#DCDCDCrgb(220, 220, 220)

.

Ghost White#F8F8FFrgb(248, 248, 255)

.

Gold#FFD700rgb(253, 215, 3)

.

Golden Rod#DAA520rgb(218, 165, 32)

.

Gray#808080rgb(128, 128, 128)

.

Green#008000rgb(27, 128, 1)

.

Green Yellow#ADFF2Frgb(173, 255, 48)

.

Honey Dew#F0FFF0rgb(240, 255, 240)

.

Hot Pink#FF69B4rgb(240, 255, 240)

.

Indian Red#CD5C5Crgb(205, 92, 92)

.

Indigo#4B0082rgb(75, 0, 130)

.

Ivory#FFFFF0rgb(255, 255, 239)

.

Khaki#F0E68Crgb(240, 230, 140)

.

Lavender#E6E6FArgb(230, 230, 250)

.

Lavender Blush#FFF0F5rgb(254, 240, 245)

.

Lawn Green#7CFC00rgb(124, 252, 2)

.

Lemon Chiffon#FFFACDrgb(255, 250, 205)

.

Light Blue#ADD8E6rgb(173, 216, 230)

.

Light Coral#F08080rgb(240, 128, 128)

.

Light Cyan#E0FFFFrgb(224, 255, 255)

.

Light Golden Rod Yellow#FAFAD2rgb(250, 250, 210)

.

Light Gray#D3D3D3rgb(211, 211, 211)

.

Light Green#90EE90rgb(144, 238, 144)

.

Light Pink#FFB6C1rgb(252, 182, 193)

.

Light Salmon#FFA07Argb(251, 160, 122)

.

Light Sea Green#20B2AArgb(40, 178, 170)

.

Light Sky Blue#87CEFArgb(135, 206, 250)

.

Light Slate Gray#778899rgb(119, 136, 153)

.

Light Steel Blue#B0C4DErgb(176, 196, 222)

.

Light Yellow#FFFFE0rgb(255, 255, 224)

.

Lime#00FF00rgb(63, 255, 0)

.

Lime Green#32CD32rgb(50, 205, 50)

.

Linen#FAF0E6rgb(250, 240, 230)

.

Magenta#FF00FFrgb(249, 0, 255)

.

Maroon#800000rgb(128, 4, 0)

.

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

.

Medium Blue#0000CDrgb(0, 0, 205)

.

Medium Orchid#BA55D3rgb(186, 85, 211)

.

Medium Purple#9370DBrgb(147, 112, 219)

.

Medium Sea Green#3CB371rgb(60, 179, 113)

.

Medium Slate Blue#7B68EErgb(123, 103, 238)

.

Medium Spring Green#00FA9Argb(62, 250, 153)

.

Medium Turquoise#48D1CCrgb(72, 209, 204)

.

Medium Violet Red#C71585rgb(199, 21, 133)

.

Midnight Blue#191970rgb(25, 25, 112)

.

Mint Cream#F5FFFArgb(245, 255, 250)

.

Misty Rose#FFE4E1rgb(254, 228, 225)

.

Moccasin#FFE4B5rgb(254, 228, 181)

.

Navajo White#FFDEADrgb(254, 222, 173)

.

Navy#000080rgb(0, 0, 128)

.

Old Lace#FDF5E6rgb(253, 245, 230)

.

Olive#808000rgb(128, 128, 1)

.

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

.

Orange#FFA500rgb(252, 165, 3)

.

Orange Red#FF4500rgb(250, 69, 1)

.

Orchid#DA70D6rgb(218, 112, 214)

.

Pale Golden Rod#EEE8AArgb(238, 232, 170)

.

Pale Green#98FB98rgb(152, 251, 153)

.

Pale Turquoise#AFEEEErgb(175, 238, 239)

.

Pale Violet Red#DB7093rgb(219, 112, 147)

.

Papaya Whip#FFEFD5rgb(254, 239, 213)

.

Peach Puff#FFDAB9rgb(253, 218, 185)

.

Peru#CD853Frgb(205, 133, 63)

.

Pink#FFC0CBrgb(252, 192, 203)

.

Plum#DDA0DDrgb(221, 160, 221)

.

Powder Blue#B0E0E6rgb(176, 224, 230)

.

Purple#800080rgb(128, 0, 128)

.

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

.

Red#FF0000rgb(255, 0, 0)

.

Rosy Brown#BC8F8Frgb(188, 143, 142)

.

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

.

Saddle Brown#8B4513rgb(139, 69, 19)

.

Salmon#FA8072rgb(250, 128, 114)

.

Sandy Brown#F4A460rgb(244, 164, 95)

.

Sea Green#2E8B57rgb(46, 139, 87)

.

Sea Shell#FFF5EErgb(255, 245, 238)

.

Sienna#A0522Drgb(160, 82, 45)

.

Silver#C0C0C0rgb(192, 192, 192)

.

Sky Blue#87CEEBrgb(135, 206, 235)

.

Slate Blue#6A5ACDrgb(106, 90, 205)

.

Slate Gray#708090rgb(112, 128, 145)

.

Snow#FFFAFArgb(255, 250, 250)

.

Spring Green#00FF7Frgb(63, 255, 128)

.

Steel Blue#4682B4rgb(70, 130, 180)

.

Tan#D2B48Crgb(210, 180, 140)

.

Teal#008080rgb(26, 128, 127)

.

Thistle#D8BFD8rgb(216, 191, 216)

.

Tomato#FF6347rgb(250, 99, 71)

.

Turquoise#40E0D0rgb(64, 224, 208)

.

Violet#EE82EErgb(238, 130, 238)

.

Wheat#F5DEB3rgb(245, 222, 179)

.

White#FFFFFFrgb(255, 255, 255)

.

White Smoke#F5F5F5rgb(245, 245, 245)

.

Yellow#FFFF00rgb(255, 255, 0)

.

Yellow Green#9ACD32rgb(154, 205, 49)

Sebagai pelengkap, ini dia perbandingan kode warna RGB, HEX, dan HTML CSS untuk beberapa kombinasi warna yang masih serumpun:

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) firebrick#B22222rgb(178,34,34) red#FF0000rgb(255,0,0) darkred#8B0000rgb(139,0,0)

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

Nah, keduanya akan dibahas pada poin selanjutnya. Yuk simak bersama!

Baca juga: Warna Efektif Desain Website

Apa itu Kode Warna RGB dan HEX?

RGB adalah kode warna yang terdiri dari tiga bagian angka. Ketiga bagian ini terpisah oleh tanda koma, contohnya seperti “rgb(251, 235, 217)”. Setiap digit kodenya melambangkan warna red (merah), green (hijau), blue (biru) atau #RRGGBB.

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

Karena, ketiganya merupakan warna primer yang umum digunakan di web dan layar komputer. Selain itu, kombinasi dari ketiga warna ini juga mampu membuat hingga lebih dari 16 juta warna!

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

Kode HEX adalah tipe kode warna yang umumnya diawali dengan tanda “#”. Anda pasti sudah pernah melihat kode warna HEX seperti kombinasi warna #92a8d1 dan #ff0000 ketika mendesain sesuatu.

Sebenarnya, tidak ada perbedaan kuat antara kode warna HEX dan RGB, selain jumlah digitnya. Semuanya bisa dipakai ketika Anda menggunakannya sebagai kode warna CSS dan HTML.

Sudah paham apa itu kode HTML warna RGB dan HEX, kan? Berikutnya, kami ajak Anda belajar cara menggunakan kode warna HTML CSS.

Langsung meluncur ke bawah, ya!

Cara Menggunakan Kode Warna HTML CSS Lengkap

Penggunaan daftar kode warna HTML CSS, dan warna RGB dapat diterapkan ke dalam website. Kode warna dapat Anda gunakan hampir di semua bagian, seperti karakter, background, dan border.

Berikut beberapa cara menggunakan kode warna CSS dan HTML:

Cara Menggunakan Kode HTML Warna di 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>

Skrip di atas akan menghasilkan tampilan seperti di bawah ini:

Daftar Kode Warna HTML CSS

Daftar Kode Warna CSS HTML

Daftar Kode HTML Warna

Catatan: Elemen font hanya mendukung pada HTML 5. Gunakan CSS sebagai ganti

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:

Red

Green

Blue

Yellow

Cerise

Cara Menggunakan Kode Warna HTML di Border

<!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 dari border-color dapat diatur menggunakan angka kode hexadecimal.

Catatan: border-color tidak dapat bekerja jika digunakan sendiri. Gunakan properti border-style terlebih dahulu untuk mengatur border kode HTML warna.

10 Website untuk Mencari Kombinasi Kode Warna Lengkap

Apakah Anda ingin mencoba berbagai kombinasi kode warna HTML tanpa ribet? Tak perlu khawatir, berikut adalah daftar website kombinasi kode warna lengkap untuk Anda coba.

1. Canva

Cara menggunakan cara mewarnai header html

Canva adalah tools desain grafis online dengan segudang fitur. Nah, salah satunya adalah color wheel yang memungkinkan Anda mencoba-coba berbagai kombinasi kode HTML warna. 

Hal yang pantas diacungi jempol adalah Canva juga menjelaskan tentang teori warna di samping color wheel tersebut. Sehingga Anda juga bisa belajar sambil bereksperimen di saat yang sama.

2. Adobe Color CC

Cara menggunakan cara mewarnai header html

Brand raksasa di dunia desain grafis ini juga punya color wheel gratis yang bisa Anda gunakan untuk kombinasi warna CSS, lho.

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

3. Paletton

Cara menggunakan cara mewarnai header html

Situs kombinasi kode warna lengkap selanjutnya adalah Paletton. Bisa dikatakan, fitur Paletton ini berada di tengah-tengah antara Canva dan Adobe Color CC; sederhana tapi dengan cukup banyak fitur. 

Selain itu, ada panduan lengkap cara menggunakan Paletton tepat di bawah color wheel. Jadi, jika kebingungan, Anda bisa langsung membaca panduan tersebut.

4. Coolors

Cara menggunakan cara mewarnai header html

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

Namun, Anda tak perlu khawatir. Setelah memilih kode warna HTML tersebut Anda tetap bisa bebas mengubah-ubah warna dan bereksperimen sesuka hati Anda, kok.

5. Mudcube Colour Sphere

Cara menggunakan cara mewarnai header html

Mudcube Colour Sphere adalah website kombinasi warna yang sederhana dan sangat mudah digunakan. Anda tinggal menggeser slide yang disediakan atau memindah-mindahkan panah untuk mendapatkan kombinasi kode warna HTML.

6. CheckMyColours

Cara menggunakan cara mewarnai header html

Seperti namanya, CheckMyColours akan mengecek kombinasi warna suatu website apakah sudah memiliki kontras warna yang baik. Jadi, selain Anda bisa tahu apa saja kombinasi warna yang digunakan, Anda juga tau apakah kombinasi kode HTML warna tersebut memang cocok untuk diterapkan.

7. Spy Color

Cara menggunakan cara mewarnai header html

Spy Color adalah website kombinasi kode warna lengkap yang memungkinan Anda mencari informasi lengkap tentang kode warna HTML. Mulai dari nama, hex code, angka RGB, angka CMYK, dan masih banyak lainnya. Menarik juga, ya?

8. Color Explorer

Cara menggunakan cara mewarnai header html

Website kombinasi kode warna RGB berikutnya adalah Color Explorer. Di sini, Anda tak hanya bisa melakukan eksperimen dengan kode warna HTML saja, tapi juga pada gambar, halaman website, layout dan masih banyak lainnya.

9. W3School HTML Color Picker

Cara menggunakan cara mewarnai header html

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

Selain itu, terdapat juga pilihan untuk memasukkan warna berdasarkan kode dan juga memunculkan jendela HTML 5 untuk pemilihan warna. Kode warna CSS, HTML, dan RGBnya pun dan dengan mudah Anda ketahui via situs ini.

10. HTML Color Code

Cara menggunakan cara mewarnai header html

HTML Color Code merupakan situs web sederhana yang menyediakan tampilan pemilihan warna. Anda tinggal mengarahkan kursor ke dalam tabel warna atau menggeser slider untuk mendapatkan warna yang sesuai dengan kode warna HTML dalam bentuk hexadecimal.

Baca Juga : Cara Membuat Website dengan HTML dan CSS

Yuk Terapkan Kombinasi Kode HTML Warna Terbaik!

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

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

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

Daftar kode warna HTML lengkap di atas setidaknya dapat sedikit membantu Anda untuk memahami bagaimana cara mewarnai website dan menerapkannya supaya pengunjung lebih betah dan tertarik untuk mengunjunginya lagi.Demikian artikel ini, semoga bermanfaat. Anda dapat klik tombol Subscribe untuk mendapatkan update artikel terbaru dari kami.

Share

Yasin K Follow Yasin K is a Technical Content Writer for Niagahoster Blog. Other words are unimportant things you will never need to know. Let the content speak for itself :)

Subscribe Sekarang

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

Bagaimana cara mengganti warna background dalam penulisan kode HTML?

Jika Anda ingin menggunakan warna-warna dasar pada kode HTML, tikkan nama warna tanpa tagar (“#”) sebagai pengganti kode warna HTML. Sebagai contoh, jika Anda ingin menggunakan warna oranye sebagai warna latar halaman, tikkan background-color: orange; .

Perintah apa yang diberikan untuk menambahkan background warna?

Perintah BODY adalah perintah untuk membuat warna latar belakang pada layar, mengubah warna link, mengubah warna dasar link, menampilkan pesan ketika halaman ditutup, dan lain-lain sesuai dengan atribut yang diberikan.

Apa itu kode warna HTML?

Apa sih yang dimaksud dengan kode warna HTML? 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.

Bagaimana cara mengubah warna background halaman web?

Cara Mengubah Warna Background Website WordPress.
Pilih menu Appearance > Customize..
Pilih menu Colors (Jika tidak ada, bisa cari background, background color, dll).
Klik tulisan background color (Jika tidak ada juga, coba cara yang berikutnya).
Pilih warnanya..
Klik tombol Publish..