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에서의 색상 설정

댓글 6개:

위드오버2013년 10월 7일 오후 10:11
안녕하세요, 블로그 잘 보고 있습니다. 하나 질문이 있는데요,
위 본문에서 css 코드를 넣는 상자는 어떻게 만드나요?
저는 C 코딩을 블로그에서 코드 처럼 넣고 싶은데, 이게 잘 안되어서 인용구문 처리로 보여주고 있습니다.
이것도 인용구로 만든건가요? 조언 부탁드리겠습니다.
답글삭제
답글
3gyeop2014년 12월 11일 오후 11:00
작성자가 댓글을 삭제했습니다.
답글삭제
답글
뒤늦은 세상구경2019년 8월 18일 오후 9:08
유용한 자료네요. 잘쓰겠습니다.
답글삭제
답글
MESIgoal2020년 3월 20일 오후 7:02
당신이 당신의 페이지에 트래픽을 증가하려는 경우,당신은 확실히 그들에게 연락해야한다. 검색엔진 최적화 서비스 그들은 확실히 모든 것을 할 것으로 해야한다,그들이 도와 내 친구들을 많이 후,자신의 작동,트래픽에서 나이가 증가
답글삭제
답글
Unknown2021년 3월 24일 오전 11:32
감사합니다^^~~
답글삭제
답글

댓글 추가

페이지

2013년 10월 3일 목요일

CSS 색상 키워드

댓글 6개: