<color>
=======

CSS **`<color>`** 자료형은 색을 나타냅니다. `<color>`는 이 색이 배경과 어떻게 합성되어야 하는지 나타내는 알파 채널 투명도 값도 가질 수 있습니다.

`<color>`는 다음 방법으로 정의할 수 있습니다.

* 키워드 사용 (`blue`, `transparent` 등)
* RGB 3차원 좌표계 사용 (# + 16진수 표기법 또는 `rgb()`, `rgba()`의 함수형 표기법)
* HSL 실린더형 좌표계 사용 (`hsl()`, `hsla()`의 함수형 표기법)

**참고:** 이 글은 `<color>` 자료형에 대해 상세히 기술합니다. HTML에서 실제로 색을 쓰는 법이 더 알고 싶으시면 CSS로 HTML 요소에 색 입히기 (en-US)를 참고하세요.

구문
--

`<color>` 자료형은 아래 나열된 선택지 중 하나를 사용해 지정합니다.

**참고:** `<color>` 값은 정확하게 정의할 수 있지만 실제로 화면에 표시될 때는 기기별로 차이가 있을 수도 있습니다. 대부분의 화면 색이 제대로 조정되지 않았으며 일부 브라우저는 기기의 색상 프로필을 지원하지 않기 때문입니다.

### 색상 키워드

색상 키워드는 대소문자를 구분하지 않는 식별자로, `red`, `blue`, `black`, `lightseagreen`처럼 특정 색을 나타냅니다. 이름이 표현하는 색을 그럭저럭 가리키고 있긴 하지만 모든 키워드의 본질은 인위적이며 어떤 특정한 규칙을 따르거나 하지 않습니다.

색상 키워드를 사용할 땐 몇 가지 고려할 점이 있습니다.

* HTML은 CSS1에서 찾을 수 있는 16가지 기본 색상만 인식합니다. 알 수 없는 값은 특정 알고리즘을 사용해 변환하는데 그 결과는 대개 완전히 다른 색입니다. 나머지 색상 키워드는 CSS와 SVG에서만 사용해야 합니다.
* HTML과 달리 CSS는 알 수 없는 키워드를 완전히 무시합니다.
* 모든 색상 키워드는 투명도 없는 단일 색상을 표현합니다.
* 어떤 키워드는 다른 키워드의 다른 이름입니다.
    + `aqua` / `cyan`
    + `fuchsia` / `magenta`
    + `darkgray` / `darkgrey`
    + `darkslategray` / `darkslategrey`
    + `dimgray` / `dimgrey`
    + `lightgray` / `lightgrey`
    + `lightslategray` / `lightslategrey`
    + `gray` / `grey`
    + `slategray` / `slategrey`
* 많은 키워드를 X11에서 가져오긴 했지만, 제조사들이 X11 색상을 특정 하드웨어에 맞춰 조절한 경우도 있었기에 RGB값은 차이가 존재할 수 있습니다.

**참고:** CSS의 진화와 함께 색상 키워드도 많은 변화를 겪었습니다.

* CSS Level 1은 16개의 기본 색상만 지니고 있었습니다. VGA 그래픽 카드가 표현할 수 있는 색에서 가져온 것이기에 VGA 색상이라고 칭했습니다.
* CSS Level 2에서는 `orange` 키워드를 추가했습니다.
* 초기 브라우저들은 명세에 없음에도 불구하고 주로 X11 색상표에서 가져온 다양한 색상을 지원했습니다. 그러나 SVG 1.0과 CSS Colors Level 3 이전까지 그 목록이 정식으로 정해진 적은 없었습니다. 추가한 색상 키워드는 확장 색상 키워드, X11 색상, 또는 SVG 색상이라고 부릅니다.
* CSS Colors Level 4에선 웹 개척자 에릭 메이어를 기리기 위해 `rebeccapurple` 키워드를 추가했습니다.


| 명세 | 키워드 | RGB 16진수값 | 미리보기 |
| --- | --- | --- | --- |
| CSS1 | `black` | `#000000` |  |
| `silver` | `#c0c0c0` |  |
| `gray` | `#808080` |  |
| `white` | `#ffffff` |  |
| `maroon` | `#800000` |  |
| `red` | `#ff0000` |  |
| `purple` | `#800080` |  |
| `fuchsia` | `#ff00ff` |  |
| `green` | `#008000` |  |
| `lime` | `#00ff00` |  |
| `olive` | `#808000` |  |
| `yellow` | `#ffff00` |  |
| `navy` | `#000080` |  |
| `blue` | `#0000ff` |  |
| `teal` | `#008080` |  |
| `aqua` | `#00ffff` |  |
| CSS2.1 | `orange` | `#ffa500` |  |
| CSS3 Colors | `aliceblue` | `#f0f8ff` |  |
| `antiquewhite` | `#faebd7` |  |
| `aquamarine` | `#7fffd4` |  |
| `azure` | `#f0ffff` |  |
| `beige` | `#f5f5dc` |  |
| `bisque` | `#ffe4c4` |  |
| `blanchedalmond` | `#ffebcd` |  |
| `blueviolet` | `#8a2be2` |  |
| `brown` | `#a52a2a` |  |
| `burlywood` | `#deb887` |  |
| `cadetblue` | `#5f9ea0` |  |
| `chartreuse` | `#7fff00` |  |
| `chocolate` | `#d2691e` |  |
| `coral` | `#ff7f50` |  |
| `cornflowerblue` | `#6495ed` |  |
| `cornsilk` | `#fff8dc` |  |
| `crimson` | `#dc143c` |  |
| `cyan`(`aqua`의 다른 이름) | `#00ffff` |  |
| `darkblue` | `#00008b` |  |
| `darkcyan` | `#008b8b` |  |
| `darkgoldenrod` | `#b8860b` |  |
| `darkgray` | `#a9a9a9` |  |
| `darkgreen` | `#006400` |  |
| `darkgrey` | `#a9a9a9` |  |
| `darkkhaki` | `#bdb76b` |  |
| `darkmagenta` | `#8b008b` |  |
| `darkolivegreen` | `#556b2f` |  |
| `darkorange` | `#ff8c00` |  |
| `darkorchid` | `#9932cc` |  |
| `darkred` | `#8b0000` |  |
| `darksalmon` | `#e9967a` |  |
| `darkseagreen` | `#8fbc8f` |  |
| `darkslateblue` | `#483d8b` |  |
| `darkslategray` | `#2f4f4f` |  |
| `darkslategrey` | `#2f4f4f` |  |
| `darkturquoise` | `#00ced1` |  |
| `darkviolet` | `#9400d3` |  |
| `deeppink` | `#ff1493` |  |
| `deepskyblue` | `#00bfff` |  |
| `dimgray` | `#696969` |  |
| `dimgrey` | `#696969` |  |
| `dodgerblue` | `#1e90ff` |  |
| `firebrick` | `#b22222` |  |
| `floralwhite` | `#fffaf0` |  |
| `forestgreen` | `#228b22` |  |
| `gainsboro` | `#dcdcdc` |  |
| `ghostwhite` | `#f8f8ff` |  |
| `gold` | `#ffd700` |  |
| `goldenrod` | `#daa520` |  |
| `greenyellow` | `#adff2f` |  |
| `grey` | `#808080` |  |
| `honeydew` | `#f0fff0` |  |
| `hotpink` | `#ff69b4` |  |
| `indianred` | `#cd5c5c` |  |
| `indigo` | `#4b0082` |  |
| `ivory` | `#fffff0` |  |
| `khaki` | `#f0e68c` |  |
| `lavender` | `#e6e6fa` |  |
| `lavenderblush` | `#fff0f5` |  |
| `lawngreen` | `#7cfc00` |  |
| `lemonchiffon` | `#fffacd` |  |
| `lightblue` | `#add8e6` |  |
| `lightcoral` | `#f08080` |  |
| `lightcyan` | `#e0ffff` |  |
| `lightgoldenrodyellow` | `#fafad2` |  |
| `lightgray` | `#d3d3d3` |  |
| `lightgreen` | `#90ee90` |  |
| `lightgrey` | `#d3d3d3` |  |
| `lightpink` | `#ffb6c1` |  |
| `lightsalmon` | `#ffa07a` |  |
| `lightseagreen` | `#20b2aa` |  |
| `lightskyblue` | `#87cefa` |  |
| `lightslategray` | `#778899` |  |
| `lightslategrey` | `#778899` |  |
| `lightsteelblue` | `#b0c4de` |  |
| `lightyellow` | `#ffffe0` |  |
| `limegreen` | `#32cd32` |  |
| `linen` | `#faf0e6` |  |
| `magenta`(`fuchsia`의 다른 이름) | `#ff00ff` |  |
| `mediumaquamarine` | `#66cdaa` |  |
| `mediumblue` | `#0000cd` |  |
| `mediumorchid` | `#ba55d3` |  |
| `mediumpurple` | `#9370db` |  |
| `mediumseagreen` | `#3cb371` |  |
| `mediumslateblue` | `#7b68ee` |  |
| `mediumspringgreen` | `#00fa9a` |  |
| `mediumturquoise` | `#48d1cc` |  |
| `mediumvioletred` | `#c71585` |  |
| `midnightblue` | `#191970` |  |
| `mintcream` | `#f5fffa` |  |
| `mistyrose` | `#ffe4e1` |  |
| `moccasin` | `#ffe4b5` |  |
| `navajowhite` | `#ffdead` |  |
| `oldlace` | `#fdf5e6` |  |
| `olivedrab` | `#6b8e23` |  |
| `orangered` | `#ff4500` |  |
| `orchid` | `#da70d6` |  |
| `palegoldenrod` | `#eee8aa` |  |
| `palegreen` | `#98fb98` |  |
| `paleturquoise` | `#afeeee` |  |
| `palevioletred` | `#db7093` |  |
| `papayawhip` | `#ffefd5` |  |
| `peachpuff` | `#ffdab9` |  |
| `peru` | `#cd853f` |  |
| `pink` | `#ffc0cb` |  |
| `plum` | `#dda0dd` |  |
| `powderblue` | `#b0e0e6` |  |
| `rosybrown` | `#bc8f8f` |  |
| `royalblue` | `#4169e1` |  |
| `saddlebrown` | `#8b4513` |  |
| `salmon` | `#fa8072` |  |
| `sandybrown` | `#f4a460` |  |
| `seagreen` | `#2e8b57` |  |
| `seashell` | `#fff5ee` |  |
| `sienna` | `#a0522d` |  |
| `skyblue` | `#87ceeb` |  |
| `slateblue` | `#6a5acd` |  |
| `slategray` | `#708090` |  |
| `slategrey` | `#708090` |  |
| `snow` | `#fffafa` |  |
| `springgreen` | `#00ff7f` |  |
| `steelblue` | `#4682b4` |  |
| `tan` | `#d2b48c` |  |
| `thistle` | `#d8bfd8` |  |
| `tomato` | `#ff6347` |  |
| `turquoise` | `#40e0d0` |  |
| `violet` | `#ee82ee` |  |
| `wheat` | `#f5deb3` |  |
| `whitesmoke` | `#f5f5f5` |  |
| `yellowgreen` | `#9acd32` |  |
| CSS4 Colors | `rebeccapurple` | `#663399` |  |

### transparent 키워드

`transparent` 키워드는 완전히 투명한 색으로, "색"을 입힌 항목의 뒷편이 모두 보입니다. 기술적으로 `transparent`는 `rgba(0,0,0,0)`의 짧은 이름입니다.

**참고:** `<gradient>` 등 특정 상황에서 의도하지 않은 결과를 피하기 위해, 현재 CSS 명세에선 `transparent`를 투명도를 미리 곱한 색 공간에서 계산하도록 명시하고 있습니다. 그러나 오래된 브라우저에서는 투명도 0의 검정으로 취급할 수 있다는 점을 주의하세요.

**참고:** `transparent`는 CSS Level 2 (Revision 1) 전까지 실제 색상이 아니었습니다. 대신 `background`와 `border`의 `<color>` 자리에 사용하는 특별한 키워드로, 상속받은 단색을 덮어 쓸 수 있도록 추가됐었습니다. CSS Colors Level 3에서 알파 채널이 추가되면서 `transparent`도 실제 색상으로 재정의되었습니다. 덕분에 `<color>` 값 어디에나 사용할 수 있습니다.

### currentColor 키워드

`currentColor` 키워드는 요소의 `color` 속성값을 나타냅니다. 이를 통해 다른 속성이 `color` 속성값을 따라가도록 설정할 수 있습니다.

`color` 속성의 값으로 `currentColor` 키워드를 사용하면, 값을 상속받은 `color` 속성에서 대신 가져옵니다.

#### currentColor 예제


```html
<div style="color: blue; border: 1px dashed currentColor;">
  이 글의 색은 파랑입니다.
  <div style="background: currentColor; height:9px;"></div>
  이 블록은 파란 테두리로 둘러쌓여 있습니다.
</div>
```

### RGB 색상

RGB 색상 모델은 빨강, 초록, 파랑을 통해 특정 색을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.

#### 구문

RGB 색상은 # 뒤의 16진수 표기법이나 함수형 표기법(`rgb()`, `rgba()`)으로 표현할 수 있습니다.

**참고:** CSS Colors Level 4부터 `rgba()`는 `rgb()`의 다른 이름입니다. Level 4 표준을 구현한 브라우저에서는 같은 매개변수를 받고 동일하게 행동합니다.

16진수 표기법: `#RRGGBB[AA]`

`R`(빨강), `G`(초록), `B`(파랑), `A`(알파)는 16진수 문자(0-9, A-F)입니다. `A`는 선택사항입니다. 예를 들어 `#ff0000`은 `#ff0000ff`와 같습니다.

16진수 표기법: `#RGB[A]`

`R`(빨강), `G`(초록), `B`(파랑), `A`(알파)는 16진수 문자(0-9, A-F)입니다. `A`는 선택사항입니다. 세 글자 표기법(`#RGB`)은 여섯 글자 표기법(`#RRGGBB`)의 단축 표현입니다. 예를 들어 `#f09`는 `#ff0099`와 같습니다. 비슷하게 네 글자 표기법(`#RGBA`)은 여덟 글자 표기법(`#RRGGBBAA`)의 단축 표기법이다. 예를 들어 `#0f38`은 `#00ff3388`과 같습니다.

함수형 표기법: `rgb(R, G, B[, A])` 또는 `rgba(R, G, B, A)`

`R`(빨강), `G`(초록), `B`(파랑)은 `<integer>`나 `<percentage>`이며 숫자 `255`가 `100%`와 동일합니다. `A`(알파)는 0과 1 사이의 `<number>`거나 `<percentage>`이며 숫자 `1`이 `100%`(불투명)와 동일합니다.

함수형 표기법: `rgb(R G B[ A])` 또는 `rgba(R G B A)`

CSS Colors Level 4부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.

#### 예제

##### 다양한 RGB 구문

다음 예제는 한 가지 색상을 만들 때 쓸 수 있는 다양한 RGB 색상 구문을 보입니다.


```css
/\* 아래 모든 구문은 불투명한 핫핑크를 표현합니다. \*/

/\* 16진수 구문 \*/
#f09
#F09
#ff0099
#FF0099

/\* 함수형 구문 \*/
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0) /\* 오류! 소수점 금지 \*/
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /\* 오류! 정수와 백분율 혼용 금지 \*/
rgb(255 0 153)

/\* 16진수와 알파 값 \*/
#f09f
#F09F
#ff0099ff
#FF0099FF

/\* 함수형 구문과 알파 값 \*/
rgb(255, 0, 153, 1)
rgb(255, 0, 153, 100%)

/\* 공백 구분 구문 \*/
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/\* 정숫값을 사용한 함수형 구문 \*/
rgb(255, 0, 153.6, 1)
rgb(1e2, .5e1, .5e0, +.25e2%)
```


##### 다양한 RGB 투명도 구문


```css
/\* 16진수 구문 \*/
#3a30                    /\* 0% opaque green \*/
/\* 0% opaque green \*/
#3A3F                    /\* full opaque green \*/
#33aa3300                /\* 0% opaque green \*/
#33AA3388                /\* 50% opaque green \*/

/\* 함수형 구문 \*/
rgba(51, 170, 51, .1)    /\* 10% opaque green \*/
rgba(51, 170, 51, .4)    /\* 40% opaque green \*/
rgba(51, 170, 51, .7)    /\* 70% opaque green \*/
rgba(51, 170, 51,  1)    /\* full opaque green \*/

/\* 공백 구분 구문 \*/
rgba(51 170 51 / 0.4)    /\* 40% opaque green \*/
rgba(51 170 51 / 40%)    /\* 40% opaque green \*/

/\* 정숫값을 사용한 함수형 구문 \*/
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%)    /\* 40% opaque green \*/

/\* 정숫값을 사용한 함수형 구문 \*/
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%);
```

### HSL 색상

HSL 색상 모델은 색상, 채도, 명도를 통해 특정 색상을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.

많은 디자이너들은 색상, 채도, 명도를 따로 조절할 수 있는 HSL이 RGB보다 더 직관적임을 발견합니다. 또한 HSL을 사용하면 짝이 맞는 색(예컨대 한 가지 색의 여러 밝기) 여러 종류를 더 쉽게 만들 수 있습니다.

#### 구문

HSL 색상은 함수형 `hsl()`과 `hsla()` 표기법을 사용합니다.

**참고:** CSS Colors Level 4부터 `hsla()`는 `hsl()`의 다른 이름입니다. Level 4 표준을 구현한 브라우저에서는 같은 매개변수를 받고 동일하게 행동합니다.

함수형 포기법: `hsl(H, S, L[, A])` 또는 `hsla(H, S, L, A)`

`H`(색상)는 색상원에서의 `<angle>`로 #the-hsl-notation 기준 `deg`, `rad`, `grad`, `turn`을 사용할 수 있습니다. 단위 없이 `<number>`로 표현할 경우 hsl-color에 명시된 것과 같이 각도로 해석합니다. 정의에 따르면 빨강=`0deg`=`360deg`이며 다른 색은 (초록=`120deg`, 파랑=`240deg` 등) 원을 따라 분포하고 있습니다. `<angle>`이라면 암묵적으로 원의 주위를 한 바퀴 돕니다. 예컨대 `-120deg`=`240deg`, `480deg`=`120deg`, `-1turn`=`1turn` 입니다.

`S`(채도)와 `L`(명도)은 `<percentage>`입니다. `100%` 채도는 제일 진한 색이며 `0%`는 회색입니다. `100%` 명도는 흰색, `0%` 명도는 검은색, `50%` 명도는 "보통" 색입니다.

`A`(알파)는 0과 1 사이의 `<number>`거나 `<percentage>`이며 숫자 `1`이 `100%`(불투명)와 동일합니다.

함수형 표기법: `hsl(H S L[ A])` 또는 `hsla(H S L A)`

CSS Colors Level 4부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.

#### 예제

##### 다양한 HSL 구문


```css
/\* 아래 모든 구문은 라벤더를 표현합니다. \*/
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(.75turn, 60%, 70%)

/\* 아래 모든 구문은 85% 투명한 라벤더를 표현합니다. \*/
hsl(270, 60%, 50%, .15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)
```


##### 제일 진한 색상

| 표현 | 설명 | 미리보기 |
| --- | --- | --- |
| `hsl(0, 100%, 50%)` | red |  |
| `hsl(30, 100%, 50%)` | orange |  |
| `hsl(60, 100%, 50%)` | yellow |  |
| `hsl(90, 100%, 50%)` | lime green |  |
| `hsl(120, 100%, 50%)` | green |  |
| `hsl(150, 100%, 50%)` | blue-green |  |
| `hsl(180, 100%, 50%)` | cyan |  |
| `hsl(210, 100%, 50%)` | sky blue |  |
| `hsl(240, 100%, 50%)` | blue |  |
| `hsl(270, 100%, 50%)` | purple |  |
| `hsl(300, 100%, 50%)` | magenta |  |
| `hsl(330, 100%, 50%)` | pink |  |
| `hsl(360, 100%, 50%)` | red |  |

##### 밝고 어두운 초록

| Notation | Description | Live |
| --- | --- | --- |
| `hsl(120, 100%, 0%)` | black |  |
| `hsl(120, 100%, 20%)` |  |  |
| `hsl(120, 100%, 40%)` |  |  |
| `hsl(120, 100%, 60%)` |  |  |
| `hsl(120, 100%, 80%)` |  |  |
| `hsl(120, 100%, 100%)` | white |  |

##### 진하고 옅은 초록

| Notation | Description | Live |
| --- | --- | --- |
| `hsl(120, 100%, 50%)` | green |  |
| `hsl(120, 80%, 50%)` |  |  |
| `hsl(120, 60%, 50%)` |  |  |
| `hsl(120, 40%, 50%)` |  |  |
| `hsl(120, 20%, 50%)` |  |  |
| `hsl(120, 0%, 50%)` | gray |  |

##### 다양한 HSL 투명도 구문


```css
hsla(240, 100%, 50%, .05) /\* 5% opaque blue \*/
hsla(240, 100%, 50%, .4)  /\* 40% opaque blue \*/
hsla(240, 100%, 50%, .7)  /\* 70% opaque blue \*/
hsla(240, 100%, 50%, 1)   /\* full opaque blue \*/

/\* Whitespace syntax \*/
hsla(240 100% 50% / .05)  /\* 5% opaque blue \*/

/\* Percentage value for alpha \*/
hsla(240 100% 50% / 5%)   /\* 5% opaque blue \*/
```

### 시스템 색상

모든 시스템에서 모든 시스템 색상을 지원하는건 아닙니다. 공개 웹 페이지에서 사용하는건 좋지 않습니다.

ActiveText

Text of active links

ButtonBorder

Base border color of controls

ButtonFace

Background color of controls

ButtonText

Foreground color of controls

Canvas

Background of application content or documents

CanvasText

Foreground color in application content or documents

Field

Background of input fields

FieldText

Text in input fields

GrayText

Foreground color for disabled items (e.g. a disabled control)

Highlight

Background of selected items

HighlightText

Foreground color of selected items

LinkText

Text of non-active, non-visited links

Mark

Background of text that has been specially marked (such as by the HTML `mark` element)

MarkText

Text that has been specially marked (such as by the HTML `mark` element)

VisitedText

Text of visited links

보간
--

애니메이션과 그레이디언트 (en-US)는 `<color>` 값의 빨강, 초록, 파랑 각 구성 성분을 부동소수점 실수를 사용해 보간합니다. 보간 중 예상하지 못한 무채색이 등장하는걸 방지하기 위해 계산은 알파 채널을 미리 곱한 sRGBA 색 공간에서 수행합니다. 애니메이션에서 보간의 속도는 타이밍 함수 (en-US)가 결정합니다.

접근성 고려사항
--------

색을 구별하기 어려운 사람도 있으므로, WCAG 2.0 권고안은 특정 메시지, 행동, 또는 결과를 나타내는 방법으로 오직 색만 사용하는걸 강력히 반대하고 있습니다. 색과 색상 대비 (en-US)를 참고하세요.

명세
--

| Specification |
| --- |
| CSS Color Module Level 4 # color-syntax |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `opacity` 속성으로 요소 자체의 투명도를 바꿀 수 있습니다.
* `<color>`를 지정할 수 있는 흔히 쓰이는 속성: `color`, `background-color`, `border-color`, `box-shadow` (en-US), `outline-color` (en-US), `text-shadow` (en-US)
* CSS로 HTML 요소에 색 입히기 (en-US)