PEWARNAAN WEBSITE DENGAN CSS

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

Berikut ini adalah daftar warna untuk kode 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 Warna
kode Hex
RGB
kode Desimal
RGB
Warna dasar Biru
   
Aqua
00 FF FF
0 255 255
Cyan
00 FF FF
0 255 255
LightCyan
E0 FF FF
224 255 255
PaleTurquoise
AF EE EE
175 238 238
Aquamarine
7F FF D4
127 255 212
40 E0 D0
64 224 208
MediumTurquoise
48 D1 CC
72 209 204
DarkTurquoise
00 CE D1
0 206 209
CadetBlue
5F 9E A0
95 158 160
SteelBlue
46 82 B4
70 130 180
LightSteelBlue
B0 C4 DE
176 196 222
PowderBlue
B0 E0 E6
176 224 230
LightBlue
AD D8 E6
173 216 230
SkyBlue
87 CE EB
135 206 235
LightSkyBlue
87 CE FA
135 206 250
DeepSkyBlue
00 BF FF
0 191 255
DodgerBlue
1E 90 FF
30 144 255
CornflowerBlue
64 95 ED
100 149 237
MediumSlateBlue
7B 68 EE
123 104 238
RoyalBlue
41 69 E1
65 105 225
Blue
00 00 FF
0 0 255
MediumBlue
00 00 CD
0 0 205
DarkBlue
00 00 8B
0 0 139
Navy
00 00 80
0 0 128
MidnightBlue
19 19 70
25 25 112
Warna dasar Coklat
   
Cornsilk
FF F8 DC
255 248 220
BlanchedAlmond
FF EB CD
255 235 205
Bisque
FF E4 C4
255 228 196
NavajoWhite
FF DE AD
255 222 173
Wheat
F5 DE B3
245 222 179
BurlyWood
DE B8 87
222 184 135
Tan
D2 B4 8C
210 180 140
RosyBrown
BC 8F 8F
188 143 143
SandyBrown
F4 A4 60
244 164 96
Goldenrod
DA A5 20
218 165 32
DarkGoldenrod
B8 86 0B
184 134 11
Peru
CD 85 3F
205 133 63
Chocolate
D2 69 1E
210 105 30
SaddleBrown
8B 45 13
139 69 19
Sienna
A0 52 2D
160 82 45
Brown
A5 2A 2A
165 42 42
Maroon
80 00 00
128 0 0
Warna dasar Putih
   
White
FF FF FF
255 255 255
Snow
FF FA FA
255 250 250
Honeydew
F0 FF F0
240 255 240
MintCream
F5 FF FA
245 255 250
Azure
F0 FF FF
240 255 255
AliceBlue
F0 F8 FF
240 248 255
GhostWhite
F8 F8 FF
248 248 255
WhiteSmoke
F5 F5 F5
245 245 245
Seashell
FF F5 EE
255 245 238
Beige
F5 F5 DC
245 245 220
OldLace
FD F5 E6
253 245 230
FloralWhite
FF FA F0
255 250 240
Ivory
FF FF F0
255 255 240
AntiqueWhite
FA EB D7
250 235 215
Linen
FA F0 E6
250 240 230
LavenderBlush
FF F0 F5
255 240 245
MistyRose
FF E4 E1
255 228 225
Warna dasar Abu-abu
   
Gainsboro
DC DC DC
220 220 220
LightGrey
D3 D3 D3
211 211 211
Silver
C0 C0 C0
192 192 192
DarkGray
A9 A9 A9
169 169 169
Gray
80 80 80
128 128 128
DimGray
69 69 69
105 105 105
LightSlateGray
77 88 99
119 136 153
SlateGray
70 80 90
112 128 144
DarkSlateGray
2F 4F 4F
47 79 79
Black
00 00 00
0 0 0
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>

Be the first to comment

Leave a Reply

Your email address will not be published.


*