Daftar Kode Warna HTML CSS Lengkap dan Cara Menggunakannya

Menggunakan kode warna dalam HTML dan CSS adalah keterampilan penting untuk mendesain halaman web yang menarik dan fungsional. Kode warna memungkinkan Anda mengubah warna teks, latar belakang, dan border elemen HTML dengan mudah. Artikel ini akan membahas berbagai aspek dari kode warna, termasuk penjelasan tentang kode warna RGB dan HEX, cara penggunaannya, dan sumber daya online untuk menemukan kombinasi warna yang menarik.

Apa itu Kode Warna RGB dan HEX?

RGB (Red, Green, Blue) dan HEX (Hexadecimal) adalah dua format umum untuk menentukan warna di HTML dan CSS.

• Kode Warna RGB: Format ini menggunakan tiga angka desimal yang mewakili intensitas warna merah, hijau, dan biru. Nilai ini berkisar antara 0 hingga 255. Contoh: rgb(255, 0, 0) untuk warna merah murni.
• Kode Warna HEX: Format ini menggunakan enam digit heksadesimal untuk mewakili intensitas warna. Setiap dua digit mewakili satu warna dasar (merah, hijau, biru). Contoh: #FF0000 juga untuk warna merah murni.

Kode Warna HTML dan CSS

Berikut adalah daftar lengkapnya dalam format Hexadecimal (HEX) serta RGB:

Tampilan Warna	Nama	Kode Warna dalam HEX	Kode Warna dalam 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)

Cara Menggunakan Kode Warna HTML CSS Lengkap

Lalu berikut ini adalah cara menggunakan kode warna HTML dalam format Hexadecimal (HEX) serta RGB tersebut.

Cara Menggunakan Kode HTML Warna di Karakter

Untuk mengubah warna teks dalam HTML menggunakan CSS, Anda dapat menggunakan properti color. Berikut contoh penggunaannya:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Warna Teks</title>
<style>
.teks-merah {
color: #FF0000; /* Warna merah dalam format HEX */
}
.teks-hijau {
color: rgb(0, 255, 0); /* Warna hijau dalam format RGB */
}
</style>
</head>
<body>
<p class="teks-merah">Ini adalah teks berwarna merah.</p>
<p class="teks-hijau">Ini adalah teks berwarna hijau.</p>
</body>
</html>

Cara Menggunakan Kode Warna HTML Lengkap di Background

Mengubah warna latar belakang suatu elemen dapat dilakukan dengan menggunakan properti background-color. Contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Warna Latar Belakang</title>
<style>
.latar-belakang-biru {
background-color: #0000FF; /* Warna biru dalam format HEX */
}
.latar-belakang-kuning {
background-color: rgb(255, 255, 0); /* Warna kuning dalam format RGB */
}
</style>
</head>
<body>
<div class="latar-belakang-biru">
<p>Ini adalah latar belakang biru.</p>
</div>
<div class="latar-belakang-kuning">
<p>Ini adalah latar belakang kuning.</p>
</div>
</body>
</html>

Cara Menggunakan Kode Warna HTML di Border

Untuk mengubah warna border elemen, Anda dapat menggunakan properti border-color. Berikut contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Warna Border</title>
<style>
.border-merah {
border: 2px solid #FF0000; /* Warna merah dalam format HEX */
}
.border-hijau {
border: 2px solid rgb(0, 255, 0); /* Warna hijau dalam format RGB */
}
</style>
</head>
<body>
<div class="border-merah">
<p>Ini adalah border merah.</p>
</div>
<div class="border-hijau">
<p>Ini adalah border hijau.</p>
</div>
</body>
</html>

10 Website Terbaik untuk Mencari Kombinasi Kode Warna Lengkap

Memilih kombinasi warna yang tepat adalah aspek krusial dalam desain, baik untuk web, grafis, atau proyek kreatif lainnya. Berikut adalah daftar sepuluh website yang dapat membantu Anda menemukan kombinasi warna yang menarik dan sesuai dengan kebutuhan desain Anda:

1. Canva

Canva adalah platform desain yang tidak hanya menyediakan alat untuk membuat berbagai proyek desain grafis tetapi juga menawarkan berbagai palet warna yang bisa disesuaikan. Canva memungkinkan pengguna untuk mengeksplorasi berbagai kombinasi warna dan melihat bagaimana warna-warna tersebut berinteraksi satu sama lain dalam konteks desain nyata.

Fitur Utama:

• Palet warna yang dapat disesuaikan.
• Alat desain yang komprehensif.
• Integrasi dengan berbagai aset desain lainnya.

2. Adobe Color CC

Adobe Color CC adalah alat dari Adobe yang sangat berguna untuk membuat palet warna berdasarkan berbagai aturan warna seperti komplementer, triad, dan tetradic. Alat ini memungkinkan Anda untuk membuat, menyimpan, dan berbagi palet warna yang dapat digunakan di seluruh produk Adobe seperti Photoshop dan Illustrator.

Fitur Utama:

• Pembuatan palet warna berbasis aturan warna.
• Kemampuan untuk menyimpan dan berbagi palet.
• Integrasi dengan produk Adobe lainnya.

3. Paletton

Paletton adalah alat interaktif yang membantu menemukan kombinasi warna dengan visualisasi langsung. Pengguna dapat memilih warna dasar dan melihat kombinasi yang dihasilkan sesuai dengan berbagai skema warna, seperti monokromatik, komplementer, dan triad.

Fitur Utama:

• Visualisasi langsung dari kombinasi warna.
• Berbagai skema warna yang bisa dipilih.
• Antarmuka yang mudah digunakan.

4. Coolors

Coolors adalah generator palet warna cepat yang memungkinkan Anda menyesuaikan dan menyimpan palet dengan mudah. Dengan satu klik, pengguna dapat menghasilkan palet baru atau menyesuaikan warna yang sudah ada.

Fitur Utama:

• Pembuatan palet warna instan.
• Kemampuan untuk menyesuaikan dan menyimpan palet.
• Antarmuka yang intuitif dan mudah digunakan.

5. Mudcube Colour Sphere

Mudcube Colour Sphere menyediakan berbagai skema warna yang dapat diatur sesuai dengan kebutuhan desain Anda. Alat ini memungkinkan pengguna untuk bereksperimen dengan warna dan melihat bagaimana mereka bekerja bersama dalam berbagai konteks.

Fitur Utama:

• Berbagai skema warna yang bisa disesuaikan.
• Visualisasi interaktif.
• Fokus pada eksperimen warna.

6. CheckMyColours

CheckMyColours adalah alat untuk memeriksa kontras warna dan memastikan keterbacaan di berbagai latar belakang. Alat ini sangat berguna untuk desainer web yang ingin memastikan bahwa situs mereka memenuhi standar aksesibilitas.

Fitur Utama:

• Pemeriksaan kontras warna.
• Keterbacaan di berbagai latar belakang.
• Alat aksesibilitas untuk desainer web.

7. Spy Color

Spy Color menyediakan informasi detail tentang warna dan membantu menciptakan palet yang harmonis. Alat ini memungkinkan pengguna untuk memecah warna menjadi komponen RGB atau HEX dan menemukan warna komplementer.

Fitur Utama:

• Informasi detail tentang warna.
• Pembuatan palet yang harmonis.
• Analisis warna komplementer.

8. Color Explorer

Color Explorer adalah alat yang membantu mencari dan mengelola palet warna secara efisien. Pengguna dapat membuat, menyimpan, dan mengimpor palet warna dari berbagai format.

Fitur Utama:

• Pencarian dan pengelolaan palet warna.
• Kemampuan untuk mengimpor palet.
• Alat desain yang komprehensif.

9. W3Schools HTML Color Picker

W3Schools HTML Color Picker adalah alat yang mudah digunakan untuk memilih dan menguji warna HTML dan CSS. Alat ini menyediakan kode warna dalam format RGB dan HEX dan memungkinkan pengguna untuk melihat bagaimana warna tersebut akan terlihat di web.

Fitur Utama:

• Pemilihan dan pengujian warna HTML dan CSS.
• Kode warna dalam format RGB dan HEX.
• Alat sederhana dan mudah digunakan.

10. HTML Color Codes

HTML Color Codes menyediakan informasi dan contoh penggunaan kode warna HTML dan CSS. Situs ini membantu pengguna untuk memahami dan menerapkan kode warna dalam proyek desain mereka.

Fitur Utama:

• Informasi lengkap tentang kode warna HTML dan CSS.
• Contoh penggunaan praktis.
• Sumber daya yang mendalam untuk desainer.

Terapkan Kombinasi Kode HTML Yang Tepat, Untuk Dapatkan Warna Terbaik!

Sekarang setelah Anda memahami berbagai cara menggunakan kode warna di HTML dan CSS, serta memiliki sumber daya untuk menemukan kombinasi warna yang menarik, saatnya untuk mulai bereksperimen dan mengaplikasikannya pada proyek Anda. Dengan pemilihan warna yang tepat, Anda dapat membuat desain web yang tidak hanya menarik secara visual tetapi juga fungsional dan user-friendly. Happy coding!