Daftar Kode Warna HTML dan CSS + Contoh Penggunaannya

Kode warna HTML merupakan bagian penting dalam proses desain dan pengembangan web. Menggunakan kode-kode ini, Anda bisa menentukan warna untuk berbagai elemen visual secara lebih tepat dan konsisten.

Bagi web developer, desainer, dan siapa pun yang membuat konten digital, kode ini hampir tidak terpisahkan dari pekerjaan sehari-hari. Baik untuk membuat website HTML, mendesain gambar, maupun mengerjakan presentasi, hasil pekerjaan Anda bisa lebih profesional dengan memahami kode warna ini.

Tak perlu jauh-jauh mencari, karena kami sudah menyiapkan daftar kode warna HTML di artikel ini yang bisa Anda jadikan panduan. Kami juga akan menjelaskan jenis warna digital yang ada saat ini, serta membagikan contoh penggunaannya. Yuk, scroll ke bawah!

Download HTML Cheat Sheet

Daftar Kode Warna HTML dan CSS

Di bawah ini adalah tabel lengkap yang mencantumkan semua daftar kode warna HTML beserta warna HEX dan RGB yang terkait.

Hasil Kode Warna HTML Kode Hex Kode RGB
Black #000000 rgb(0, 0, 0)
White #FFFFFF rgb(255, 255, 255)
Red #FF0000 rgb(255, 0, 0)
Lime #00FF00 rgb(0, 255, 0)
Blue #0000FF rgb(0, 0, 255)
AliceBlue #F0F8FF rgb(240, 248, 255)
AntiqueWhite #FAEBD7 rgb(250, 235, 215)
Aqua #00FFFF rgb(0, 255, 255)
Aquamarine #7FFFD4 rgb(127, 255, 212)
Azure #F0FFFF rgb(240, 255, 255)
Beige #F5F5DC rgb(245, 245, 220)
Bisque #FFE4C4 rgb(255, 228, 196)
BlanchedAlmond #FFEBCD rgb(255, 235, 205)
BlueViolet #8A2BE2 rgb(138, 43, 226)
Brown #A52A2A rgb(165, 42, 42)
BurlyWood #DEB887 rgb(222, 184, 135)
CadetBlue #5F9EA0 rgb(95, 158, 160)
Chartreuse #7FFF00 rgb(127, 255, 0)
Chocolate #D2691E rgb(210, 105, 30)
Coral #FF7F50 rgb(255, 127, 80)
CornflowerBlue #6495ED rgb(100, 149, 237)
Cornsilk #FFF8DC rgb(255, 248, 220)
Crimson #DC143C rgb(220, 20, 60)
Cyan #00FFFF rgb(0, 255, 255)
DarkBlue #00008B rgb(0, 0, 139)
DarkCyan #008B8B rgb(0, 139, 139)
DarkGoldenRod #B8860B rgb(184, 134, 11)
DarkGray #A9A9A9 rgb(169, 169, 169)
DarkGreen #006400 rgb(0, 100, 0)
DarkKhaki #BDB76B rgb(189, 183, 107)
DarkMagenta #8B008B rgb(139, 0, 139)
DarkOliveGreen #556B2F rgb(85, 107, 47)
DarkOrange #FF8C00 rgb(255, 140, 0)
DarkOrchid #9932CC rgb(153, 50, 204)
DarkRed #8B0000 rgb(139, 0, 0)
DarkSalmon #E9967A rgb(233, 150, 122)
DarkSeaGreen #8FBC8F rgb(143, 188, 143)
DarkSlateBlue #483D8B rgb(72, 61, 139)
DarkSlateGray #2F4F4F rgb(47, 79, 79)
DarkTurquoise #00CED1 rgb(0, 206, 209)
DarkViolet #9400D3 rgb(148, 0, 211)
DeepPink #FF1493 rgb(255, 20, 147)
DeepSkyBlue #00BFFF rgb(0, 191, 255)
DimGray #696969 rgb(105, 105, 105)
DodgerBlue #1E90FF rgb(30, 144, 255)
FireBrick #B22222 rgb(178, 34, 34)
FloralWhite #FFFAF0 rgb(255, 250, 240)
ForestGreen #228B22 rgb(34, 139, 34)
Fuchsia #FF00FF rgb(255, 0, 255)
Gainsboro #DCDCDC rgb(220, 220, 220)
GhostWhite #F8F8FF rgb(248, 248, 255)
Gold #FFD700 rgb(255, 215, 0)
GoldenRod #DAA520 rgb(218, 165, 32)
Gray #808080 rgb(128, 128, 128)
Green #008000 rgb(0, 128, 0)
GreenYellow #ADFF2F rgb(173, 255, 47)
HoneyDew #F0FFF0 rgb(240, 255, 240)
HotPink #FF69B4 rgb(255, 105, 180)
IndianRed #CD5C5C rgb(205, 92, 92)
Indigo #4B0082 rgb(75, 0, 130)
Ivory #FFFFF0 rgb(255, 255, 240)
Khaki #F0E68C rgb(240, 230, 140)
Lavender #E6E6FA rgb(230, 230, 250)
LavenderBlush #FFF0F5 rgb(255, 240, 245)
LawnGreen #7CFC00 rgb(124, 252, 0)
LemonChiffon #FFFACD rgb(255, 250, 205)
LightBlue #ADD8E6 rgb(173, 216, 230)
LightCoral #F08080 rgb(240, 128, 128)
LightCyan #E0FFFF rgb(224, 255, 255)
LightGoldenRodYellow #FAFAD2 rgb(250, 250, 210)
LightGray #D3D3D3 rgb(211, 211, 211)
LightGreen #90EE90 rgb(144, 238, 144)
LightPink #FFB6C1 rgb(255, 182, 193)
LightSalmon #FFA07A rgb(255, 160, 122)
LightSeaGreen #20B2AA rgb(32, 178, 170)
LightSkyBlue #87CEFA rgb(135, 206, 250)
LightSlateGray #778899 rgb(119, 136, 153)
LightSteelBlue #B0C4DE rgb(176, 196, 222)
LightYellow #FFFFE0 rgb(255, 255, 224)
LimeGreen #32CD32 rgb(50, 205, 50)
Linen #FAF0E6 rgb(250, 240, 230)
Magenta #FF00FF rgb(255, 0, 255)
Maroon #800000 rgb(128, 0, 0)
MediumAquamarine #66CDAA rgb(102, 205, 170)
MediumBlue #0000CD rgb(0, 0, 205)
MediumOrchid #BA55D3 rgb(186, 85, 211)
MediumPurple #9370DB rgb(147, 112, 219)
MediumSeaGreen #3CB371 rgb(60, 179, 113)
MediumSlateBlue #7B68EE rgb(123, 104, 238)
MediumSpringGreen #00FA9A rgb(0, 250, 154)
MediumTurquoise #48D1CC rgb(72, 209, 204)
MediumVioletRed #C71585 rgb(199, 21, 133)
MidnightBlue #191970 rgb(25, 25, 112)
MintCream #F5FFFA rgb(245, 255, 250)
MistyRose #FFE4E1 rgb(255, 228, 225)
Moccasin #FFE4B5 rgb(255, 228, 181)
NavajoWhite #FFDEAD rgb(255, 222, 173)
Navy #000080 rgb(0, 0, 128)
OldLace #FDF5E6 rgb(253, 245, 230)
Olive #808000 rgb(128, 128, 0)
OliveDrab #6B8E23 rgb(107, 142, 35)
Orange #FFA500 rgb(255, 165, 0)
OrangeRed #FF4500 rgb(255, 69, 0)
Orchid #DA70D6 rgb(218, 112, 214)
PaleGoldenRod #EEE8AA rgb(238, 232, 170)
PaleGreen #98FB98 rgb(152, 251, 152)
PaleTurquoise #AFEEEE rgb(175, 238, 238)
PaleVioletRed #DB7093 rgb(219, 112, 147)
PapayaWhip #FFEFD5 rgb(255, 239, 213)
PeachPuff #FFDAB9 rgb(255, 218, 185)
Peru #CD853F rgb(205, 133, 63)
Pink #FFC0CB rgb(255, 192, 203)
Plum #DDA0DD rgb(221, 160, 221)
PowderBlue #B0E0E6 rgb(176, 224, 230)
Purple #800080 rgb(128, 0, 128)
RosyBrown #BC8F8F rgb(188, 143, 143)
RoyalBlue #4169E1 rgb(65, 105, 225)
SaddleBrown #8B4513 rgb(139, 69, 19)
Salmon #FA8072 rgb(250, 128, 114)
SandyBrown #F4A460 rgb(244, 164, 96)
SeaGreen #2E8B57 rgb(46, 139, 87)
SeaShell #FFF5EE rgb(255, 245, 238)
Sienna #A0522D rgb(160, 82, 45)
Silver #C0C0C0 rgb(192, 192, 192)
SkyBlue #87CEEB rgb(135, 206, 235)
SlateBlue #6A5ACD rgb(106, 90, 205)
SlateGray #708090 rgb(112, 128, 144)
Snow #FFFAFA rgb(255, 250, 250)
SpringGreen #00FF7F rgb(0, 255, 127)
SteelBlue #4682B4 rgb(70, 130, 180)
Tan #D2B48C rgb(210, 180, 140)
Teal #008080 rgb(0, 128, 128)
Thistle #D8BFD8 rgb(216, 191, 216)
Tomato #FF6347 rgb(255, 99, 71)
Turquoise #40E0D0 rgb(64, 224, 208)
Violet #EE82EE rgb(238, 130, 238)
Wheat #F5DEB3 rgb(245, 222, 179)
WhiteSmoke #F5F5F5 rgb(245, 245, 245)
Yellow #FFFF00 rgb(255, 255, 0)
YellowGreen #9ACD32 rgb(154, 205, 50)

Selain opsi di atas, Anda juga masih bisa menggabungkan berbagai warna lain untuk menghasilkan kombinasi yang tepat. Sebab, ada banyak sekali kemungkinan warna yang bisa dipilih menggunakan kode HEX atau RGB.

Berikut contoh warna-warna yang tidak memiliki kode warna HTML tapi bisa dihasilkan menggunakan kode HEX dan RGB:

Hasil Kode Hex Kode RGB
#A2A832 rgb(162, 168, 50)
#3259A8 rgb(50, 89, 168)
#7C3F55 rgb(124, 63, 85)
#8A7342 rgb(138, 115, 66)
#B1849F rgb(177, 132, 159)
#52619F rgb(82, 97, 159)
#9C754D rgb(156, 117, 77)
#5F7E68 rgb(95, 126, 104)
#AC6F95 rgb(172, 111, 149)
#5D6D8E rgb(93, 109, 142)

Representasi Warna Digital yang Ada saat Ini

Saat ini, ada beberapa model warna digital yang digunakan dalam desain visual, yang tiap-tiapnya memiliki contoh penggunaan idealnya sendiri. Misalnya, kode warna HTML lebih mudah dan praktis karena langsung menuliskan namanya, HEX menjamin warna yang lebih tepat, dan RGB bisa digunakan untuk manipulasi warna tingkat lanjut.

Dengan mempelajari kode warna ini, Anda pun bisa menghadirkan pengalaman visual yang menarik, memastikan desain Anda bisa ditampilkan tanpa masalah di berbagai perangkat dan platform.

Berikut ini adalah beberapa model warna digital yang paling populer saat ini:

  • Kode Warna HTML. Diimplementasikan dengan menggunakan nama warnanya, bukan kode. Misalnya red, antiquewhite, darkorange. Jumlah kemungkinannya lebih terbatas daripada model warna lainnya.
  • Kode Warna Heksadesimal (Hex). Menggunakan kombinasi 6 digit angka dan huruf untuk merepresentasikan warna. Sebagai contoh, #FFFFFF mewakili warna putih.
  • Kode Warna RGB. Kepanjangannya adalah Red, Green, Blue. Warna ditampilkan dengan menentukan intensitas ketiga warna utama, yaitu merah, hijau, dan biru. Misalnya, rgb(255, 255, 255) untuk warna putih. RGB memiliki variasi, yaitu RGBA, yang menyertakan nilai Alpha untuk opacity. Contohnya, rgba(255, 255, 255, 1) merepresentasikan warna putih buram.
  • Kode Warna CMYK. Singkatan dari Cyan, Magenta, Yellow, Key (Hitam). Model ini terutama digunakan dalam pencetakan warna. Dalam implementasinya, warna dicampurkan berdasarkan persentase dari keempat warna tersebut. Contohnya, warna biru pekat bisa direpresentasikan sebagai cmyk(100%, 80%, 0%, 20%).
  • Kode Warna HSV. Merupakan singkatan dari Hue, Saturation, Value. Dengan model ini, properti warna dikontrol secara intuitif berdasarkan rona, saturasi, dan nilainya. Contohnya, warna kuning cerah bisa direpresentasikan menggunakan kode hsv(60°, 100%, 100%).
  • Kode Warna HSL. Singkatan dari Hue, Saturation, Lightness. Format ini merepresentasikan warna dengan cara yang lebih mudah dipahami oleh manusia. Contohnya, hsl(0, 0%, 100%) adalah warna putih. HSL juga memiliki variasi yang menentukan opacity, yaitu HSLA. Misalnya, hsla(0, 0%, 100%, 1) akan menghasilkan warna putih buram.

Contoh Cara Menggunakan Kode Warna HTML

Nah, setelah memahami warna-warna yang ada, Anda juga perlu tahu cara menerapkannya untuk menciptakan desain yang menarik secara visual dan konsisten.

Di bawah ini, kami akan membagikan beberapa contoh praktis penggunaan kode warna HTML menggunakan Hex. Apabila lebih suka menggunakan kode warna HTML atau RGB, cukup ganti kode Hex dengan nilai yang sesuai.

Misalnya, untuk menggunakan kode warna HTML atau RGB bagi warna merah, cukup ganti kode dalam format #FF0000 dengan red atau rgb(255, 0, 0), sesuai daftar dalam tabel.

Mengganti Warna Teks

Di bawah ini, kami akan menunjukkan cara mengganti warna teks menggunakan kode warna Hex untuk mendapatkan hasil seperti di bawah ini:

Contoh teks ini menggunakan kode warna Hex: #FF0000

Contoh teks ini menggunakan kode warna Hex: #00FF00

Contoh teks ini menggunakan kode warna Hex: #0000FF

Untuk menerapkan kustomisasi warna di atas, Anda bisa menuliskan kode seperti ini:

<p style="color: #FF0000; margin-bottom: 10px;">Contoh teks ini menggunakan kode warna Hex: #FF0000</p>
<p style="color: #00FF00; margin-bottom: 10px;">Contoh teks ini menggunakan kode warna Hex: #00FF00</p>
<p style="color: #0000FF; margin-bottom: 10px;">Contoh teks ini menggunakan kode warna Hex: #0000FF</p>

Memberi Warna pada Border Tabel

Contoh berikut ini menunjukkan cara menerapkan warna pada border tabel menggunakan kode Hex, yang akan menghasilkan output seperti berikut ini:

Contoh Warna Border Tabel 1
Contoh Warna Border Tabel 2
Contoh Warna Border Tabel 3

Kode yang bisa Anda gunakan adalah:

<table style="border: 2px solid #FF0000; margin-bottom: 10px;">
    <tr>
        <td>Contoh Warna Border Tabel 1</td>
    </tr>
</table>
<table style="border: 2px solid #00FF00; margin-bottom: 10px;">
    <tr>
        <td>Contoh Warna Border Tabel 2</td>
    </tr>
</table>
<table style="border: 2px solid #0000FF; margin-bottom: 10px;">
    <tr>
        <td>Contoh Warna Border Tabel 3</td>
    </tr>
</table>

Menambahkan Warna Background pada Teks

Contoh di bawah ini menunjukkan cara menambahkan warna latar belakang teks menggunakan kode Hex. Hasilnya, Anda akan melihat teks seperti di bawah ini:

Contoh teks ini diberi warna latar belakang menggunakan kode warna Hex: #F08080 (Light Coral)

Contoh teks ini diberi warna latar belakang menggunakan kode warna Hex: #98FB98 (Pale Green)

Contoh teks ini diberi warna latar belakang menggunakan kode warna Hex: #87CEFA (Light Sky Blue)

Untuk melakukan penyesuaian seperti di atas, Anda bisa menggunakan kode berikut:

<p style="background-color: #F08080; color: #000000; margin-bottom: 10px;">Contoh teks ini diberi warna latar belakang menggunakan kode warna Hex: #F08080 (Light Coral)</p>
<p style="background-color: #98FB98; color: #000000; margin-bottom: 10px;">Contoh teks ini diberi warna latar belakang menggunakan kode warna Hex: #98FB98 (Pale Green)</p>
<p style="background-color: #87CEFA; color: #000000; margin-bottom: 10px;">Contoh teks ini diberi warna latar belakang menggunakan kode warna Hex: #87CEFA (Light Sky Blue)</p>

Mengubah Warna Tombol HTML

Anda juga bisa mengubah warna tombol yang dibuat menggunakan kode HTML, seperti pada contoh berikut ini.

Kode yang bisa Anda tulis untuk mendapatkan hasil di atas adalah:

<button style="background-color: #FF0000; color: #ffffff; padding: 10px 20px; border: none; margin-bottom: 10px;">Contoh Tombol Warna Hex 1</button>
<button style="background-color: #00FF00; color: #000000; padding: 10px 20px; border: none; margin-bottom: 10px;">Contoh Tombol Warna Hex 2</button>
<button style="background-color: #0000FF; color: #ffffff; padding: 10px 20px; border: none; margin-bottom: 10px;">Contoh Tombol Warna Hex 3</button>

Selain mengatur warnanya, Anda juga bisa memberi jarak pada setiap tombol dengan mengatur angka padding (misalnya 10px, 20px, dan seterusnya).

Mengatur Warna Div Element

Contoh ini akan menunjukkan cara mengatur warna latar belakang elemen div yang bisa berisi beberapa elemen, termasuk teks, gambar, atau elemen HTML lainnya. Hasilnya akan seperti ini:

Div dengan warna latar belakang Hex: #F08080 (Light Coral)
Div dengan warna latar belakang Hex: #98FB98 (Pale Green)
Div dengan warna latar belakang Hex: #87CEFA (Light Sky Blue)

Berbeda dengan elemen latar belakang teks, elemen <div> berfungsi untuk mengatur warna latar belakang container atau pembagian yang lebih besar pada halaman web.

Berikut adalah kode yang digunakan untuk menghasilkan output di atas:

<div style="background-color: #F08080; color: #000000; padding: 20px; margin-bottom: 10px;">Div dengan warna latar belakang Hex: #F08080 (Light Coral)</div>
<div style="background-color: #98FB98; color: #000000; padding: 20px; margin-bottom: 10px;">Div dengan warna latar belakang Hex: #98FB98 (Pale Green)</div>
<div style="background-color: #87CEFA; color: #000000; padding: 20px; margin-bottom: 10px;">Div dengan warna latar belakang Hex: #87CEFA (Light Sky Blue)</div>

Cara Mencari Kode Warna dengan Mudah

Untuk menemukan kode HEX atau RGB warna tertentu, ada berbagai tool yang bisa Anda manfaatkan. Beberapa tool ini sudah disediakan secara default di perangkat yang Anda gunakan, serta ada juga yang tersedia online.

Contohnya, Microsoft Paint bawaan sistem Windows memiliki tool pemilih warna yang juga menampilkan kodenya dalam HEX, RGB, dan HSV. Anda bisa mengaksesnya dari bagian Colors, lalu cukup mengarahkan kursor ke warna yang diinginkan. Kode Hex warna tersebut akan muncul di sebelah kanan.

Selain itu, tersedia juga berbagai tool online yang bisa Anda gunakan. Tak perlu repot-repot mencarinya, karena Google menyediakan pemilih warna yang langsung bisa Anda akses dari halaman hasil mesin pencari (SERP).

Cukup ketikkan “HTML color picker” di kolom pencarian Google, lalu Anda bisa mengakses tool ini, dengan pilihan kode HEX, RGB, CMYK, HSV, dan HSL. Pilih warna dengan mengarahkan kursor, lalu lihat pratinjaunya di sebelah kiri. Setelah itu, Anda bisa menyalin kodenya sesuai kebutuhan.

tool html color picker dari google

Menggunakan tool tersebut, desainer dan developer pun bisa dengan mudah memilih dan menentukan warna yang tepat sehingga mereka bisa menerapkannya secara konsisten untuk proyek-proyek yang memerlukan proses kreatif.

Kesimpulan

Kode warna HTML memiliki peran yang sangat penting apabila Anda sering menangani hal-hal seputar desain dan web development. Menggunakan kode-kode ini, Anda bisa menyesuaikan elemen visual dan tampilan website dengan tepat guna menciptakan desain yang sesuai rencana.

Dengan memahami berbagai jenis kode warna dan penggunaannya, Anda pun bisa membuat halaman web yang menarik dan mudah diakses. Selanjutnya, Anda bisa menggunakan tutorial ini sebagai referensi untuk menyempurnakan desain Anda dan menjamin konsistensi warna dalam proyek Anda.

Apabila masih memiliki pertanyaan, jangan ragu untuk menyampaikannya lewat kolom komentar di bawah artikel ini, ya!

Author
Penulis

Faradilla A.

Faradilla, yang lebih akrab disapa Ninda, adalah Content Marketing Specialist di Hostinger. Ia suka mengikuti tren teknologi, digital marketing, dan belajar bahasa. Melalui tutorial Hostinger ini, Ninda ingin berbagi informasi dan membantu pembaca menyelesaikan masalah yang dialami. Kenali Ninda lebih dekat di LinkedIn.