Daftar Kode Warna HTML dan CSS Lengkap
5 minute read
Kode Warna Lengkap - Bagi Para desainer atau website developer pati sudah tidak asing dengan #fff875 dan #92a821 itu adalah kode hexadecimal warna karena pewarnaan memakai kode. Dalam pemograman dan desain yang dilakukan dengan komputer ada beberapa tipe kode warna yang bisa kalian coba dan gunakan yaknni hexadecimal, RGB, RGBA, HSL, dan HSLA.
HExa desimal sendiri tersusun dari perpaduan kombinasi angka dan huruf yang diawali dengan tanda '#' Beda halnya dengan RGB yang terdiri dari 3 bagian angka yang dipisahkan oleh tanda koma. Kode warna pada HTML memakai HTML triplets. Setiap dua digit kode mewakili dari warna-warna red (merah), green (hijau), blue (biru) atau #RRGGBB.
Sedangkan untuk penerapan warna berbasis kode html bisa sobat simak di paragraf selanjutnya tantang macam-macam warna kode warna html dan css. Namun alangkah baiknya sebelum lanjut mari kita simak terlebih dahulu cara memilih warna agar sesuai.
Cara Memilih Warna
![]() |
Photo by russn_fckr on Unsplash |
1. Pamami Dedikit tentang Warna dasar
Alangkah bijaknya jika sobat mengerti tentang sedikit dasar warna, Berikut menurut Brewster, Untuk untuk menyederhanakan warna yang ada di alam, warna dibagi menjadi 4 kelompok, yaitu warna primer, sekunder, tersier, dan warna netral.
2. Pastikan Warna Teks Kontras dengan Background
Setelah memahami warna dasar, Anda akan lebih mudah menciptakan banyak perpaduan warna berbeda. Yang perlu Anda lakukan selanjutnya adalah menggabungkan warna dasar dengan warna netral seperti hitam maupun putih, sehingga Anda akan mendapatkan variasi kedalaman warna yaitu membuatnya lebih terang ataupun lebih gelap. Pastikan juga warna background kontras dengan teks afar tidak susah dan mata sakit saat membaca,
3. Pilih Warna Sesuai dengan Warna Brand Perusahaan
Setiap perusahaan pasti memiliki fokus warnnya masing-masing bisa juga sebagai warna ciri khasnya, jika kebanyakan perusahaan makanan pasti memakai warna dasar merah dan kuning untuk warna brand mereka, sedangkan untuk warna biru didominasi oleh perusahaan biro wisata dan agen tiket.
4.Jangan Terlalu Banyak Memasukkan Warna
Jika bisa jangan terlalu banyak kombinasi warna, karena audience akan mencoba mengingat warna ciri khas dari perusahaan anda, jika terlalu banyak dipakai untuk perpaduan warna pasti mata pun akan sakit dan cepat lelah untuk berlama-lama memandanginya
5.Warna Netral Relatif Lebih Aman
Jika akan hendak memakai warna kombinasi namun masih binggung pakai saja warna netral . Jenis warna netral yang kerap digunakan yakni abuabu, perak, emas, hitam, putih, cokelat, atau krem. Untuk memberikan kesan ekslusif Anda tinggal mengarahkan desainer dalam pemilihan tone hangat atau dingin sehingga lebih pas dengan perusahaan.
Daftar Kode Warna HTML dan CSS Lengkap
Warna sendiri adalah elemen penting, dan sekaligus unik dalam dunia desain visual, warna tidak mempunyai bentuk, ukuran dan simbol khusus untuk menyampaikan pesan secara langsung. sehingga sobat perlu untuk mengerti apa saja yang cocok untuk web ataupun karya desain mu.
Dan dibawah ini ada sebuah tabel warna html dan css untuk memperindah desain di website mu atau karya visual mu yang lain.
Nama Warna | HEX | 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) |
Beberapa Tren Warna di tahun 2021
3. warna gradien
Jika sobat masing mengalami kebinggungan untuk memilih kombinasai warna yang pas untuk keperluan desain website atau karya anda yang lain bisa memakai web warna generator, Dengan software generator semua warna sudah disediakan dan direkomdasikan.
Penutup
Pemaahaman tentang warna dan mengetahui perkembangan tren warna memang sudah menjadi sebuah keharusan bagi desainer dan programer sob, agar pengunjung betah berlama-lama di melihat dan berkunjung ke karyamu.
Daftar kode warna pada HTML dan CSS di atas setidaknya dapat sedikit membantu Anda untuk memahami bagaimana cara mewarnai website dan menerapkannya supaya pengunjung lebih betah dan tertarik untuk mengunjunginya lagi.
Posting Komentar