Color 속성 - by. UXKM

2024-07-30

요약 설명
CSS에서 색을 표현하는 방법이며, 디자인을 하는데 있어서 가장 기본적인 속성입니다.
색상을 표현하는 대표적인 방법에는 색상 이름으로 표현, RGB 색상값으로 표현, 16진수 색상값으로 표현하는 방법 등이 있습니다.
현재 W3C에서 명시하는 색상 단위로 다음과 같이 표현 가능합니다.
기본 color 키워드
수치 color 값(RGB, RGBA, transparent, HSL, HSLA)
확장 color 키워드(currentColor)
시스템 color : 더 이상 사용되지 않습니다.

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 키워드를 추가했습니다.

color의 기본값은 inherit으로 부모의 색상을 가져옵니다.

						p {
							color: inherit | rgb() | rgba() | hsl() | hsla() | hex-color | named-color | currentcolor;
						}

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

							p {color: red;}
							p {color: blue;}

RGB 색상

RGB 색상 모델은 빨강, 초록, 파랑을 통해 특정 색을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.
RGB 색상은 # 뒤의 16진수 표기법이나 함수형 표기법(rgb(), rgba())으로 표현할 수 있습니다.

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부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.

							/* 아래 4가지 표기법은 모두 같은 색상(red)으로 표현됩니다. */
							p {color: #f00;}
							p {color: #ff0000;}
							p {color: rgb(255, 0, 0);}
							p {color: rgba(255, 0, 0, 1);}

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>로 CSS Color Module Level 4 기준 deg, rad, grad, turn을 사용할 수 있습니다.
단위 없이 <number>로 표현할 경우 CSS Color Module Level 3에 명시된 것과 같이 각도로 해석합니다.
정의에 따르면 빨강=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부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.

							p {color: hsla(0, 100%, 50%, 1);}     /* #ff0000와 같은 색(red) */
							p {color: hsla(120, 100%, 50%, 1);}   /* #00ff00와 같은 색(green) */
							p {color: hsla(240, 100%, 50%, 1);}   /* #0000ff와 같은 색(blue) */
							p {color: hsla(240, 100%, 50%, 0.5);} /* #0000ff와 같은 색(blue)이면서 50% 만큼의 투명도를 가지고 있음 */

transparent 키워드

CSS3 속성
transparent 키워드는 완전히 투명한 색으로, "색"을 입힌 항목의 뒷편이 모두 보입니다.
transparent = rgba(0,0,0,0) 와 같습니다.

							p {color: transparent;}

currentColor 키워드

CSS3 속성
currentColor 키워드는 요소의 color 속성값을 나타냅니다. 이를 통해 다른 속성이 color 속성값을 따라가도록 설정할 수 있습니다.
color 속성의 값으로 currentColor 키워드를 사용하면, 값을 상속받은 color 속성에서 대신 가져옵니다.
color: inherit 과 동일.