구분 | 색상 이름 | 색상 | 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에서의 색상 설정
안녕하세요, 블로그 잘 보고 있습니다. 하나 질문이 있는데요,
답글삭제위 본문에서 css 코드를 넣는 상자는 어떻게 만드나요?
저는 C 코딩을 블로그에서 코드 처럼 넣고 싶은데, 이게 잘 안되어서 인용구문 처리로 보여주고 있습니다.
이것도 인용구로 만든건가요? 조언 부탁드리겠습니다.
안녕하세요. 댓글 남겨주셔서 감사합니다.
삭제위의 코드 상자는 코드 포맷해주는 사이트를 이용해서 만든 것입니다.
해당 사이트 및 이용 방법에 대해서 작성해둔 글이 있으니 한번 참고해보세요.
http://ielselog.blogspot.kr/2013/08/source-code-format.html
그냥 pre 코드를 입맛에 맞게 꾸며주는 사이트입니다.
작성자가 댓글을 삭제했습니다.
답글삭제유용한 자료네요. 잘쓰겠습니다.
답글삭제당신이 당신의 페이지에 트래픽을 증가하려는 경우,당신은 확실히 그들에게 연락해야한다. 검색엔진 최적화 서비스 그들은 확실히 모든 것을 할 것으로 해야한다,그들이 도와 내 친구들을 많이 후,자신의 작동,트래픽에서 나이가 증가
답글삭제감사합니다^^~~
답글삭제