Pada artikel kali ini saya akan melanjutkan membahasa tentang styleing dalam design website. Salah satu attribute yang terpenting dalam membuat suatu design adalah pewarnaan. Kode warna atau color code pada CSS (Cascading Style Sheets).
Apa Pengertian Kode Warna (Colors Code)?
Colors Code atau dalam bahasa Indonesia dapat diartikan kode warna adalah salah satu bahasa pada style sheet atau CSS yang digunakan untuk mendefinisikan warna. Pada umumnya kode warna ditulis sebagai value atau nilai yang ditulis setelah property untuk menjelaskan warna yang dimiliki oleh suatu selector atau element HTML.
Cara Menulis Kode Warna
Terdapat beberapa cara yang dapat digunakan untuk mendeklarasikan code warna pada CSS, Berikut ini beberapa penulisan kode warna yang sering saya temui dan saya gunakan dalam men-design website :
1. Menggunakan Nama Warna
Hal yang paling mendasar dalam menulis code warna adalah anda dapat menggunakan warna pada CSS dengan mendeklarasikan nama warna yang akan anda gunakan. Misalkan : red, blue, black, white, dll.
Contoh penulisan code warna dengan menggunakan nama warna :
<span style="color: red;"></span>
2. Kode Warna RGB dan RGBA
RGB adalah metode penulisan kode warna berdasarkan nilai Red, Greed, dan Blue pada masing-masing bagian.
rgb(merah, hijau, biru)
Contoh penulisan code warna RGB :
color: rgb(255, 0, 0);
Selain itu code warna dapat juga ditulis dengan RGBA yang merupakan perpanjangan dari nilai warna RGB yang dilengkapi dengan nilai opacity dari warna yang digunakan.
rgba(merah, hijau, biru, alfa)
Alfa adalah angka yang digunakan untuk mendefinisikan nilai opacity (effect transparant) dengan nilai 0(transparan) - 1(warna asli).
Contoh penulisan code warna RGBA:
color: rgba(255, 0, 0, 0.2);
3. Kode Warna Heksadesimal
Dalam penulisan kode warna dituliskan dengan menggunakan heksadesimal yang terbagi menjadi 3 bagian yang masing-masing merepresentasikan warna merah (red), hijau (green), dan biru (blue).
Misalkan kode warna :
color: #FF0000;
Code warna #FF000 tersebut terdiri pada dasarnya adalah RGB yang masing-masing nilainya :
red : 255
green : 0
blue : 0
Macam-Macam Kode Warna
Berikut ini beberapa contoh color code atau kode warna yang dan 3 jenis penulisan yaitu (Nama warna, Heksadesimal, dan RGB) pada CSS:
---| Contoh Warna | Nama | HEX | RGB |
|---|---|---|---|
| Alice Blue | aliceblue | #F0F8FF | rgb(240, 248, 254) |
| Antique White | antiquewhite | #FAEBD7 | rgb(251, 235, 217) |
| Aqua | aqua | #00FFFF | rgb(0, 255, 254) |
| Aquamarine | aquamarine | #7FFFD4 | rgb(115, 255, 216) |
| Azure | azure | #F0FFFF | rgb(239, 255, 255) |
| Beige | beige | #F5F5DC | rgb(245, 245, 223) |
| Bisque | bisque | #FFE4C4 | rgb(255, 227, 200) |
| Black | black | #000000 | rgb(0, 0, 0) |
| Blanched Almond | blanchedalmond | #FFEBCD | rgb(255, 234, 208) |
| Blue | blue | #0000FF | rgb(0, 0, 255) |
| Blue Violet | blueviolet | #8A2BE2 | rgb(138, 43, 226) |
| Brown | brown | #A52A2A | rgb(165, 42, 42) |
| Burly Wood | burlywood | #DEB887 | rgb(222, 184, 135) |
| Cadet Blue | cadetblue | #5F9EA0 | rgb(95, 158, 160) |
| Chartreuse | chartreuse | #7FFF00 | rgb(127, 255, 1) |
| Chocolate | chocolate | #D2691E | rgb(210, 105, 30) |
| Coral | coral | #FF7F50 | rgb(251, 127, 80) |
| Cornflower Blue | cornflowerblue | #6495ED | rgb(100, 149, 237) |
| Cornsilk | cornsilk | #FFF8DC | rgb(225, 248, 220) |
| Crimson | crimson | #DC143C | rgb(220, 20, 60) |
| Cyan | cyan | #00FFFF | rgb(62, 254, 255) |
| Dark Blue | darkblue | #00008B | rgb(0, 0, 139) |
| Dark Cyan | darkcyan | #008B8B | rgb(29, 139, 139) |
| Dark Golden Rod | darkgoldenrod | #B8860B | rgb(184, 134, 11) |
| Dark Gray | darkgray | #A9A9A9 | rgb(169, 169, 169) |
| Dark Green | darkgreen | #006400 | rgb(19, 100, 0) |
| Dark Khaki | darkkhaki | #BDB76B | rgb(189, 183, 107) |
| Dark Magenta | darkmagenta | #8B008B | rgb(139, 0, 140) |
| Dark Olive Green | darkolivegreen | #556B2F | rgb(85, 107, 47) |
| Dark Orange | darkorange | #FF8C00 | rgb(251, 140, 1) |
| Dark Orchid | darkorchid | #9932CC | rgb(153, 50, 204) |
| Dark Red | darkred | #8B0000 | rgb(139, 5, 0) |
| Dark Salmon | darksalmon | #E9967A | rgb(233, 150, 122) |
| Dark Sea Green | darkseagreen | #8FBC8F | rgb(143, 188, 144) |
| Dark Slate Blue | darkslateblue | #483D8B | rgb(72, 61, 139) |
| Dark Slate Gray | darkslategray | #2F4F4F | rgb(47, 79, 79) |
| Dark Turquoise | darkturquoise | #00CED1 | rgb(48, 206, 209) |
| Dark Violet | darkviolet | #9400D3 | rgb(148, 0, 211) |
| Deep Pink | deeppink | #FF1493 | rgb(249, 19, 147) |
| Deep Sky Blue | deepskyblue | #00BFFF | rgb(43, 191, 254) |
| Dim Gray | dimgray | #696969 | rgb(105, 105, 105) |
| Dodger Blue | dodgerblue | #1E90FF | rgb(30, 144, 255) |
| Fire Brick | firebrick | #B22222 | rgb(178, 34, 33) |
| Floral White | floralwhite | #FFFAF0 | rgb(255, 250, 240) |
| Forest Green | forestgreen | #228B22 | rgb(34, 139, 35) |
| Fuchsia | fuchsia | #FF00FF | rgb(249, 0, 255) |
| Gainsboro | gainsboro | #DCDCDC | rgb(220, 220, 220) |
| Ghost White | ghostwhite | #F8F8FF | rgb(248, 248, 255) |
| Gold | gold | #FFD700 | rgb(253, 215, 3) |
| Golden Rod | goldenrod | #DAA520 | rgb(218, 165, 32) |
| Gray | gray | #808080 | rgb(128, 128, 128) |
| Green | green | #008000 | rgb(27, 128, 1) |
| Green Yellow | greenyellow | #ADFF2F | rgb(173, 255, 48) |
| Honey Dew | honeydew | #F0FFF0 | rgb(240, 255, 240) |
| Hot Pink | hotpink | #FF69B4 | rgb(240, 255, 240) |
| Indian Red | indianred | #CD5C5C | rgb(205, 92, 92) |
| Indigo | indigo | #4B0082 | rgb(75, 0, 130) |
| Ivory | ivory | #FFFFF0 | rgb(255, 255, 239) |
| Khaki | khaki | #F0E68C | rgb(240, 230, 140) |
| Lavender | lavender | #E6E6FA | rgb(230, 230, 250) |
| Lavender Blush | lavenderblush | #FFF0F5 | rgb(254, 240, 245) |
| Lawn Green | lawngreen | #7CFC00 | rgb(124, 252, 2) |
| Lemon Chiffon | lemonchiffon | #FFFACD | rgb(255, 250, 205) |
| Light Blue | lightblue | #ADD8E6 | rgb(173, 216, 230) |
| Light Coral | lightcoral | #F08080 | rgb(240, 128, 128) |
| Light Cyan | lightcyan | #E0FFFF | rgb(224, 255, 255) |
| Light Golden Rod Yellow | lightgoldenrodyellow | #FAFAD2 | rgb(250, 250, 210) |
| Light Gray | lightgray | #D3D3D3 | rgb(211, 211, 211) |
| Light Green | lightgreen | #90EE90 | rgb(144, 238, 144) |
| Light Pink | lightpink | #FFB6C1 | rgb(252, 182, 193) |
| Light Salmon | lightsalmon | #FFA07A | rgb(251, 160, 122) |
| Light Sea Green | lightseagreen | #20B2AA | rgb(40, 178, 170) |
| Light Sky Blue | lightskyblue | #87CEFA | rgb(135, 206, 250) |
| Light Slate Gray | lightslategray | #778899 | rgb(119, 136, 153) |
| Light Steel Blue | lightsteelblue | #B0C4DE | rgb(176, 196, 222) |
| Light Yellow | lightyellow | #FFFFE0 | rgb(255, 255, 224) |
| Lime | lime | #00FF00 | rgb(63, 255, 0) |
| Lime Green | limegreen | #32CD32 | rgb(50, 205, 50) |
| Linen | linen | #FAF0E6 | rgb(250, 240, 230) |
| Magenta | magenta | #FF00FF | rgb(249, 0, 255) |
| Maroon | maroon | #800000 | rgb(128, 4, 0) |
| Medium Aqua Marine | mediumaquamarine | #66CDAA | rgb(102, 205, 170) |
| Medium Blue | mediumblue | #0000CD | rgb(0, 0, 205) |
| Medium Orchid | mediumorchid | #BA55D3 | rgb(186, 85, 211) |
| Medium Purple | mediumpurple | #9370DB | rgb(147, 112, 219) |
| Medium Sea Green | mediumseagreen | #3CB371 | rgb(60, 179, 113) |
| Medium Slate Blue | mediumslateblue | #7B68EE | rgb(123, 103, 238) |
| Medium Spring Green | mediumspringgreen | #00FA9A | rgb(62, 250, 153) |
| Medium Turquoise | mediumturquoise | #48D1CC | rgb(72, 209, 204) |
| Medium Violet Red | mediumvioletred | #C71585 | rgb(199, 21, 133) |
| Midnight Blue | midnightblue | #191970 | rgb(25, 25, 112) |
| Mint Cream | mintcream | #F5FFFA | rgb(245, 255, 250) |
| Misty Rose | mistyrose | #FFE4E1 | rgb(254, 228, 225) |
| Moccasin | moccasin | #FFE4B5 | rgb(254, 228, 181) |
| Navajo White | navajowhite | #FFDEAD | rgb(254, 222, 173) |
| Navy | navy | #000080 | rgb(0, 0, 128) |
| Old Lace | oldlace | #FDF5E6 | rgb(253, 245, 230) |
| Olive | olive | #808000 | rgb(128, 128, 1) |
| Olive Drab | olivedrab | #6B8E23 | rgb(107, 142, 35) |
| Orange | orange | #FFA500 | rgb(252, 165, 3) |
| Orange Red | orangered | #FF4500 | rgb(250, 69, 1) |
| Orchid | orchid | #DA70D6 | rgb(218, 112, 214) |
| Pale Golden Rod | palegoldenrod | #EEE8AA | rgb(238, 232, 170) |
| Pale Green | palegreen | #98FB98 | rgb(152, 251, 153) |
| Pale Turquoise | paleturquoise | #AFEEEE | rgb(175, 238, 239) |
| Pale Violet Red | palevioletred | #DB7093 | rgb(219, 112, 147) |
| Papaya Whip | papayawhip | #FFEFD5 | rgb(254, 239, 213) |
| Peach Puff | peachpuff | #FFDAB9 | rgb(253, 218, 185) |
| Peru | peru | #CD853F | rgb(205, 133, 63) |
| Pink | pink | #FFC0CB | rgb(252, 192, 203) |
| Plum | plum | #DDA0DD | rgb(221, 160, 221) |
| Powder Blue | powderblue | #B0E0E6 | rgb(176, 224, 230) |
| Purple | purple | #800080 | rgb(128, 0, 128) |
| Rebecca Purple | rebeccapurple | #663399 | rgb(102, 51, 153) |
| Red | red | #FF0000 | rgb(255, 0, 0) |
| Rosy Brown | rosybrown | #BC8F8F | rgb(188, 143, 142) |
| Royal Blue | royalblue | #4169E1 | rgb(65, 105, 225) |
| Saddle Brown | saddlebrown | #8B4513 | rgb(139, 69, 19) |
| Salmon | salmon | #FA8072 | rgb(250, 128, 114) |
| Sandy Brown | sandybrown | #F4A460 | rgb(244, 164, 95) |
| Sea Green | seagreen | #2E8B57 | rgb(46, 139, 87) |
| Sea Shell | seashell | #FFF5EE | rgb(255, 245, 238) |
| Sienna | sienna | #A0522D | rgb(160, 82, 45) |
| Silver | silver | #C0C0C0 | rgb(192, 192, 192) |
| Sky Blue | skyblue | #87CEEB | rgb(135, 206, 235) |
| Slate Blue | slateblue | #6A5ACD | rgb(106, 90, 205) |
| Slate Gray | slategray | #708090 | rgb(112, 128, 145) |
| Snow | snow | #FFFAFA | rgb(255, 250, 250) |
| Spring Green | springgreen | #00FF7F | rgb(63, 255, 128) |
| Steel Blue | steelblue | #4682B4 | rgb(70, 130, 180) |
| Tan | tan | #D2B48C | rgb(210, 180, 140) |
| Teal | teal | #008080 | rgb(26, 128, 127) |
| Thistle | thistle | #D8BFD8 | rgb(216, 191, 216) |
| Tomato | tomato | #FF6347 | rgb(250, 99, 71) |
| Turquoise | turquoise | #40E0D0 | rgb(64, 224, 208) |
| Violet | violet | #EE82EE | rgb(238, 130, 238) |
| Wheat | wheat | #F5DEB3 | rgb(245, 222, 179) |
| White | white | #FFFFFF | rgb(255, 255, 255) |
| White Smoke | whitesmoke | #F5F5F5 | rgb(245, 245, 245) |
| Yellow | yellow | #FFFF00 | rgb(255, 255, 0) |
| Yellow Green | yellowgreen | #9ACD32 | rgb(154, 205, 49) |
Penerapan Color Code / Kode Warna pada Property CSS
Dalam CSS tidak semua property dapat digunakan untuk mendeklarasikan warna. Berikut ini beberapa contoh bahasa style sheet yang dapat diimplementasikan kode warna :
| Name Property | Keterangan | Contoh |
|---|---|---|
| color | Untuk mendefinisikan warna pada suatu element HTML kususnya warna huruf / character dan warna border atau garis tepi (jika tebal border pada suatu element telah didefinisikan). | color:#222222; |
| font-color | font-color adalah propery CSS yang digunakan untuk mendefinisikan warna dari pada text / character pada suatu element. | font-color: #c2f2f2; |
| background | Sesuai dengan namanya background artinya latar belakang yaitu digunakan untuk memberikan latar belakang dari suatu element dengan gambar atau warna, jika anda akan mendefinisikan warna latar belakang dari suatu element anda hanya perlu mendefinisikan nilai dari property background dengan code warna yang akan anda gunakan. Untuk mendefinisikan warna background anda juga dapat menggunakan property background-color. |
background :#fcfcfc; |
| border | Pada property border selain dapat anda gunakan untuk mendefinisikan ketebalan dari border dapat juga anda sertakan dari warna border yang anda gunakan. | border: solid 1px #ccc; |
| text-shadow | text-shadow adalah property yang digunakan untuk mendefinisikan bayangan dari suatu character atau text pada suatu element. | text-shadow:1px 2px 1px #222; |
| box-shadow | box-shadow adalah property yang digunakan untuk mendefinisikan bayangan dari suatu element. | box-shadow:1px 2px 1px #222; |
NOTE :
Selain cara menuliskan kode warna yang telah saya jelaskan diatas terdapat beberapa beberapa cara lain yang dapat digunakan untuk menulis kode warna yaitu : HSL dan HSLA.
RESOURCE :
https://www.w3schools.com/css/css3_colors.asp
Sekian artikel yang membahas tentang kode warna (color code) pada CSS dari saya.
Terima Kasih telah berkunjung ke blog kami...
Mohon Maaf, bila dalam arkirl kali ini banyak kekurangannya...
Terima Kasih telah berkunjung ke blog kami...
Mohon Maaf, bila dalam arkirl kali ini banyak kekurangannya...
~Semoga Bermanfaat~
0 komentar:
Posting Komentar