KODE WARNA CSS LENGKAP
Kumpulan Kode Warna CSS LENGKAP
berdasarkan kode HEX dan kode RGB beserta tutorial cara penggunaannya pada CSS.
KODE WARNA CSS
Berikut kode CSS Lengkap berdasarkan
berdasarkan kode hexadecimal dan kode RGB. Referensi kode warna dibawah
berdasarkan sumber dari w3schools yang
aku tambahkan dengan kode RGB.
|
|
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)
|
Contoh Cara Penggunaan
Berikut cara penggunaan kode warna CSS
yang benar pada sebuah kode CSS.
Kode CSS:
.warna-teks {
color: #FF6347;
/* TOMATO */
}
Atau bisa penulisan warna dalam
bentuk rgb seperti berikut:
Kode CSS:
.warna-teks {
color: rgb(250, 99, 71); /* TOMATO */
}
Kode HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kode Warna CSS</title>
</head>
<body>
<p class="warna-teks">Warna Teks Berubah</p>
</body>
</html>
Kode warna tersebut juga dapat digunakan
pada kode HTML seperti berikut:
Kode HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kode Warna CSS</title>
</head>
<body>
<p><font color="#FF6347">Warna Teks Berubah</font></p>
</body>
</html>
Hasilnya akan seperti berikut:
Warna Teks Berubah
Atau bisa juga menggunakan inline style seperti berikut:
Kode HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kode Warna CSS</title>
</head>
<body>
<p><font style="color:#FF6347">Warna Teks Berubah</font></p>
</body>
</html>
Semoga bermanfaat dan jangan lupa share
yah! :D
Tidak ada komentar:
Posting Komentar