Ingin Tahu Kode Warna HTML & CSS Lengkap? Yuk Cek Di Sini!
Pada pemrograman, pewarnaan biasanya dilakukan dengan menggunakan kode warna HTML. Bagi Anda yang sudah terbiasa dengan desain komputer pasti tidak asing dengan beberapa kode seperti #92a8d1 dan #ff0000 .
Kedua kode tersebut merupakan kode warna Heksadesimal , yaitu tipe kode warna yang diawali dengan tanda “#”. Selain Heksadesimal, tipe kode warna lain yang umum digunakan adalah RGB .
Nah, karena RGB adalah salah satu tipe kode warna yang paling populer, mari kita awali artikel ini dengan membahas kode warna RGB terlebih dahulu!
Apa itu Kode Warna RGB?
RGB adalah kode warna yang terdiri dari tiga bagian angka. Bagian ketiga ini terpisah oleh tanda koma, contohnya seperti “rgb(251, 235, 217)”. Setiap digit kodenya warna merah (merah), hijau (hijau), biru (biru) atau #RRGGBB.
Mungkin Anda bertanya-tanya, mengapa harus merah, hijau, dan biru?
Karena, ketiganya merupakan warna primer yang umum digunakan di web dan layar komputer. Selain itu, kombinasi dari ketiga warna ini juga mampu membuat hingga lebih dari 16 juta warna!
Nah, untuk melihat contoh aplikasi warna RGB, mari kita lihat daftar kode warna HTML lengkap yang dapat Anda gunakan sebagai panduan di bawah ini.
Daftar Kode Warna CSS & HTML Lengkap
Warna merupakan hal penting dan unik dalam dunia desain visual. Warna tidak memiliki bentuk, ukuran maupun simbol untuk menyampaikan pesan secara langsung. Sehingga Anda perlu mengetahui warna apa saja yang cocok digunakan di dalam website.
Baca Juga : Cara Membuat Website dengan HTML dan CSS
Di bawah tabel kode warna CSS,HTML, warna RGB yang dapat Anda gunakan untuk memperindah situs web. Tidak hanya memperindah, banyak faktor lain yang dipengaruhi oleh warna. Lebih jelasnya Anda dapat membaca ulasan kami mengenai Menentukan Warna Efektif untuk Desain Website Anda . Tentang bagaimana warna itu sangat penting.
| Nama Warna | HEX | Warna RGB | |
|---|---|---|---|
. | Alice Biru | #F0F8FF | rgb(240, 248, 254) |
. | putih antik | #FAEBD7 | rgb(251, 235, 217) |
. | air | #00FFFF | rgb(0, 255, 254) |
. | Aquamarine | #7FFFD4 | rgb(115, 255, 216) |
. | Biru langit | #F0FFFF | rgb(239, 255, 255) |
. | Krem | #F5F5DC | rgb(245, 245, 223) |
. | Bisque | #FFE4C4 | rgb(255, 227, 200) |
. | Hitam | #000000 | rgb(0, 0, 0) |
. | Almond pucat | #FFEBCD | rgb(255, 234, 208) |
. | Biru | #0000FF | rgb(0, 0, 255) |
. | biru ungu | #8A2BE2 | rgb(138, 43, 226) |
. | cokelat | #A52A2A | rgb(165, 42, 42) |
. | Kayu Kekar | #DEB887 | rgb(222, 184, 135) |
. | Kadet Biru | #5F9EA0 | rgb (95, 158, 160) |
. | Minuman keras manis | #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) |
Anda dapat melihat perbedaan mengenai hexadecimal dan RGB.
| Color | HTML / CSS Color Name | Hex Code #RRGGBB | Decimal Code (R,G,B) |
|---|---|---|---|
| lightsalmon | #FFA07A | rgb(255,160,122) | |
| salmon | #FA8072 | rgb(250,128,114) | |
| darksalmon | #E9967A | rgb(233,150,122) | |
| lightcoral | #F08080 | rgb(240,128,128) | |
| indianred | #CD5C5C | rgb(205,92,92) | |
| crimson | #DC143C | rgb(220,20,60) | |
| firebrick | #B22222 | rgb(178,34,34) | |
| red | #FF0000 | rgb(255,0,0) | |
| darkred | #8B0000 | rgb(139,0,0) |
Selain menggunakan kode warna, Anda juga dapat menggunakan generator untuk menentukan kode warna apa saja yang bisa digunakan. Anda dapat menggunakan generator warna yang disediakan oleh beberapa website di bawah ini.
- W3School HTML Color Picker
Situs ini dapat Anda gunakan untuk memilih warna berdasarkan warna dasar. Anda dapat memilih tingkat saturasi dan melihat langsung (preview) hasilnya. Selain itu, terdapat juga pilihan untuk memasukkan warna berdasarkan kode dan juga memunculkan jendela HTML 5 untuk pemilihan warna. Kode warna CSS, HTML, dan RGBnya pun dan dengan mudah Anda ketahui via situs ini. - Colors & Skillshare
Colors merupakan situs yang digunakan sebagai alat schema generator. Jika Anda seorang desainer, situs ini dapat memberikan saran schema yang sesuai dengan kebutuhan dan juga tersedia kode hexadecimal yang bisa digunakan ke dalam website. - HTML Color Code
HTML Color Code merupakan situs web sederhana yang menyediakan tampilan pemilihan warna. Anda tinggal mengarahkan kursor ke dalam tabel warna atau menggeser slider untuk mendapatkan warna yang sesuai dengan kode warna dalam bentuk hexadecimal.
Download 20 Template Website HTML Gratis Di Sini!
Cara Menggunakan Kode Warna HTML & CSS
Penggunaan kode warna HTML, CSS, dan warna RGB dapat 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> 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 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
Catatan: border-color tidak dapat bekerja jika digunakan sendiri. Gunakan properti border-style terlebih dahulu untuk mengatur border.
7+ Inspirasi Website Kombinasi Warna
Apakah Anda ingin mencoba berbagai kombinasi warna tanpa ribet? Tak perlu khawatir, berikut adalah daftar website kombinasi warna yang bisa Anda coba.
1. Canva
![](data:image/svg+xml;charset=utf-8,<svg height="475px" width="930px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Canva adalah tools desain grafis online dengan segudang fitur. Nah, salah satunya adalah color wheel yang memungkinkan Anda mencoba-coba berbagai kombinasi warna.
Hal yang pantas diacungi jempol adalah Canva juga menjelaskan tentang teori warna di samping color wheel tersebut. Sehingga Anda juga bisa belajar sambil bereksperimen di saat yang sama.
2. Adobe Color CC
![](data:image/svg+xml;charset=utf-8,<svg height="446px" width="938px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Brand raksasa di dunia desain grafis ini juga punya color wheel gratis yang bisa Anda gunakan untuk kombinasi warna, lho.
Berbeda dari Canva, Adobe Color CC ini lebih kompleks dengan banyak opsi pengaturan. Jadi, website ini sangat cocok bagi Anda yang ingin bereksperimen kombinasi warna lebih dalam.
3. Paletton
![](data:image/svg+xml;charset=utf-8,<svg height="479px" width="744px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Situs kombinasi warna selanjutnya adalah Paletton. Bisa dikatakan, fitur Paletton ini berada di tengah-tengah antara Canva dan Adobe Color CC; sederhana tapi dengan cukup banyak fitur.
Selain itu, ada panduan lengkap cara menggunakan Paletton tepat di bawah color wheel. Jadi, jika kebingungan, Anda bisa langsung membaca panduan tersebut.
4. Coolors
![](data:image/svg+xml;charset=utf-8,<svg height="474px" width="940px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Coolors cukup berbeda dengan situs kombinasi warna sebelum-sebelumnya. Sebab, Anda harus memilih terlebih dahulu warna yang ditampilkan acak berdasarkan koleksi Coolors.
Namun, Anda tak perlu khawatir. Setelah memilih warna tersebut Anda tetap bisa bebas mengubah-ubah warna dan bereksperimen sesuka hati Anda, kok.
5. Mudcube Colour Sphere
![](data:image/svg+xml;charset=utf-8,<svg height="456px" width="754px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Mudcube Colour Sphere adalah website kombinasi warna yang sederhana dan sangat mudah digunakan. Anda tinggal menggeser slide yang disediakan atau memindah-mindahkan panah untuk mendapatkan kombinasi warna.
6. CheckMyColours
![](data:image/svg+xml;charset=utf-8,<svg height="445px" width="679px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Seperti namanya, CheckMyColours akan mengecek kombinasi warna suatu website apakah sudah memiliki kontras warna yang baik. Jadi, selain Anda bisa tahu apa saja kombinasi warna yang digunakan, Anda juga tau apakah kombinasi warna tersebut memang cocok untuk diterapkan.
7. Spy Color
![](data:image/svg+xml;charset=utf-8,<svg height="417px" width="866px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Spy Color adalah website kombinasi warna yang memungkinan Anda mencari informasi lengkap tentang warna. Mulai dari nama, hex code, angka RGB, angka CMYK, dan masih banyak lainnya. Menarik juga, ya?
8. Color Explorer
![](data:image/svg+xml;charset=utf-8,<svg height="426px" width="687px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Website kombinasi warna terakhir adalah Color Explorer. Di sini, Anda tak hanya bisa melakukan eksperimen dengan warna saja, tapi juga pada gambar, halaman website, layout dan masih banyak lainnya.
Kesimpulan
Penting untuk mengetahui daftar kode warna lengkap di HTML, CSS dan kode warna RGB.
Penggunaan kode warna HTML, CSS, dan RGB 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 lengkap di atas setidaknya dapat sedikit membantu Anda untuk memahami bagaimana cara mewarnai website dan menerapkannya supaya pengunjung lebih betah dan tertarik untuk mengunjunginya lagi.
Di bawah ini ada beberapa artikel terkait dengan pengembangan website yang dapat Anda kunjungi untuk mendapatkan informasi lain:
- Belajar HTML untuk Pemula
- 15 Cara Desain Blog Agar Tampil Keren dan Menarik
- Hierarki Visual dalam Desain Website
- Website Makin Gesit Pakai LiteSpeed
Anda juga dapat subscribe untuk mendapatkan informasi terbaru dari kami.
Subscribe Sekarang
Dapatkan beragam artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan bersama kami!
RECENT POSTS
Proxy Server: Pengertian, Fungsi, Manfaat, dan Jenis-Jenisnya
Ingin tahu apa itu proxy server? Anda sudah menemukan artikel yang tepat. Kali ini kami akan membahas apa yang dimaksud…
Ingin Website dengan Akses Tercepat? Pilih Niagahoster! Ini Buktinya..
Apa persamaan pemilik website dan pembalap? Keduanya sama-sama menganggap penting hitungan detik. Jika pembalap memanfaatkan selisih detik untuk memenangkan pertandingan,…
Apa Itu Struktur Data dan Kegunaannya dalam Pemrograman?
Struktur data menjadi salah satu bagian penting yang wajib dipahami oleh para programmer. Struktur ini memudahkan pengguna mengakses data yang…
Jasa SEO: Benarkah 7 Layanan Jasa SEO Ini Anda Butuhkan?
Ingin menggunakan jasa SEO? Sebaiknya ketahui dulu layanan apa saja yang ditawarkan, kelebihan, kekurangan, dan mengapa lebih baik Anda belajar…
Bootstrap 5 : Pengertian, Fitur, Keunggulan dan Cara Menggunakannya
Penggunaan Bootstrap untuk mengembangkan aplikasi web membuat proses koding lebih mudah dan cepat. Sayangnya, versi terdahulu Bootstrap masih membuat load…
10 Front End Framework Terbaik untuk Developer [Update 2021]
Ada banyak cara membangun tampilan depan website melalui coding. Salah satu yang paling mudah yaitu dengan menggunakan front end framework.…
Komentar
Posting Komentar
This Message