Amera P. Safira With a newfound love of the IT world, Amera likes to turn complex topics into easy-to-read and comprehensive articles. In her spare times, Amera enjoys playing video games and reading every book she can find.

Panduan Kode Warna HTML & CSS Full Color

6 min read

Jika Anda sudah lama berurusan dengan web development, pastinya Anda tahu bahwa memilih kode warna HTML & CSS yang tepat untuk website adalah hal yang penting.

Pemilihan warna yang tepat untuk sebuah website dapat membangkitkan suatu emosi, mengatur tone website, dan membuat keseluruhan desain Anda lebih kohesif dan hidup.

Namun memilih kode warna HTML yang tepat untuk website memang tidak mudah 一 ada banyak faktor yang perlu dipertimbangkan. Mulai dari jenis website sampai target audiens.

Nah di artikel kali ini, kami akan membahas semua yang perlu Anda ketahui tentang HTML color code. Mulai dari jenis-jenis, cara menerapkannya pada website, sampai kode lengkapnya.

Yuk langsung saja kita mulai!

HTML Color Coding 101

Di kehidupan sehari-hari, Anda pasti sering melihat berbagai macam warna 一  kuning, merah, biru, dan lain sebagainya. Nah di dalam warna-warna ini ada juga nuansa yang berbeda.

Mulai dari biru muda, biru tua, biru laut, biru langit, dan lain-lain. Warna-warna dengan nuansa unik tersebut sangat mungkin untuk bisa diartikan secara berbeda bagi setiap orang. 

Nah untuk menghindari kesalahan penafsiran warna saat melakukan desain online, kode warna HTML memberikan solusi terbaik melalui format kode warna yang sudah dikenali komputer.

Nantinya, komputer akan membaca dan mengartikan kode HTML tersebut. Selanjutnya, komputer akan menampilkan warna yang sesuai dengan kode yang dimasukan ke website Anda.

Baca juga: Apa Itu HTML? Pengertian, Fungsi, dan Cara Kerjanya

Sebenarnya, kode warna HTML mempunyai beberapa format yang berbeda. Namun, dua format HTML color code yang paling dikenal di antara developer adalah Hex color codes & RGB values.

Nah berikut ini adalah daftar lengkap kode warna HTML & CSS dengan format HEX  dan juga RGB!

Kode Warna HTML & CSS Full Color

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

Cara Penerapan HTML Color Code

Nah setelah mengetahui daftar kode warna HTML dalam format Hex dan RGB di atas, sekarang waktunya belajar cara menerapkannya pada website Anda.

Ada beberapa metode penerapan HTML color code yang bisa Anda coba. Yuk langsung saja kita bahas beberapa metode tersebut dan contoh penerapannya!

1. HEX Color Codes

Salah satu metode penerapan kode warna HTML yang paling umum adalah melalui format hexadecimal color codes atau yang juga dikenal dengan HEX.

HEX color codes terdiri dari kombinasi bilang bulat dari 0 sampai 9 dan 6 angka pertama di alfabet; A, B, C, D, E, dan F. Contoh kombinasi tersebut adalah  #FFA500 atau #FFD700. 

Setiap kode warna merujuk ke sebuah warna yang spesific. Misalnya, dua contoh kode HEX yang kami berikan diatas merujuk ke warna Orange dan Gold.

Nah untuk mendapatkan kode warna HEX yang Anda inginkan, silakan gunakan daftar warna yang sudah kami sediakan. Selanjutnya, tentukan atribut website yang ingin diberi warna.

Contohnya jika Anda ingin mengubah sub-heading keempat menjadi berwarna Orange, cukup selipkan kode warna HEX seperti berikut ini:

  <h4 style=”color: #FFA500″> GoldenFast Network </h4>

Nantinya kode tersebut akan terlihat seperti:

GoldenFast Network

Sangat mudah bukan Golden friends? Jika Anda ingin mengubah warna atribut website yang lainnya, ubah kode <h4> </h4> ke atribut pilihan Anda!

2. RGB Value

Metode penerapan kode warna HTML yang lainnya adalah melalui kode RGB value. Metode yang satu ini cukup mudah digunakan. Cara kerjanya pun sama seperti HEX color codes.

Anda hanya perlu menemukan RGB value yang Anda inginkan di daftar atas. Lalu, masukkan kode tersebut di dalam baris kode HTML seperti berikut ini:

<h4 style=”color: rgb(255,159,53)”> GoldenFast Network</h4>

Selain memberi warna pada text dan website, RGB value juga sangat populer akan kemampuannya untuk mengubah opacity dari warna tersebut.

Caranya juga cukup mudah. Anda hanya perlu menambahkan atau mengurangi nilai 0.5 pada editor HTML. Semakin rendah nilainya, semakin transparan teksnya.

Untuk contoh, mari kita buat teks dengan warna yang sama menjadi lebih transparan melalui contoh berikut ini:

<h4 style=”color: rgb(255,159,53, 0.5)”> GoldenFast Network </h4>

Hasil kode tersebut akan terlihat seperti:

GoldenFast Network

3. Melalui Nama Warna

Cara lain untuk menggunakan kode warna HTML untuk memberikan warna pada website adalah melalui nama warna itu sendiri.

Melalui metode ini, Anda cukup menggunakan baris kode yang sama seperti contoh dan mengganti kode HEX atau RGB ke nama warna itu sendiri.

Contoh kode warna HTML melalui nama warna akan terlihat seperti ini: 

<h4 style=”color: orange”> GoldenFast Network </h4>

Baca juga: 25+ Perintah Dasar Linux [Lengkap dengan Fungsi & Contohnya]

3 Contoh Website Color Scheme Terbaik

Nah berikut adalah beberapa contoh skema warna terbaik yang bisa Anda tiru untuk menerapkan warna kode HTML pada website!

1. Simple & Mencolok

Simple & Mencolok
Source

Salah satu kombinasi color scheme yang terbaik biasanya datang dari website yang mempunyai desain yang simple namun mencolok.

Campuran antara warna-warna yang tenang dan berani dapat membuat pengunjung website merasa lebih tertarik untuk membuka website secara lebih jauh.

2. Elegan dan tenang

Elegan dan tenang
Source

Jika website Anda berurusan dengan hal-hal yang elegan dan feminim, contoh color scheme berikut ini bisa menjadi pilihan yang tepat.

Kombinasi dari warna-warna pastel yang elegan dan warna gelap yang terkesan misterius, Anda bisa mendapatkan sebuah website yang terlihat lebih indah.

3. Bold & Berani

kode warna html yang bold & berani
Source

Jika Anda ingin membuat website yang mencolok dan terlihat berani, kombinasi warna-warna yang terang dan tegas bisa menjadi pilihan terbaik.

Kombinasi dari warna-warna yang berani memang tidak bisa sembarangan digunakan. Anda hanya bisa melakukannya jika target audiens memang menyukai warna-warna tersebut.

Jika Anda tidak ingin memilih color scheme terbaik untuk website secara manual, Anda juga dapat menggunakan online HTML color code generator loh Golden friends!

Berikut adalah beberapa contoh dari generator warna website online:

Baca juga: PHP Framework Terbaik yang Patut Anda Gunakan

Penutup

Kode warna HTML adalah daftar baris kode yang digunakan untuk menentukan dan mengubah skema warna sebuah website. Mulai dari teks, background, dan lain sebagainya.

Meskipun HTML color coding termasuk skill HTML yang paling dasar, ada banyak hal yang bisa Anda lakukan melalui kode warna tersebut 一 terutama untuk urusan desain front-end website.

Nah pada artikel ini, kami telah membahas semua hal yang perlu Anda ketahui tentang kode warna HTML. Mulai dari pengertian, daftar lengkap, sampai cara penerapannya.

Jika Golden friends masih punya pertanyaan lebih lanjut tentang HTML color coding, silahkan tinggalkan pesan pada kolom bawah ya!

Sekedar mengingatkan, untuk membangun sebuah website yang baik tentunya Anda membutuhkan web server yang handal. 

Untungnya, GoldenFast Network punya solusinya! Mulai dari 135 ribuan per bulan saja, Anda bisa mendapatkan Cloud VPS dengan 98% uptime, 24/7 monitoring, dan customer service.

Bukan hanya itu, semua layanan GoldenFast Network juga dilengkapi dengan High Grade hardware kelas enterprise dan juga beberapa tier 1 network loh Golden friends!

Sangat menarik bukan? Yuk langsung saja bergabung dengan GFN! 

Amera P. Safira With a newfound love of the IT world, Amera likes to turn complex topics into easy-to-read and comprehensive articles. In her spare times, Amera enjoys playing video games and reading every book she can find.

Leave a Reply

Your email address will not be published.