Kode Warna HTML dan CSS - Pilihan Terbaik
Kode Warna - Bagi para desainer atau website developer pasti sudah tidak asing dengan #ffffff dan #000000 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.
Hexadecimal 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
1. Pahami 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.
Sumber : Wikipedia Indonesia
| 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) |
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