Sebuah halaman website dengan HTML maupun CSS memiliki kapasitas untuk mengatur warna seperti teks dan latar belakang (background). CSS menggunakan format tertentu untuk mendefinisikan warna,
A. Format Kode Warna
Beberapa format kode warna diantaranya:
- Nama Warna, Warna dapat dipanggil langsung dengan namanya dalam bahasa inggris.
Contoh: red, green, blue, black, orange, yellow, purple dll - RGB, Warna dapat ditulis dengan menggunakan format rgb(red, green, blue) antara 0 – 255
Contoh: rgb(0, 0, 255) = menampilkan warna biru, rgb(0, 50%, 0)= rgb (0, 128, 0) - Hexadesimal, Format penulisan warne hexadesimal adalah #RRGGBB, dimana RR (red), GG (green) dan BB (blue) dengan rentang 0 – FF, atau lebih sederhana 0-F
Contoh: #00FF00 atau #0F0 akan menampilkan warna green, atau setara dengan rgb(0, 255, 0) - RGBA (red, green, blue, alpha), nilai alpha antara 0.0-1.0 nilai alpha semakin rendah warnanya semakin transparan
Contoh: baground:rgba(255, 200, 1, 0.5) - HSL (Hue, saturation, lightness),
hue merupakan nilai derajat lingkaran warna, nilainya 0-360 (360: merah, 120: hijau, 240: biru),
saturation nilai antara 0% – 100%, semakin kecil semakin mendekati abu-abu
lightness nilai antara 0% – 100%, semakin kecil mendekati hitam, semakin besar mendekati putih
Contoh: Background(290, 60%, 70%) - HSLA (Hue, saturation, lightness, Alpha), dapat digunakan untuk baground transparan
Contoh: Background(290, 60%, 70%, 0.4) - CMYK (Cyan, Magenta, Yellow, Key (Hitam)), warna dicampurkan berdasarkan persentase dari keempat warna tersebut.
Contoh: cmyk(100%, 80%, 0%, 20%). - HSV (Hue, Saturation, Value), warna dikontrol secara intuitif berdasarkan rona, saturasi, dan nilainya.
Contoh: warna kuning cerah bisa direpresentasikan menggunakan kode hsv(60°, 100%, 100%).
B. Kode Warna HTML dan CSS
Nama Warna
|
kode Hex
RGB |
kode Desimal
RGB |
Warna dasar Merah
|
||
Merah Indian
|
CD 5C 5C
|
205 92 92
|
Koral terang
|
F0 80 80
|
240 128 128
|
Salmon
|
FA 80 72
|
250 128 114
|
Salmon gelap
|
E9 96 7A
|
233 150 122
|
Salmon terang
|
FF A0 7A
|
255 160 122
|
Krimson
|
DC 14 3C
|
220 20 60
|
Merah
|
FF 00 00
|
255 0 0
|
Batu bata
|
B2 22 22
|
178 34 34
|
Merah tua
|
8B 00 00
|
139 0 0
|
Warna dasar Merah Jambu
|
||
Merah muda
|
FF C0 CB
|
255 192 203
|
Merah muda terang
|
FF B6 C1
|
255 182 193
|
Merah muda panas
|
FF 69 B4
|
255 105 180
|
Merah muda dalam
|
FF 14 93
|
255 20 147
|
MediumVioletRed
|
C7 15 85
|
199 21 133
|
PaleVioletRed
|
DB 70 93
|
219 112 147
|
Warna dasar Oranye
|
||
Salmon terang
|
FF A0 7A
|
255 160 122
|
Koral
|
FF 7F 50
|
255 127 80
|
Tomat
|
FF 63 47
|
255 99 71
|
Merah oranye
|
FF 45 00
|
255 69 0
|
Oranye tua
|
FF 8C 00
|
255 140 0
|
Oranye
|
FF A5 00
|
255 165 0
|
Warna dasar Kuning
|
||
Emas
|
FF D7 00
|
255 215 0
|
Kuning
|
FF FF 00
|
255 255 0
|
Kuning terang
|
FF FF E0
|
255 255 224
|
LemonChiffon
|
FF FA CD
|
255 250 205
|
LightGoldenrodYellow
|
FA FA D2
|
250 250 210
|
PapayaWhip
|
FF EF D5
|
255 239 213
|
Moccasin
|
FF E4 B5
|
255 228 181
|
PeachPuff
|
FF DA B9
|
255 218 185
|
PaleGoldenrod
|
EE E8 AA
|
238 232 170
|
Khaki
|
F0 E6 8C
|
240 230 140
|
DarkKhaki
|
BD B7 6B
|
189 183 107
|
Warna dasar Ungu
|
||
Lavender
|
E6 E6 FA
|
230 230 250
|
Thistle
|
D8 BF D8
|
216 191 216
|
Plum
|
DD A0 DD
|
221 160 221
|
Violet
|
EE 82 EE
|
238 130 238
|
Orchid
|
DA 70 D6
|
218 112 214
|
Fuchsia
|
FF 00 FF
|
255 0 255
|
Magenta
|
FF 00 FF
|
255 0 255
|
MediumOrchid
|
BA 55 D3
|
186 85 211
|
MediumPurple
|
93 70 DB
|
147 112 219
|
BlueViolet
|
8A 2B E2
|
138 43 226
|
DarkViolet
|
94 00 D3
|
148 0 211
|
DarkOrchid
|
99 32 CC
|
153 50 204
|
DarkMagenta
|
8B 00 8B
|
139 0 139
|
Purple
|
80 00 80
|
128 0 128
|
Indigo
|
4B 00 82
|
75 0 130
|
SlateBlue
|
6A 5A CD
|
106 90 205
|
DarkSlateBlue
|
48 3D 8B
|
72 61 139
|
Warna dasar Hijau
|
||
GreenYellow
|
AD FF 2F
|
173 255 47
|
Chartreuse
|
7F FF 00
|
127 255 0
|
LawnGreen
|
7C FC 00
|
124 252 0
|
Lime
|
00 FF 00
|
0 255 0
|
LimeGreen
|
32 CD 32
|
50 205 50
|
PaleGreen
|
98 FB 98
|
152 251 152
|
LightGreen
|
90 EE 90
|
144 238 144
|
MediumSpringGreen
|
00 FA 9A
|
0 250 154
|
SpringGreen
|
00 FF 7F
|
0 255 127
|
MediumSeaGreen
|
3C B3 71
|
60 179 113
|
SeaGreen
|
2E 8B 57
|
46 139 87
|
ForestGreen
|
22 8B 22
|
34 139 34
|
Green
|
00 80 00
|
0 128 0
|
DarkGreen
|
00 64 00
|
0 100 0
|
YellowGreen
|
9A CD 32
|
154 205 50
|
OliveDrab
|
6B 8E 23
|
107 142 35
|
Olive
|
80 80 00
|
128 128 0
|
DarkOliveGreen
|
55 6B 2F
|
85 107 47
|
MediumAquamarine
|
66 CD AA
|
102 205 170
|
DarkSeaGreen
|
8F BC 8F
|
143 188 143
|
LightSeaGreen
|
20 B2 AA
|
32 178 170
|
DarkCyan
|
00 8B 8B
|
0 139 139
|
Teal
|
00 80 80
|
0 128 128
|
|
Nama
|
Contoh
|
Kode warna
|
RGB
|
CMYK
|
HSV
|
||
Abu-abu
|
#808080
|
128
|
128
|
128
|
58, 50, 47, 0
|
0, 0, 50
|
|
Biru
|
#0000FF
|
0
|
0
|
255
|
95, 73, 0, 0
|
240, 100, 100
|
|
Biru laut
|
#000080
|
0
|
0
|
128
|
100, 99, 56, 46
|
240, 100, 50
|
|
Coklat
|
#964B00
|
150
|
75
|
0
|
59, 82, 100, 43
|
30, 100, 59
|
|
Emas
|
#FFD700
|
255
|
215
|
0
|
0, 17, 94, 0
|
51, 100, 100
|
|
Hijau
|
#00FF00
|
0
|
255
|
0
|
62, 0, 100, 0
|
120, 100, 100
|
|
Hitam
|
#000000
|
0
|
0
|
0
|
93, 88, 89, 90
|
0, 0, 0
|
|
Kuning
|
#FFFF00
|
255
|
255
|
0
|
0, 0, 255, 0
|
60, 100, 100
|
|
Magenta
|
#FF00FF
|
255
|
0
|
255
|
0, 100, 0, 0
|
300, 100, 100
|
|
Mawar
|
#FF007F
|
255
|
0
|
127
|
0, 100, 50, 0
|
330, 100, 100
|
|
Merah
|
#FF0000
|
255
|
0
|
0
|
0, 255, 255, 0
|
0, 100, 100
|
|
Merah marun
|
#800000
|
128
|
0
|
0
|
0, 255, 255, 127
|
0, 100, 50
|
|
Merah jambu
|
#FFC0CB
|
255
|
192
|
203
|
0, 63, 52, 0
|
350, 25, 100
|
|
Nila
|
#6F00FF
|
111
|
0
|
255
|
57, 100, 0, 0
|
266, 100, 100
|
|
Oranye
|
#FF7F00
|
255
|
127
|
0
|
0, 50, 100, 0
|
30, 100, 100
|
|
Perak
|
#C0C0C0
|
192
|
192
|
192
|
0, 0, 0, 63
|
0, 0, 75
|
|
Putih
|
#FFFFFF
|
255
|
255
|
255
|
0, 0, 0, 0
|
0, 0, 100
|
|
Sian
|
#00FFFF
|
0
|
255
|
255
|
100, 0, 0, 0
|
180,100,100
|
|
Ungu
|
#BF00FF
|
191
|
0
|
255
|
25, 100, 0, 0
|
285, 100, 100
|
|
Violet
|
#8F00FF
|
143
|
0
|
255
|
44, 255, 0, 0
|
274, 100, 100
|
|
Zaitun
|
#808000
|
128
|
128
|
0
|
0, 0, 100, 50
|
60, 100, 50
|
C. Cara Menggunakan Kode Warna CSS
Berikut akan diberikan beberapa contoh penggunaan kode warna HEX dan RGB untuk pewarnaan website, jika menginginkan menggunakan kode lainnya bisa dicoba
- Mengganti Warna Teks
Ini menggunakan kode Hex: #FF0000
Ini menggunakan kode RGB: rgb(218, 165, 32)
Ini menggunakan kode RGB: rgb(40%, 50%, 100%)
<p style="color: #FF0000; margin-bottom: 10px;">Ini menggunakan kode Hex: #FF0000</p>
<p style="color: rgb(218, 165, 32); margin-bottom: 10px;">Ini menggunakan kode RGB: rgb(218, 165, 32)</p>
<p style="color: rgb(40%, 50%, 100%); margin-bottom: 10px;">Ini menggunakan kode RGB: rgb(40%, 50%, 100%)</p>
- Memberi warna border
Contoh Warna Border Tabel 1 |
Contoh Warna Border Tabel 2 |
Contoh Warna Border Tabel 3 |
<table style="border: 2px solid #FF0000; margin-bottom: 10px;">
<tr>
<td>Contoh Warna Border Tabel 1</td>
</tr>
</table>
<table style="border: 2px solid #00FF00; margin-bottom: 10px;">
<tr>
<td>Contoh Warna Border Tabel 2</td>
</tr>
</table>
<table style="border: 2px solid #0000FF; margin-bottom: 10px;">
<tr>
<td>Contoh Warna Border Tabel 3</td>
</tr>
</table>
- Warna Background Teks
Contoh teks ini diberi warna latar belakang menggunakan kode warna Hex: #F08080 (Light Coral)
Contoh teks ini diberi warna latar belakang menggunakan kode warna Hex: #98FB98 (Pale Green)
Contoh teks ini diberi warna latar belakang menggunakan kode warna Hex: #87CEFA (Light Sky Blue)
<p style="background-color: #F08080; color: #000000; margin-bottom: 10px;">Contoh teks ini diberi warna latar belakang menggunakan kode warna Hex: #F08080 (Light Coral)</p>
<p style="background-color: #98FB98; color: #000000; margin-bottom: 10px;">Contoh teks ini diberi warna latar belakang menggunakan kode warna Hex: #98FB98 (Pale Green)</p>
<p style="background-color: #87CEFA; color: #000000; margin-bottom: 10px;">Contoh teks ini diberi warna latar belakang menggunakan kode warna Hex: #87CEFA (Light Sky Blue)</p>
- Warna Tombol HTML
<button style="background-color: #FF0000; color: #ffffff; padding: 10px 20px; border: none; margin-bottom: 10px;">Contoh Tombol Warna Hex 1</button>
<button style="background-color: #00FF00; color: #000000; padding: 10px 20px; border: none; margin-bottom: 10px;">Contoh Tombol Warna Hex 2</button>
<button style="background-color: #0000FF; color: #ffffff; padding: 10px 20px; border: none; margin-bottom: 10px;">Contoh Tombol Warna Hex 3</button>
Leave a Reply