Yasin K 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 :)

Daftar Kode Warna HTML CSS Lengkap dan Cara Menggunakannya

7 min read

22_12_20 Daftar Kode Warna HTML CSS Lengkap dan Cara Menggunakannya

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

Masalahnya, terkadang orang tidak mengetahui kode 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!

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 Warna Nama Warna Kode Warna HEX Kode Warna RGB
.
Alice Blue #F0F8FF rgb(240, 248, 254)
.
Antique White #FAEBD7 rgb(251, 235, 217)
.
Aqua #00FFFF rgb(0, 255, 254)
.
Aquamarine #7FFFD4 rgb(115, 255, 216)
.
Azure #F0FFFF rgb(239, 255, 255)
.
Beige #F5F5DC rgb(245, 245, 223)
.
Bisque #FFE4C4 rgb(255, 227, 200)
.
Black #000000 rgb(0, 0, 0)
.
Blanched Almond #FFEBCD rgb(255, 234, 208)
.
Blue #0000FF rgb(0, 0, 255)
.
Blue Violet #8A2BE2 rgb(138, 43, 226)
.
Brown #A52A2A rgb(165, 42, 42)
.
Burly Wood #DEB887 rgb(222, 184, 135)
.
Cadet Blue #5F9EA0 rgb(95, 158, 160)
.
Chartreuse #7FFF00 rgb(127, 255, 1)
.
Chocolate #D2691E rgb(210, 105, 30)
.
Coral #FF7F50 rgb(251, 127, 80)
.
Cornflower Blue #6495ED rgb(100, 149, 237)
.
Cornsilk #FFF8DC rgb(225, 248, 220)
.
Crimson #DC143C rgb(220, 20, 60)
.
Cyan #00FFFF rgb(62, 254, 255)
.
Dark Blue #00008B rgb(0, 0, 139)
.
Dark Cyan #008B8B rgb(29, 139, 139)
.
Dark Golden Rod #B8860B rgb(184, 134, 11)
.
Dark Gray #A9A9A9 rgb(169, 169, 169)
.
Dark Green #006400 rgb(19, 100, 0)
.
Dark Khaki #BDB76B rgb(189, 183, 107)
.
Dark Magenta #8B008B rgb(139, 0, 140)
.
Dark Olive Green #556B2F rgb(85, 107, 47)
.
Dark Orange #FF8C00 rgb(251, 140, 1)
.
Dark Orchid #9932CC rgb(153, 50, 204)
.
Dark Red #8B0000 rgb(139, 5, 0)
.
Dark Salmon #E9967A rgb(233, 150, 122)
.
Dark Sea Green #8FBC8F rgb(143, 188, 144)
.
Dark Slate Blue #483D8B rgb(72, 61, 139)
.
Dark Slate Gray #2F4F4F rgb(47, 79, 79)
.
Dark Turquoise #00CED1 rgb(48, 206, 209)
.
Dark Violet #9400D3 rgb(148, 0, 211)
.
Deep Pink #FF1493 rgb(249, 19, 147)
.
Deep Sky Blue #00BFFF rgb(43, 191, 254)
.
Dim Gray #696969 rgb(105, 105, 105)
.
Dodger Blue #1E90FF rgb(30, 144, 255)
.
Fire Brick #B22222 rgb(178, 34, 33)
.
Floral White #FFFAF0 rgb(255, 250, 240)
.
Forest Green #228B22 rgb(34, 139, 35)
.
Fuchsia #FF00FF rgb(249, 0, 255)
.
Gainsboro #DCDCDC rgb(220, 220, 220)
.
Ghost White #F8F8FF rgb(248, 248, 255)
.
Gold #FFD700 rgb(253, 215, 3)
.
Golden Rod #DAA520 rgb(218, 165, 32)
.
Gray #808080 rgb(128, 128, 128)
.
Green #008000 rgb(27, 128, 1)
.
Green Yellow #ADFF2F rgb(173, 255, 48)
.
Honey Dew #F0FFF0 rgb(240, 255, 240)
.
Hot Pink #FF69B4 rgb(240, 255, 240)
.
Indian Red #CD5C5C rgb(205, 92, 92)
.
Indigo #4B0082 rgb(75, 0, 130)
.
Ivory #FFFFF0 rgb(255, 255, 239)
.
Khaki #F0E68C rgb(240, 230, 140)
.
Lavender #E6E6FA rgb(230, 230, 250)
.
Lavender Blush #FFF0F5 rgb(254, 240, 245)
.
Lawn Green #7CFC00 rgb(124, 252, 2)
.
Lemon Chiffon #FFFACD rgb(255, 250, 205)
.
Light Blue #ADD8E6 rgb(173, 216, 230)
.
Light Coral #F08080 rgb(240, 128, 128)
.
Light Cyan #E0FFFF rgb(224, 255, 255)
.
Light Golden Rod Yellow #FAFAD2 rgb(250, 250, 210)
.
Light Gray #D3D3D3 rgb(211, 211, 211)
.
Light Green #90EE90 rgb(144, 238, 144)
.
Light Pink #FFB6C1 rgb(252, 182, 193)
.
Light Salmon #FFA07A rgb(251, 160, 122)
.
Light Sea Green #20B2AA rgb(40, 178, 170)
.
Light Sky Blue #87CEFA rgb(135, 206, 250)
.
Light Slate Gray #778899 rgb(119, 136, 153)
.
Light Steel Blue #B0C4DE rgb(176, 196, 222)
.
Light Yellow #FFFFE0 rgb(255, 255, 224)
.
Lime #00FF00 rgb(63, 255, 0)
.
Lime Green #32CD32 rgb(50, 205, 50)
.
Linen #FAF0E6 rgb(250, 240, 230)
.
Magenta #FF00FF rgb(249, 0, 255)
.
Maroon #800000 rgb(128, 4, 0)
.
Medium Aqua Marine #66CDAA rgb(102, 205, 170)
.
Medium Blue #0000CD rgb(0, 0, 205)
.
Medium Orchid #BA55D3 rgb(186, 85, 211)
.
Medium Purple #9370DB rgb(147, 112, 219)
.
Medium Sea Green #3CB371 rgb(60, 179, 113)
.
Medium Slate Blue #7B68EE rgb(123, 103, 238)
.
Medium Spring Green #00FA9A rgb(62, 250, 153)
.
Medium Turquoise #48D1CC rgb(72, 209, 204)
.
Medium Violet Red #C71585 rgb(199, 21, 133)
.
Midnight Blue #191970 rgb(25, 25, 112)
.
Mint Cream #F5FFFA rgb(245, 255, 250)
.
Misty Rose #FFE4E1 rgb(254, 228, 225)
.
Moccasin #FFE4B5 rgb(254, 228, 181)
.
Navajo White #FFDEAD rgb(254, 222, 173)
.
Navy #000080 rgb(0, 0, 128)
.
Old Lace #FDF5E6 rgb(253, 245, 230)
.
Olive #808000 rgb(128, 128, 1)
.
Olive Drab #6B8E23 rgb(107, 142, 35)
.
Orange #FFA500 rgb(252, 165, 3)
.
Orange Red #FF4500 rgb(250, 69, 1)
.
Orchid #DA70D6 rgb(218, 112, 214)
.
Pale Golden Rod #EEE8AA rgb(238, 232, 170)
.
Pale Green #98FB98 rgb(152, 251, 153)
.
Pale Turquoise #AFEEEE rgb(175, 238, 239)
.
Pale Violet Red #DB7093 rgb(219, 112, 147)
.
Papaya Whip #FFEFD5 rgb(254, 239, 213)
.
Peach Puff #FFDAB9 rgb(253, 218, 185)
.
Peru #CD853F rgb(205, 133, 63)
.
Pink #FFC0CB rgb(252, 192, 203)
.
Plum #DDA0DD rgb(221, 160, 221)
.
Powder Blue #B0E0E6 rgb(176, 224, 230)
.
Purple #800080 rgb(128, 0, 128)
.
Rebecca Purple #663399 rgb(102, 51, 153)
.
Red #FF0000 rgb(255, 0, 0)
.
Rosy Brown #BC8F8F rgb(188, 143, 142)
.
Royal Blue #4169E1 rgb(65, 105, 225)
.
Saddle Brown #8B4513 rgb(139, 69, 19)
.
Salmon #FA8072 rgb(250, 128, 114)
.
Sandy Brown #F4A460 rgb(244, 164, 95)
.
Sea Green #2E8B57 rgb(46, 139, 87)
.
Sea Shell #FFF5EE rgb(255, 245, 238)
.
Sienna #A0522D rgb(160, 82, 45)
.
Silver #C0C0C0 rgb(192, 192, 192)
.
Sky Blue #87CEEB rgb(135, 206, 235)
.
Slate Blue #6A5ACD rgb(106, 90, 205)
.
Slate Gray #708090 rgb(112, 128, 145)
.
Snow #FFFAFA rgb(255, 250, 250)
.
Spring Green #00FF7F rgb(63, 255, 128)
.
Steel Blue #4682B4 rgb(70, 130, 180)
.
Tan #D2B48C rgb(210, 180, 140)
.
Teal #008080 rgb(26, 128, 127)
.
Thistle #D8BFD8 rgb(216, 191, 216)
.
Tomato #FF6347 rgb(250, 99, 71)
.
Turquoise #40E0D0 rgb(64, 224, 208)
.
Violet #EE82EE rgb(238, 130, 238)
.
Wheat #F5DEB3 rgb(245, 222, 179)
.
White #FFFFFF rgb(255, 255, 255)
.
White Smoke #F5F5F5 rgb(245, 245, 245)
.
Yellow #FFFF00 rgb(255, 255, 0)
.
Yellow Green #9ACD32 rgb(154, 205, 49)

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

Nama Warna Kode Warna CSS HTML Kode Warna HEX Kode Warna RGB
  lightsalmon #FFA07A rgb(255,160,122)
  salmon #FA8072 rgb(250,128,114)
  darksalmon #E9967A rgb(233,150,122)
  lightcoral #F08080 rgb(240,128,128)
  indianred #CD5C5C rgb(205,92,92)
  crimson #DC143C rgb(220,20,60)
  firebrick #B22222 rgb(178,34,34)
  red #FF0000 rgb(255,0,0)
  darkred #8B0000 rgb(139,0,0)

Sampai di sini, Anda mengetahui daftar kode warna dalam 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 Hexadecimal atau yang lebih dikenal dengan HEX.

Kode HEX adalah tipe 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 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 warna HTML CSS, dan warna RGB dapat diterapkan ke dalam website. Kode ini 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 tanpa ribet? Tak perlu khawatir, berikut adalah daftar website kombinasinya, lengkap untuk Anda coba.

1. Canva

salah satu website inspirasi kode warna rgb adalah Canva

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

contoh penggunaan kode warna lengkap pada adobe color cc

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

contoh penggunaan kode warna pada paletton

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

coolors kode html warna

Coolors cukup berbeda dengan situs kombinasi 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 sesuai HTML tersebut, Anda tetap bisa bebas mengubah-ubah warna dan bereksperimen sesuka hati Anda, kok.

5. Mudcube Colour Sphere

mudcube warna css

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 warna.

6. CheckMyColours

checkmycolours kode warna rgb

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

spy color kode warna lengkap

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

8. Color Explorer

color explorer kode warna rgb

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

9. W3School HTML Color Picker

kode warna color picker

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

html color chart kode warna

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 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. Sebab, hingga saat ini HTML adalah bahasa markup yang masih banyak sekali digunakan untuk berbagai keperluan.

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.

Yasin K 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 :)

Leave a Reply

Your email address will not be published. Required fields are marked *