Mochamad Alif Prayogo Pengin jadi orang kaya tapi belum tercapai, sudah berbagai usaha dilakukan tapi tidak konsisten, tolooong~

1500+ Kode Warna HTML & CSS: Lengkap, Cara Penggunaan

5 min read

daftar kode warna html dan css lengkap

Dalam dunia pemrograman, pewarnaan sebuah program yang ditampilkan itu menggunakan sebuah kode. Untuk kalian yang sudah terbiasa dengan desain komputer pasti tidak asing dengan kode-kode seperti #ff0000 atau #92a8d1. Kedua kode tersebut adalah contoh kode warna hexadecimal.

Kode warna yang biasanya dipakai dalam dunia pemrograman komputer ada beberapa jenis, yaitu hexadecimal seperti yang sudah dicontohkan tadi, kemudian ada juga RGB, RGBA, HSL, dan HSLA. Untuk kode hexadecimal  ini tersusun atas kombinasi huruf dan angka dengan diawali tanda pagar (#).

Sedangkan untuk kode RGB terdiri atas 3 bagian angka yang dipisah oleh tanda koma (,). Kode warna pada HTML menggunakan HTML triplets, dimana setiap dua digit kode akan melambangkan warna-warna merah (red), hijau (green), dan biru (blue) atau #RRGGBB.

Nah supaya kalian lebih paham tentang kode-kode warna HTML, berikut ini sudah mastekno rangkum daftar list kode warna HTML lengkap yang bisa kalian jadikan sebagai panduan dalam menyusun kode warna HTML. Berikut adalah daftar kode warna htm lengkap.

 

Daftar Kode Warna HTML Lengkap

kode warna htm lengkap

Warna adalah sesuatu hal yang sangat penting dan unik dalam dunia desain grafis dan visual. Warna tidak mempunyai bentuk, ukuran ataupun simbol untuk menyampaikan pesan secara langsung. Jadi kalian tidak perlu tahu warna apa saja yang cocok dipakai dalam sebuah website.

Berikut ini sudah kami sediakan sebuah tabel kode warna HTML & CSS yang bisa kalian pakai untuk memperindah website kalian. Bukan cuma memperindah saja, ada juga berbagai faktor lain yang juga dipengaruhi oleh warna. Oleh karena itulah warna ini sangat penting.

Nama WarnaHEXRGB
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)

Selain itu kalian juga bisa melihat perbedaan tentang hexadecimal dan RGB dalam tabel berikut ini.

HTML / CSS
Color Name
Hex Code
#RRGGBB
Decimal Code
(R,G,B)
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)

Selain memakai kode warna kalian juga bisa menggunakan generator untuk menentukan kode warna mana saja yang bisa dipakai. Kalian bisa menggunakan generator warna online yang sudah disediakan oleh beberapa website di internet. Diantaranya adalah website-website berikut ini:

  • W3School HTML Color Picker. Situs yang satu ini bisa kalian gunakan untuk menentukan warna berdasarkan dari warna dasarnya. Kalian juga bisa memilih tingkat akurasi dan memilih secara langsung (priview) hasil tersebut. Bukan cuma itu saja, dalam website ini juga tersedia pilihan untuk memasukkan warna berdasarkan dari kode dan memunculkan jendela HTML5 untuk pemilihan warna.
  • Colors & Skillshare. Situs ini adalah sebuah situs yang dipakai sebagai alat schema generator. Jika kalian adalah seorang desainer, situs ini bisa memberikan saran schema yang sesuai dengan kebutuhan kalian. Selain itu ada juga kode hexadecimal yang bisa kalian pakai ke dalam website.
  • HTML Color Code. Situs selanjutnya ini adalah situs web sederhana yang menyediakan tampilan pemilihan warna lengkap. Cara menggunakan website ini sangat mudah, kalian tinggal mengarahkan kursor ke tabel warna atau dengan menggesser slider untuk mendapatkan warna yang sesuai dengan kode warna dalam bentuk kode hexadecimal.

Baca Juga : Framework PHP Terbaik 2020

 

 

Cara Menggunakan Kode Warna HTML & CSS

Penggunaan Kode Warna dalam HTML dan CSS pada saat diterapkan ke dalam sebuah website. Kode warna bisa kalian gunakan di hampir semua bagian dalam website, seperti background, karakter, border, dan masih banyak lagi. Nah tentu ada yang masih bingung cara penggunaannya, berikut adalah caranya.

 

1. Cara Menggunakan Kode Warna HTML di Karakter

<!DOCTYPE html>

<html>

<body>

<p><font size=”3″ color=”#ff0000″>Daftar Kode Warna Pada HTML & CSS</font></p>

<p><font size=”2″ color=”#00ff00″>Daftar Kode Warna Pada HTML & CSS</font></p>

<p><font face=”verdana” color=”#0000ff”>Daftar Kode Warna Pada HTML & CSS</font></p>

<p><strong>Catatan:</strong> Elemen font hanya mendukung pada HTML 5. Gunakan CSS sebagai ganti</p>

</body>

</html>

Script di atas akan menampilkan hasil seperti gambar berikut ini:

cara menggunakan kode warna html di karakter

Note: Element font hanya mendukung di HTML5, kalian bisa menggunakan CSS sebagai gantinya.

Baca Juga : Pengertian Framework CodeIgniter

 

2. Cara Menggunakan Kode Warna HTML 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>HEX colors:</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 atau scrip di atas akan menampilkan hasil seperti gambar berikut ini:

cara menggunakan kode warna html di background

 

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

<h2>Daftar Kode Warna Pada HTML & CSS</h2>

<div>Nilai dari border-color bisa 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.      </p>

</body>

</html>

Kode atau scrip di atas akan menghasilkan penampilan atau hasil seperti gambar berikut ini.

cara menggunakan kode warna html di border

Note: border-color tidak bisa bekerja jika dipakai sendirian, kalian harus menggunakan properti seperti border-style dan sejenisnya untuk mengatur border.

 

Nah itulah informasi yang bisa mastekno sampaikan kepada kalian tentang daftar kode warna pada HTML & CSS. Sekarang kalian jadi tahu daftar kode setiap warna pada HTML dan CSS. Semoga informasi yang kami sampaikan di atas tadi bermanfaat dan menambah pengetahuan kalian.

Mengetahui daftar kode warna pada HTML dan CSS sangatlah penting. Karena penggunaan kode warna ini hampir digunakan di berbagai pengembangan website. Selain itu warna juga bisa memengaruhi sisi psikolog milik seseorang.

Oleh karena itulah pemilihan warna yang tepat dan bagus juga bisa memengaruhi user experience atau pengalaman para pengunjung saat berada di website kita. Degan pemilihan warna yang sesuai juga akan membuat pengunjung betah dan tertarik untuk sering berkunjung ke website kita.

Daftar kode warna HTML dan CSS di atas tentunya bisa membantu kalian dalam memahami cara mewarnai website dan membuat pengunjung betah berlama-lama di website atau bahkan sering mengunjunginya karena tampilan dan pemilihan warna yang tepat.

Demikianlah informasi yang bisa sampaikan tentang daftar kode warna, semoga informasi di atas bisa membantu kalian untuk lebih memahami kode-kode warna yang ada pada HTML dan CSS. Jika kalian masih bingung dan ada yang ingin ditanyakan, silahkan bertanya di kolom komentar.


Mochamad Alif Prayogo Pengin jadi orang kaya tapi belum tercapai, sudah berbagai usaha dilakukan tapi tidak konsisten, tolooong~
DarkLight