<color>
CSS <color>
자료형은 색을 나타냅니다. <color>
는 이 색이 배경과 어떻게 합성되어야 하는지 나타내는 알파 채널 투명도 값도 가질 수 있습니다.
<color>
는 다음 방법으로 정의할 수 있습니다.
- 키워드 사용 (
blue
,transparent
등) - RGB 3차원 좌표계 사용 (# + 16진수 표기법 또는
rgb()
,rgba()
의 함수형 표기법) - HSL 실린더형 좌표계 사용 (
hsl()
,hsla()
의 함수형 표기법)
참고: 이 글은 <color>
자료형에 대해 상세히 기술합니다. HTML에서 실제로 색을 쓰는 법이 더 알고 싶으시면 CSS로 HTML 요소에 색 입히기를 참고하세요.
구문
<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 예제
<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 색상 구문을 보입니다.
/* 아래 모든 구문은 불투명한 핫핑크를 표현합니다. */
/* 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 투명도 구문
/* 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 구문
/* 아래 모든 구문은 ���벤더를 표현합니다. */
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 투명도 구문
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
-
Base border color of controls
-
Background color of controls
-
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
보간
애니메이션과 그레이디언트는 <color>
값의 빨강, 초록, 파랑 각 구성 성분을 부동소수점 실수를 사용해 보간합니다. 보간 중 예상하지 못한 무채색이 등장하는걸 방지하기 위해 계산은 알파 채널을 미리 곱한 sRGBA 색 공간에서 수행합니다. 애니메이션에서 보간의 속도는 타이밍 함수가 결정합니다.
접근성 고려사항
명세
Specification |
---|
CSS Color Module Level 4 # color-syntax |
브라우저 호환성
BCD tables only load in the browser
같이 보기
opacity
속성으로 요소 자체의 투명도를 바꿀 수 있습니다.<color>
를 지정할 수 있는 흔히 쓰이는 속성:color
,background-color
,border-color
,box-shadow
,outline-color
,text-shadow
- CSS로 HTML 요소에 색 입히기