Computer, Linux, Program, Source Code, Tutorial, Website

Rabu, 17 Juni 2020

HEllo

Welcome back to Sastrika Karya...
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...


~Semoga Bermanfaat~

0 komentar:

Posting Komentar

 
Top