CSS 색상 이름: 전체 참조 가이드
색상은 웹 디자인의 영혼입니다. 대부분의 개발자는 정확성을 위해 HEX 코드나 RGB 값을 사용하지만, CSS 색상 이름은 스타일을 빠르게 적용할 수 있는 사람이 읽기 쉬운 방법을 제공합니다. 현대 브라우저는 일반적인 Red(빨강) 및 Blue(파랑)부터 AliceBlue(앨리스 블루) 또는 PapayaWhip(파파야 휩)과 같은 독특한 이름에 이르기까지 140개 이상의 명명된 색상을 지원합니다.
이 가이드는 모든 CSS 명명된 색상에 대한 전체적이고 검색 가능한 참조를 색상별로 분류하여 제공하므로 프로젝트에 가장 적합한 색상을 찾는 데 도움이 됩니다.
1. 빠른 참조: 기본 16가지 색상
이들은 HTML 4.01 사양에서 정의된 원래 색상이며 모든 브라우저와 기기에서 지원됩니다.
| 색상 이름 | HEX | RGB | 샘플 |
|---|---|---|---|
| White (흰색) | #FFFFFF |
(255, 255, 255) |
|
| Silver (은색) | #C0C0C0 |
(192, 192, 192) |
|
| Gray (회색) | #808080 |
(128, 128, 128) |
|
| Black (검정) | #000000 |
(0, 0, 0) |
|
| Red (빨강) | #FF0000 |
(255, 0, 0) |
|
| Maroon (밤색) | #800000 |
(128, 0, 0) |
|
| Yellow (노랑) | #FFFF00 |
(255, 255, 0) |
|
| Olive (올리브색) | #808000 |
(128, 128, 0) |
|
| Lime (라임색) | #00FF00 |
(0, 255, 0) |
|
| Green (초록) | #008000 |
(0, 128, 0) |
|
| Aqua (물색) | #00FFFF |
(0, 255, 255) |
|
| Teal (청록색) | #008080 |
(0, 128, 128) |
|
| Blue (파랑) | #0000FF |
(0, 0, 255) |
|
| Navy (남색) | #000080 |
(0, 0, 128) |
|
| Fuchsia (자홍색) | #FF00FF |
(255, 0, 255) |
|
| Purple (보라) | #800080 |
(128, 0, 128) |
2. 140개 이상의 CSS 색상 전체 목록
다음은 현대 브라우저에서 지원하는 전체 확장 색상 세트(SVG 1.0/CSS3)입니다.
핑크 계열 (Pink Colors)
| 이름 | HEX | RGB | 카테고리 |
|---|---|---|---|
| Pink | #FFC0CB |
(255, 192, 203) |
핑크 |
| LightPink | #FFB6C1 |
(255, 182, 193) |
핑크 |
| HotPink | #FF69B4 |
(255, 105, 180) |
핑크 |
| DeepPink | #FF1493 |
(255, 20, 147) |
핑크 |
| PaleVioletRed | #DB7093 |
(219, 112, 147) |
핑크 |
| MediumVioletRed | #C71585 |
(199, 21, 133) |
핑크 |
레드 계열 (Red Colors)
| 이름 | HEX | RGB | 카테고리 |
|---|---|---|---|
| LightSalmon | #FFA07A |
(255, 160, 122) |
레드 |
| Salmon | #FA8072 |
(250, 128, 114) |
레드 |
| DarkSalmon | #E9967A |
(233, 150, 122) |
레드 |
| LightCoral | #F08080 |
(240, 128, 128) |
레드 |
| IndianRed | #CD5C5C |
(205, 92, 92) |
레드 |
| Crimson | #DC143C |
(220, 20, 60) |
레드 |
| FireBrick | #B22222 |
(178, 34, 34) |
레드 |
| DarkRed | #8B0000 |
(139, 0, 0) |
레드 |
| Red | #FF0000 |
(255, 0, 0) |
레드 |
오렌지 계열 (Orange Colors)
| 이름 | HEX | RGB | 카테고리 |
|---|---|---|---|
| Orange | #FFA500 |
(255, 165, 0) |
오렌지 |
| DarkOrange | #FF8C00 |
(255, 140, 0) |
오렌지 |
| Coral | #FF7F50 |
(255, 127, 80) |
오렌지 |
| Tomato | #FF6347 |
(255, 99, 71) |
오렌지 |
| OrangeRed | #FF4500 |
(255, 69, 0) |
오렌지 |
옐로 계열 (Yellow Colors)
| 이름 | HEX | RGB | 카테고리 |
|---|---|---|---|
| Yellow | #FFFF00 |
(255, 255, 0) |
옐로 |
| LightYellow | #FFFFE0 |
(255, 255, 224) |
옐로 |
| LemonChiffon | #FFFACD |
(255, 250, 205) |
옐로 |
| LightGoldenRodYellow | #FAFAD2 |
(250, 250, 210) |
옐로 |
| PapayaWhip | #FFEFD5 |
(255, 239, 213) |
옐로 |
| Moccasin | #FFE4B5 |
(255, 228, 181) |
옐로 |
| PeachPuff | #FFDAB9 |
(255, 218, 185) |
옐로 |
| PaleGoldenRod | #EEE8AA |
(238, 232, 170) |
옐로 |
| Khaki | #F0E68C |
(240, 230, 140) |
옐로 |
| DarkKhaki | #BDB76B |
(189, 183, 107) |
옐로 |
| Gold | #FFD700 |
(255, 215, 0) |
옐로 |
브라운 계열 (Brown Colors)
| 이름 | HEX | RGB | 카테고리 |
|---|---|---|---|
| Cornsilk | #FFF8DC |
(255, 248, 220) |
브라운 |
| BlanchedAlmond | #FFEBCD |
(255, 235, 205) |
브라운 |
| Bisque | #FFE4C4 |
(255, 228, 196) |
브라운 |
| NavajoWhite | #FFDEAD |
(255, 222, 173) |
브라운 |
| Wheat | #F5DEB3 |
(245, 222, 179) |
브라운 |
| BurlyWood | #DEB887 |
(222, 184, 135) |
브라운 |
| Tan | #D2B48C |
(210, 180, 140) |
브라운 |
| RosyBrown | #BC8F8F |
(188, 143, 143) |
브라운 |
| SandyBrown | #F4A460 |
(244, 164, 96) |
브라운 |
| GoldenRod | #DAA520 |
(218, 165, 32) |
브라운 |
| Peru | #CD853F |
(205, 133, 63) |
브라운 |
| Chocolate | #D2691E |
(210, 105, 30) |
브라운 |
| SaddleBrown | #8B4513 |
(139, 69, 19) |
브라운 |
| Sienna | #A0522D |
(160, 82, 45) |
브라운 |
| Brown | #A52A2A |
(165, 42, 42) |
브라운 |
| Maroon | #800000 |
(128, 0, 0) |
브라운 |
그린 계열 (Green Colors)
| 이름 | HEX | RGB | 카테고리 |
|---|---|---|---|
| DarkOliveGreen | #556B2F |
(85, 107, 47) |
그린 |
| Olive | #808000 |
(128, 128, 0) |
그린 |
| OliveDrab | #6B8E23 |
(107, 142, 35) |
그린 |
| YellowGreen | #9ACD32 |
(154, 205, 50) |
그린 |
| LimeGreen | #32CD32 |
(50, 205, 50) |
그린 |
| Lime | #00FF00 |
(0, 255, 0) |
그린 |
| LawnGreen | #7CFC00 |
(124, 252, 0) |
그린 |
| Chartreuse | #7FFF00 |
(127, 255, 0) |
그린 |
| GreenYellow | #ADFF2F |
(173, 255, 47) |
그린 |
| SpringGreen | #00FF7F |
(0, 255, 127) |
그린 |
| MediumSpringGreen | #00FA9A |
(0, 250, 154) |
그린 |
| LightGreen | #90EE90 |
(144, 238, 144) |
그린 |
| PaleGreen | #98FB98 |
(152, 251, 152) |
그린 |
| DarkSeaGreen | #8FBC8F |
(143, 188, 143) |
그린 |
| MediumSeaGreen | #3CB371 |
(60, 179, 113) |
그린 |
| SeaGreen | #2E8B57 |
(46, 139, 87) |
그린 |
| ForestGreen | #228B22 |
(34, 139, 34) |
그린 |
| Green | #008000 |
(0, 128, 0) |
그린 |
| DarkGreen | #006400 |
(0, 100, 0) |
그린 |
시안 및 청록 계열 (Cyan and Teal Colors)
| 이름 | HEX | RGB | 카테고리 |
|---|---|---|---|
| Aqua | #00FFFF |
(0, 255, 255) |
시안 |
| Cyan | #00FFFF |
(0, 255, 255) |
시안 |
| LightCyan | #E0FFFF |
(224, 255, 255) |
시안 |
| PaleTurquoise | #AFEEEE |
(175, 238, 238) |
시안 |
| Aquamarine | #7FFFD4 |
(127, 255, 212) |
시안 |
| Turquoise | #40E0D0 |
(64, 224, 208) |
시안 |
| MediumTurquoise | #48D1CC |
(72, 209, 204) |
시안 |
| DarkTurquoise | #00CED1 |
(0, 206, 209) |
시안 |
| LightSeaGreen | #20B2AA |
(32, 178, 170) |
시안 |
| CadetBlue | #5F9EA0 |
(95, 158, 160) |
시안 |
| DarkCyan | #008B8B |
(0, 139, 139) |
시안 |
| Teal | #008080 |
(0, 128, 128) |
시안 |
블루 계열 (Blue Colors)
| 이름 | HEX | RGB | 카테고리 |
|---|---|---|---|
| LightSteelBlue | #B0C4DE |
(176, 196, 222) |
블루 |
| PowderBlue | #B0E0E6 |
(176, 224, 230) |
블루 |
| LightBlue | #ADD8E6 |
(173, 216, 230) |
블루 |
| SkyBlue | #87CEEB |
(135, 206, 235) |
블루 |
| LightSkyBlue | #87CEFA |
(135, 206, 250) |
블루 |
| DeepSkyBlue | #00BFFF |
(0, 191, 255) |
블루 |
| DodgerBlue | #1E90FF |
(30, 144, 255) |
블루 |
| CornflowerBlue | #6495ED |
(100, 149, 237) |
블루 |
| MediumSlateBlue | #7B68EE |
(123, 104, 238) |
블루 |
| RoyalBlue | #4169E1 |
(65, 105, 225) |
블루 |
| Blue | #0000FF |
(0, 0, 255) |
블루 |
| MediumBlue | #0000CD |
(0, 0, 205) |
블루 |
| DarkBlue | #00008B |
(0, 0, 139) |
블루 |
| Navy | #000080 |
(0, 0, 128) |
블루 |
| MidnightBlue | #191970 |
(25, 25, 112) |
블루 |
퍼플 및 바이올렛 계열 (Purple and Violet Colors)
| 이름 | HEX | RGB | 카테고리 |
|---|---|---|---|
| Lavender | #E6E6FA |
(230, 230, 250) |
퍼플 |
| Thistle | #D8BFD8 |
(216, 191, 216) |
퍼플 |
| Plum | #DDA0DD |
(221, 160, 221) |
퍼플 |
| Violet | #EE82EE |
(238, 130, 238) |
퍼플 |
| Orchid | #DA70D6 |
(218, 112, 214) |
퍼플 |
| Fuchsia | #FF00FF |
(255, 0, 255) |
퍼플 |
| Magenta | #FF00FF |
(255, 0, 255) |
퍼플 |
| MediumOrchid | #BA55D3 |
(186, 85, 211) |
퍼플 |
| MediumPurple | #9370DB |
(147, 112, 219) |
퍼플 |
| BlueViolet | #8A2BE2 |
(138, 43, 226) |
퍼플 |
| DarkViolet | #9400D3 |
(148, 0, 211) |
퍼플 |
| DarkOrchid | #9932CC |
(153, 50, 204) |
퍼플 |
| DarkMagenta | #8B008B |
(139, 0, 139) |
퍼플 |
| Purple | #800080 |
(128, 0, 128) |
퍼플 |
| Indigo | #4B0082 |
(75, 0, 130) |
퍼플 |
| DarkSlateBlue | #483D8B |
(72, 61, 139) |
퍼플 |
| SlateBlue | #6A5ACD |
(106, 90, 205) |
퍼플 |
| RebeccaPurple | #663399 |
(102, 51, 153) |
퍼플 |
화이트 계열 (White and Off-White Colors)
| 이름 | HEX | RGB | 카테고리 |
|---|---|---|---|
| White | #FFFFFF |
(255, 255, 255) |
화이트 |
| Snow | #FFFAFA |
(255, 250, 250) |
화이트 |
| HoneyDew | #F0FFF0 |
(240, 255, 240) |
화이트 |
| MintCream | #F5FFFA |
(245, 255, 250) |
화이트 |
| Azure | #F0FFFF |
(240, 255, 255) |
화이트 |
| AliceBlue | #F0F8FF |
(240, 248, 255) |
화이트 |
| GhostWhite | #F8F8FF |
(248, 248, 255) |
화이트 |
| WhiteSmoke | #F5F5F5 |
(245, 245, 245) |
화이트 |
| SeaShell | #FFF5EE |
(255, 245, 238) |
화이트 |
| Beige | #F5F5DC |
(245, 245, 220) |
화이트 |
| OldLace | #FDF5E6 |
(253, 245, 230) |
화이트 |
| FloralWhite | #FFFAF0 |
(255, 250, 240) |
화이트 |
| Ivory | #FFFFF0 |
(255, 255, 240) |
화이트 |
| AntiqueWhite | #FAEBD7 |
(250, 235, 215) |
화이트 |
| Linen | #FAF0E6 |
(250, 240, 230) |
화이트 |
| MistyRose | #FFE4E1 |
(255, 228, 225) |
화이트 |
| LavenderBlush | #FFF0F5 |
(255, 240, 245) |
화이트 |
그레이 및 블랙 계열 (Gray and Black Colors)
| 이름 | HEX | RGB | 카테고리 |
|---|---|---|---|
| Gainsboro | #DCDCDC |
(220, 220, 220) |
그레이 |
| LightGray | #D3D3D3 |
(211, 211, 211) |
그레이 |
| LightGrey | #D3D3D3 |
(211, 211, 211) |
그레이 |
| Silver | #C0C0C0 |
(192, 192, 192) |
그레이 |
| DarkGray | #A9A9A9 |
(169, 169, 169) |
그레이 |
| DarkGrey | #A9A9A9 |
(169, 169, 169) |
그레이 |
| Gray | #808080 |
(128, 128, 128) |
그레이 |
| Grey | `#808080" | (128, 128, 128) |
그레이 |
| DimGray | #696969 |
(105, 105, 105) |
그레이 |
| DimGrey | `#696969" | (105, 105, 105) |
그레이 |
| LightSlateGray | #778899 |
(119, 136, 153) |
그레이 |
| LightSlateGrey | `#778899" | (119, 136, 153) |
그레이 |
| SlateGray | #708090 |
(112, 128, 144) |
그레이 |
| SlateGrey | `#708090" | (112, 128, 144) |
그레이 |
| DarkSlateGray | #2F4F4F |
(47, 79, 79) |
그레이 |
| DarkSlateGrey | `#2F4F4F" | (47, 79, 79) |
그레이 |
| Black | #000000 |
(0, 0, 0) |
그레이 |
3. CSS 색상 이름 사용 방법
코드에서 이 이름들을 사용하는 것은 매우 간단합니다. <color> 값을 허용하는 모든 속성에 적용할 수 있습니다.
표준 CSS 속성
/* 텍스트 색상에 이름 사용 */
h1 {
color: Crimson;
}
/* 배경색에 이름 사용 */
.alert {
background-color: PapayaWhip;
border: 1px solid OrangeRed;
}
SVG 속성
CSS 색상 이름은 SVG 속성에서도 완벽하게 작동합니다.
<circle cx="50" cy="50" r="40" fill="RoyalBlue" stroke="MidnightBlue" stroke-width="2" />
'currentColor' 키워드
currentColor는 요소의 color 속성 값을 상속받는 특수 값입니다.
div {
color: SeaGreen;
border: 2px solid currentColor; /* 테두리도 SeaGreen이 됩니다 */
}
4. 자주 묻는 질문 (FAQ)
Q: CSS 색상 이름은 대소문자를 구분하나요?
A: 아니요. AliceBlue, aliceblue 또는 ALICEBLUE로 작성해도 모두 동일한 색상으로 처리됩니다. 그러나 가독성을 위해 많은 개발자가 CamelCase(예: AliceBlue)를 선호합니다.
Q: 어떤 색상 이름이 "웹 안전"인가요?
A: "웹 안전 색상"은 모니터가 256색만 지원하던 과거의 유물입니다. 오늘날 모든 140개 이상의 CSS 명명된 색상은 모든 현대 기기에서 안전하게 사용할 수 있습니다.
Q: HEX 코드 대신 색상 이름을 사용하는 이유는 무엇인가요?
A: 색상 이름은 기억하기 훨씬 쉽고 코드를 더 읽기 쉽게 만듭니다. background-color: White는 즉시 이해할 수 있는 반면, #FFFFFF는 약간의 정신적 변환이 필요합니다. 그러나 정확한 브랜드 색상의 경우 HEX, RGB 또는 HSL이 여전히 최선의 선택입니다.
Q: 중복된 이름이 있나요?
A: 예. Aqua와 Cyan은 정확히 동일(#00FFFF)하며, Fuchsia와 Magenta도 동일(#FF00FF)합니다. 또한 많은 회색 계열 색상은 "Gray"와 "Grey" 두 가지 스펠링을 모두 가지고 있습니다(예: DarkGray 및 DarkGrey).
Q: 대비 문제는 어떻게 처리하나요?
A: 명명된 색상을 사용할 때는 항상 텍스트와 배경 사이에 충분한 대비가 있는지 확인하십시오. 예를 들어, 흰색 배경에 노란색(Yellow) 텍스트는 거의 읽을 수 없으며 접근성 표준(WCAG)을 통과하지 못합니다.
Tool3M 관련 도구
- 색상 변환기: 이 명명된 색상들을 HEX, RGB, HSL 또는 CMYK 형식으로 즉시 변환하세요.
- 이미지 Base64 변환: CSS/HTML에서 사용하기 위해 이미지를 Base64 문자열로 변환하세요.