CSS 색상 키워드

! 설명은 하단을 참고.

구분	색상 이름	색상	RGB	Hex
1	Aqua		rgb(0, 255, 255)	#00FFFF
2	Black		rgb(0, 0, 0)	#000000
3	Blue		rgb(0, 0, 255)	#0000FF
4	Fuchsia		rgb(255, 0, 255)	#FF00FF
5	Gray		rgb(128, 128, 128)	#808080
6	Green		rgb(0, 128, 0)	#008000
7	Lime		rgb(0, 255, 0)	#00FF00
8	Maroon		rgb(128, 0, 0)	#800000
9	Navy		rgb(0, 0, 128)	#000080
10	Olive		rgb(128, 128, 0)	#808000
11	Purple		rgb(128, 0, 128)	#800080
12	Red		rgb(255, 0, 0)	#FF0000
13	Silver		rgb(192, 192, 192)	#C0C0C0
14	Teal		rgb(0, 128, 128)	#008080
15	White		rgb(255, 255, 255)	#FFFFFF
16	Yellow		rgb(255, 255, 0)	#FFFF00
17	Orange		rgb(255, 165, 0)	#FFA500
18	Aliceblue		rgb(240, 248, 255)	#F0F8FF
19	Antiquewhite		rgb(250, 235, 215)	#FAEBD7
20	Aquamarine		rgb(127, 255, 212)	#7FFFD4
21	Azure		rgb(240, 255, 255)	#F0FFFF
22	Beige		rgb(245, 245, 220)	#F5F5DC
23	Bisque		rgb(255, 228, 196)	#FFE4C4
24	Blanchedalmond		rgb(255, 235, 205)	#FFEBCD
25	Blueviolet		rgb(138, 43, 226)	#8A2BE2
26	Brown		rgb(165, 42, 42)	#A52A2A
27	Burlywood		rgb(222, 184, 135)	#DEB887
28	Cadetblue		rgb( 95, 158, 160)	#5F9EA0
29	Chartreuse		rgb(127, 255, 0)	#7FFF00
30	Chocolate		rgb(210, 105, 30)	#D2691E
31	Coral		rgb(255, 127, 80)	#FF7F50
32	Cornflowerblue		rgb(100, 149, 237)	#6495ED
33	Cornsilk		rgb(255, 248, 220)	#FFF8DC
34	Crimson		rgb(220, 20, 60)	#DC143C
35	Cyan		rgb(0, 255, 255)	#00FFFF
36	Darkblue		rgb(0, 0, 139)	#00008B
37	Darkcyan		rgb(0, 139, 139)	#008B8B
38	Darkgoldenrod		rgb(184, 134, 11)	#B8860B
39	Darkgray		rgb(169, 169, 169)	#A9A9A9
40	Darkgreen		rgb(0, 100, 0)	#006400
41	Darkkhaki		rgb(189, 183, 107)	#BDB76B
42	Darkmagenta		rgb(139, 0, 139)	#8B008B
43	Darkolivegreen		rgb(85, 107, 47)	#556B2F
44	Darkorange		rgb(255, 140, 0)	#FF8C00
45	Darkorchid		rgb(153, 50, 204)	#9932CC
46	Darkred		rgb(139, 0, 0)	#8B0000
47	Darksalmon		rgb(233, 150, 122)	#E9967A
48	Darkseagreen		rgb(143, 188, 143)	#8FBC8F
49	Darkslateblue		rgb(72, 61, 139)	#483D8B
50	Darkslategray		rgb(47, 79, 79)	#2F4F4F
51	Darkturquoise		rgb(0, 206, 209)	#00CED1
52	Darkviolet		rgb(148, 0, 211)	#9400D3
53	Deeppink		rgb(255, 20, 147)	#FF1493
54	Deepskyblue		rgb(0, 191, 255)	#00BFFF
55	Dimgray		rgb(105, 105, 105)	#696969
56	Dodgerblue		rgb(30, 144, 255)	#1E90FF
57	Firebrick		rgb(178, 34, 34)	#B22222
58	Floralwhite		rgb(255, 250, 240)	#FFFAF0
59	Forestgreen		rgb(34, 139, 34)	#228B22
60	Gainsboro		rgb(220, 220, 220)	#DCDCDC
61	Ghostwhite		rgb(248, 248, 255)	#F8F8FF
62	Gold		rgb(255, 215, 0)	#FFD700
63	Goldenrod		rgb(218, 165, 32)	#DAA520
64	Greenyellow		rgb(173, 255, 47)	#ADFF2F
65	Honeydew		rgb(240, 255, 240)	#F0FFF0
66	Hotpink		rgb(255, 105, 180)	#FF69B4
67	Indianred		rgb(205, 92, 92)	#CD5C5C
68	Indigo		rgb(75, 0, 130)	#4B0082
69	Ivory		rgb(255, 255, 240)	#FFFFF0
70	Khaki		rgb(240, 230, 140)	#F0E68C
71	Lavender		rgb(230, 230, 250)	#E6E6FA
72	Lavenderblush		rgb(255, 240, 245)	#FFF0F5
73	Lawngreen		rgb(124, 252, 0)	#7CFC00
74	Lemonchiffon		rgb(255, 250, 205)	#FFFACD
75	Lightblue		rgb(173, 216, 230)	#ADD8E6
76	Lightcoral		rgb(240, 128, 128)	#F08080
77	Lightcyan		rgb(224, 255, 255)	#E0FFFF
78	Lightgoldenrodyellow		rgb(250, 250, 210)	#FAFAD2
79	Lightgray		rgb(211, 211, 211)	#D3D3D3
80	Lightgreen		rgb(144, 238, 144)	#90EE90
81	Lightpink		rgb(255, 182, 193)	#FFB6C1
82	Lightsalmon		rgb(255, 160, 122)	#FFA07A
83	Lightseagreen		rgb( 32, 178, 170)	#20B2AA
84	Lightskyblue		rgb(135, 206, 250)	#87CEFA
85	Lightslategray		rgb(119, 136, 153)	#778899
86	Lightsteelblue		rgb(176, 196, 222)	#B0C4DE
87	Lightyellow		rgb(255, 255, 224)	#FFFFE0
88	Limegreen		rgb(50, 205, 50)	#32CD32
89	Linen		rgb(250, 240, 230)	#FAF0E6
90	Magenta		rgb(255, 0, 255)	#FF00FF
91	Mediumaquamarine		rgb(102, 205, 170)	#66CDAA
92	Mediumblue		rgb(0, 0, 205)	#0000CD
93	Mediumorchid		rgb(186, 85, 211)	#BA55D3
94	Mediumpurple		rgb(147, 112, 219)	#9370DB
95	Mediumseagreen		rgb(60, 179, 113)	#3CB371
96	Mediumslateblue		rgb(123, 104, 238)	#7B68EE
97	Mediumspringgreen		rgb(0, 250, 154)	#00FA9A
98	Mediumturquoise		rgb(72, 209, 204)	#48D1CC
99	Mediumvioletred		rgb(199, 21, 133)	#C71585
100	Midnightblue		rgb(25, 25, 112)	#191970
101	Mintcream		rgb(245, 255, 250)	#F5FFFA
102	Mistyrose		rgb(255, 228, 225)	#FFE4E1
103	Moccasin		rgb(255, 228, 181)	#FFE4B5
104	Navajowhite		rgb(255, 222, 173)	#FFDEAD
105	Oldlace		rgb(253, 245, 230)	#FDF5E6
106	Olivedrab		rgb(107, 142, 35)	#6B8E23
107	Orangered		rgb(255, 69, 0)	#FF4500
108	Orchid		rgb(218, 112, 214)	#DA70D6
109	Palegoldenrod		rgb(238, 232, 170)	#EEE8AA
110	Palegreen		rgb(152, 251, 152)	#98FB98
111	Paleturquoise		rgb(175, 238, 238)	#AFEEEE
112	Palevioletred		rgb(219, 112, 147)	#DB7093
113	Papayawhip		rgb(255, 239, 213)	#FFEFD5
114	Peachpuff		rgb(255, 218, 185)	#FFDAB9
115	Peru		rgb(205, 133, 63)	#CD853F
116	Pink		rgb(255, 192, 203)	#FFC0CB
117	Plum		rgb(221, 160, 221)	#DDA0DD
118	Powderblue		rgb(176, 224, 230)	#B0E0E6
119	Rosybrown		rgb(188, 143, 143)	#BC8F8F
120	Royalblue		rgb(65, 105, 225)	#4169E1
121	Saddlebrown		rgb(139, 69, 19)	#8B4513
122	Salmon		rgb(250, 128, 114)	#FA8072
123	Sandybrown		rgb(244, 164, 96)	#F4A460
124	Seagreen		rgb(46, 139, 87)	#2E8B57
125	Seashell		rgb(255, 245, 238)	#FFF5EE
126	Sienna		rgb(160, 82, 45)	#A0522D
127	Skyblue		rgb(135, 206, 235)	#87CEEB
128	Slateblue		rgb(106, 90, 205)	#6A5ACD
129	Slategray		rgb(112, 128, 144)	#708090
130	Snow		rgb(255, 250, 250)	#FFFAFA
131	Springgreen		rgb(0, 255, 127)	#00FF7F
132	Steelblue		rgb(70, 130, 180)	#4682B4
133	Tan		rgb(210, 180, 140)	#D2B48C
134	Thistle		rgb(216, 191, 216)	#D8BFD8
135	Tomato		rgb(255, 99, 71)	#FF6347
136	Turquoise		rgb(64, 224, 208)	#40E0D0
137	Violet		rgb(238, 130, 238)	#EE82EE
138	Wheat		rgb(245, 222, 179)	#F5DEB3
139	Whitesmoke		rgb(245, 245, 245)	#F5F5F5
140	Yellowgreen		rgb(154, 205, 50)	#9ACD32

- CSS에서는 색상의 이름(키워드)으로도 색상을 설정할 수 있다.

예1 - hotpink

 {  
 width:100px;  
 height:100px;  
 background-color:hotpink;  
 border:1px solid black;  
 }  

- CSS 1 에서는 16가지 색상 키워드를 지원하였고(1번~16번), CSS 2 에서는 오렌지(orange) 키워드가 추가되었으며(17번), CSS 3 에서는 140가지 색상 키워드를 지원하고 있다. (source : w3schools)

- 이 색상 키워드들은 종종 '확장 색상 키워드(extended color keywords)', 또는 'X11 색상', 또는 'SVG 색상' 이라고도 불린다.

- 'Aqua'와 'Cyan', 그리고 'Magenta'와 'Fuchsia'는 각각 같은 색상이다.

- 'gray'라는 이름이 붙은 7가지 색상들은 'grey'라고도 표기할 수 있다.

darkgray / darkgrey
darkslategray / darkslategrey
dimgray / dimgrey
lightgray / lightgrey
lightslategray / lightslategrey
gray / grey
slategray / slategray

! 'e'로 표기한 grey 색상 키워드는 익스플로러 8 이후 버젼에서만 지원된다. 익스플로러 3 ~ 6 버젼에서는 'a'로 표기한 gray 색상 키워드만을 지원한다. (source : MDN)

- 'Cyan'이나 'Grey'처럼 겹치는 색상을 모두 합하면 147 색상, 겹치는 색상을 제외하면, 138 색상이다.

- transparent 키워드

transparent 키워드는 완전히 투명한 색상을 나타낸다. 기술적으로, 투명(transparent) 키워드는 검정색에 알파 채널을 0으로 한 것이며, rgba(0, 0, 0, 0)과 같다. (source: MDN)

예2 - transparent

 {  
 width:100px;  
 height:100px;  
 background-color:transparent;  
 border:1px solid black;  
 }  

! 관련 글.

CSS에서의 색상 설정