Daftar Kode Warna Pada HTML & CSS

Lainnya Tips & Trik Website

Dewa Komputer – Pada pemrograman kode warna pada html & css dikerjakan dengan memakai kode. Buat Anda yang telah terlatih dengan design computer tentu tidak asing dengan beberapa kode seperti #92a8d1 serta #ff0000. Ke-2 kode itu adalah kode warna hexadecimal.

Ada banyak type kode warna yang umumnya dipakai di pemrograman computer, yakni berupa hexadecimal, RGB, RGBA, HSL, & HSLA.

Hexadesimal tersusun dari gabungan huruf serta angka dengan dengan diawali sinyal ‘#’. Sedang RGB terbagi dalam 3 sisi angka yang terpisah oleh sinyal koma. Kode warna pada HTML memakai HTML triplets. Tiap dua digit kode melambangkan beberapa warna red (merah), green (hijau), blue (biru) atau #RRGGBB.

Berikut ini ialah daftar kode warna HTML komplet yang bisa Anda pakai jadi tips untuk membuat kode arna.

Daftar Kode Warna HTML Lengkap

Warna adalah hal penting serta unik di dunia design visual. Warna tidak mempunyai bentuk, ukuran atau lambang untuk mengemukakan pesan dengan cara langsung. Hingga Anda butuh untuk tahu warna apa yang pas dipakai di web.

Berikut ini tabel kode warna HTML & CSS yang bisa Anda pakai untuk mempercantik web. Bukan sekedar mempercantik, banyak unsur lain yang dikuasai oleh warna. Lebih detilnya Anda bisa membaca penjelasan kami tentang Memastikan Warna Efisien untuk Design Web Anda. Mengenai bagaimana warna itu 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)

Anda bisa lihat ketidaksamaan tentang hexadecimal serta RGB.

ColorHTML / 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)

Tidak hanya memakai kode warna, Anda dapat memakai generator untuk memastikan kode warna apa yang dapat dipakai. Anda bisa memakai generator warna yang disiapkan oleh beberapa web berikut ini.

  • W3School HTML Color Picker
    Situs ini bisa Anda pakai untuk pilih warna berdasar warna fundamen. Anda bisa pilih tingkat saturasi serta lihat langsung (preview) hasilnya. Diluar itu, ada pilihan untuk masukkan warna berdasar kode dan menimbulkan jendela HTML 5 untuk penentuan warna.
  • Colors & Skillshare
    Colors adalah situs yang dipakai jadi alat schema generator. Bila Anda satu orang desainer, situs ini bisa memberi pendapat schema yang sesuai keperluan dan ada kode hexadecimal yang dapat dipakai ke web.
  • HTML Color Code
    HTML Color Code adalah situs situs simpel yang sediakan penampilan penentuan warna. Anda tinggal mengarahkan cursor ke tabel warna atau menggeser slider untuk memperoleh warna yang sesuai kode warna berbentuk hexadecimal.

Cara Menggunakan Kode Warna HTML & CSS

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

Berikut beberapa cara menggunakan kode warna HTML dan CSS :

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>

Skrip di atas akan menghasilkan tampilan seperti di bawah ini:

Daftar Kode Warna Pada HTML & CSS

Daftar Kode Warna Pada HTML & CSS

Daftar Kode Warna Pada HTML & CSS

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

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 di atas menghasilkan tampilan seperti ini:

HEX colors :

Red

Green

Blue

Yellow

Cerise

Cara Menggunakan Kode Warna HTML di Border

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
 border-style: solid;
 border-color: #92a8d1;
}
div {
 border-style: solid;
 border-color: #92a8d1;
}
</style>
</head>
<body>
 <h1>Daftar Kode Warna Pada HTML & CSS</h1>
 <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.      </p>
</body>
</html>

Skrip di atas akan menampilkan tampilan seperti di bawah ini :

Daftar Kode Warna Pada 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.

Kesimpulan

Penting untuk mengetahui daftar kode warna pada HTML dan CSS. Penggunaan kode warna hampir 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 mengombinasikan beberapa warna di dalam satu halaman website.

Daftar kode warna pada HTML serta CSS di atas paling tidak bisa sedikit menolong Anda untuk mengerti bagaimanakah cara memberi warna web serta menerapkannya agar pengunjung lebih kerasan serta tertarik untuk mengunjunginya.

Anda juga dapat subscribe untuk mendapatkan informasi terbaru dari kami dan baca juga artikel lainnya : Unggah File & folder Ke Google Drive Dengan Cepat.

Leave a Reply

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