Color 속성 - by. UXKM

Publishing
CSS
CSS 초급
Color 속성

요약 설명
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처럼 특정 색을 나타냅니다.
키워드 이름은 색상을 대략적으로 나타내지만, 각 키워드가 정확히 어떤 색을 나타내는지는 미리 정의된 표준에 따르며 특별한 규칙은 없습니다.

색상 키워드를 사용할 때 고려할 점

모든 색상 키워드는 투명도 없는 단일 색상을 표현합니다.
일부 키워드는 같은 색을 나타내는 다른 이름입니다. (예: aqua = cyan, gray = grey)
aqua / cyan
fuchsia / magenta
gray / grey
HTML의 [style] 속성에서는 16가지 기본 색상만 인식하며, 나머지 색상 키워드는 CSS 파일이나 <style> 태그에서만 사용해야 합니다.

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

RGB 색상

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

16진수 표기법
#RRGGBB 형식으로 빨강(R), 초록(G), 파랑(B) 각각을 00~FF(0~255) 사이의 16진수로 표현합니다.
#RGB 형식은 각 색상 값의 두 자리가 같을 때 3자리로 축약할 수 있습니다. (예: #f00 = #ff0000, #f09 = #ff0099)
투명도를 추가하려면 #RRGGBBAA 또는 #RGBA 형식을 사용할 수 있습니다. (예: #ff0000ff = #ff0000)
함수형 표기법
rgb(빨강, 초록, 파랑) 또는 rgba(빨강, 초록, 파랑, 투명도) 형식으로 표현합니다.
빨강, 초록, 파랑은 0~255 사이의 숫자 또는 0%~100% 사이의 백분율로 표현할 수 있으며, 255 = 100%입니다.
투명도(알파)는 0~1 사이의 숫자 또는 0%~100% 사이의 백분율로 표현하며, 1 = 100%(완전 불투명)입니다. (예: rgb(255, 0, 0), rgba(255, 0, 0, 0.5))

							/* 아래 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()의 별칭(alias)입니다. 즉, hsla(60, 100%, 50%, 1)와 hsl(60, 100%, 50%, 1)는 완전히 동일하게 작동합니다. 투명도가 있는 경우에도 hsl() 함수만 사용해도 됩니다.

함수형 표기법
hsl(색상, 채도, 명도) 또는 hsla(색상, 채도, 명도, 투명도) 형식으로 표현합니다.

H(색상): 0~360 사이의 숫자로 색상환의 각도를 나타냅니다. (0 또는 360=빨강, 120=초록, 240=파랑) 단위 없이 숫자만 사용하면 각도로 해석됩니다.

S(채도): 0%~100% 사이의 백분율로 색의 진함을 나타냅니다. 100%는 가장 진한 색, 0%는 회색입니다.

L(명도): 0%~100% 사이의 백분율로 색의 밝기를 나타냅니다. 0%는 검은색, 50%는 보통 색, 100%는 흰색입니다.

A(투명도): 0~1 사이의 숫자 또는 0%~100% 사이의 백분율로 표현하며, 1 = 100%(완전 불투명)입니다. (예: hsl(0, 100%, 50%), hsla(240, 100%, 50%, 0.5))

							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% 만큼의 투명도를 가지고 있음 */

							/* CSS Colors Level 4부터는 hsla() 대신 hsl()을 사용해도 동일하게 작동합니다 */
							p {color: hsl(240, 100%, 50%, 0.5);}   /* 위의 hsla()와 동일 */

transparent 키워드

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

							p {color: transparent;}

currentColor 키워드

CSS3 속성으로, currentColor 키워드는 요소의 현재 color 속성값을 참조합니다. 이를 통해 다른 속성(예: border-color, background-color 등)이 color 속성값을 따라가도록 설정할 수 있습니다.

currentColor는 요소에 명시적으로 설정된 color 값이 있으면 그 값을 사용하고, 없으면 상속받은 color 값을 사용합니다. 이는 color: inherit과는 다릅니다. inherit은 항상 부모 요소의 값을 명시적으로 상속받지만, currentColor는 요소의 현재 color 값(명시적이든 상속이든)을 참조합니다.

최신 색상 모델 (CSS Color Level 4, 5)

CSS Color Level 4와 Level 5에서는 sRGB 색역을 넘어서는 더 넓은 색역을 지원하는 새로운 색상 모델을 제공합니다.
lab(), lch(), color() 함수와 color-mix() 함수를 사용하여 더 풍부하고 정확한 색상 표현과 색상 혼합이 가능합니다.

이러한 색상 모델은 특히 넓은 색역을 지원하는 디스플레이에서 더 생생한 색상을 표현할 수 있으며, 접근성을 고려한 명도와 채도 제어에도 유용합니다.

lab() 색상 함수

lab()는 CIE Lab 색 공간을 사용하는 색상 함수입니다. 인간의 시각에 더 가까운 균일한 색 공간을 제공하며, sRGB를 초과하는 색역을 표현할 수 있습니다.

								.element {
									/* lab(명도, a축, b축) */
									background-color: lab(50% 50 0);
									/* lab(명도, a축, b축, 투명도) */
									background-color: lab(50% 50 0 / 0.8);
								}

								/* 예제 */
								.box1 { background-color: lab(60% 50 0); }      /* 밝은 빨강 */
								.box2 { background-color: lab(40% -50 0); }     /* 어두운 청록 */
								.box3 { background-color: lab(80% 0 50); }     /* 밝은 노랑 */

첫 번째 값: 명도(Lightness) - 0% (검정) ~ 100% (흰색)
두 번째 값: a축 - 녹색(-) ~ 빨강(+)
세 번째 값: b축 - 파랑(-) ~ 노랑(+)
네 번째 값(선택): 투명도(alpha) - 0 ~ 1

lab() 예제

CIE Lab 색 공간을 사용한 색상 표현 예제입니다.

lch() 색상 함수

lch()는 명도(Lightness), 채도(Chroma), 색조(Hue)를 사용하는 색상 함수입니다. lab()보다 직관적이며, 채도를 조절하여 접근성을 개선할 수 있습니다.

								.element {
									/* lch(명도, 채도, 색조) */
									background-color: lch(50% 50 0);
									/* lch(명도, 채도, 색조, 투명도) */
									background-color: lch(50% 50 0 / 0.8);
								}

								/* 예제 */
								.box1 { background-color: lch(60% 50 0); }      /* 밝은 빨강 */
								.box2 { background-color: lch(40% 30 240); }   /* 어두운 파랑 */
								.box3 { background-color: lch(80% 40 90); }    /* 밝은 노랑 */

첫 번째 값: 명도(Lightness) - 0% (검정) ~ 100% (흰색)
두 번째 값: 채도(Chroma) - 0 (무채색) ~ 약 150 (최대 채도)
세 번째 값: 색조(Hue) - 0 ~ 360 (각도)
네 번째 값(선택): 투명도(alpha) - 0 ~ 1

접근성 활용: 채도를 낮춰서 색상 대비를 조절하거나, 명도를 조절하여 가독성을 개선할 수 있습니다.

lch() 예제

명도, 채도, 색조를 사용한 색상 표현 예제입니다.

color() 함수

color() 함수는 다양한 색 공간을 지정할 수 있는 범용 색상 함수입니다. srgb, display-p3, rec2020 등의 색 공간을 사용할 수 있습니다.

								.element {
									/* sRGB 색 공간 (기본) */
									background-color: color(srgb 1 0 0);

									/* Display P3 색 공간 (넓은 색역) */
									background-color: color(display-p3 1 0 0);

									/* Rec2020 색 공간 (초광색역) */
									background-color: color(rec2020 0.8 0.2 0.1);

									/* 투명도 추가 */
									background-color: color(srgb 1 0 0 / 0.5);
								}

색 공간:

srgb: 표준 RGB 색 공간 (기본)
display-p3: Apple Display P3 색 공간 (sRGB보다 넓은 색역)
rec2020: Rec. 2020 색 공간 (초광색역, HDR 디스플레이용)

color() 예제

다양한 색 공간(sRGB, Display P3)을 지정한 색상 표현 예제입니다.

color-mix() 함수

color-mix() 함수는 두 색상을 지정된 비율로 혼합하여 새로운 색상을 만듭니다. CSS에서 직접 색상을 혼합할 수 있어 JavaScript 없이도 동적 색상 조절이 가능합니다.

								.element {
									/* 두 색상을 50:50으로 혼합 */
									background-color: color-mix(in srgb, red 50%, blue 50%);

									/* 빨강 70%, 파랑 30%로 혼합 */
									background-color: color-mix(in srgb, red 70%, blue 30%);

									/* 다른 색 공간 사용 */
									background-color: color-mix(in lch, red 50%, blue 50%);

									/* 투명도가 있는 색상 혼합 */
									background-color: color-mix(in srgb, red 50%, transparent 50%);
								}

color-mix() 문법: color-mix(in 색공간, 색상1 비율%, 색상2 비율%)

실용 예제: 테마 색상을 기본 색상과 흰색/검정을 혼합하여 자동으로 밝기 변형을 만들 수 있습니다.

color-mix() 예제

두 색상을 지정된 비율로 혼합한 결과 예제입니다.

접근성: prefers-color-scheme과 color-scheme

사용자의 시스템 다크 모드 설정에 따라 웹사이트의 색상을 자동으로 조정할 수 있습니다.
prefers-color-scheme 미디어 쿼리를 사용하면 사용자가 선호하는 색상 테마(라이트/다크)를 감지하여 적절한 스타일을 적용할 수 있습니다.

prefers-color-scheme

prefers-color-scheme은 사용자의 시스템 색상 테마 설정을 감지하는 미디어 쿼리입니다.

								body {
									background-color: white;
									color: black;
								}

								/* 사용자가 다크 모드를 선호하는 경우 */
								@media (prefers-color-scheme: dark) {
									body {
										background-color: #1a1a1a;
										color: #e0e0e0;
									}
								}

								/* 사용자가 라이트 모드를 선호하는 경우 */
								@media (prefers-color-scheme: light) {
									body {
										background-color: white;
										color: black;
									}
								}

color-scheme

color-scheme 속성은 브라우저에게 요소가 어떤 색상 테마를 지원하는지 알려줍니다.
이를 통해 브라우저가 스크롤바, 폼 컨트롤 등의 기본 스타일을 자동으로 조정할 수 있습니다.

								/* 라이트 모드만 지원 */
								:root {
									color-scheme: light;
								}

								/* 다크 모드만 지원 */
								:root {
									color-scheme: dark;
								}

								/* 라이트와 다크 모드 모두 지원 */
								:root {
									color-scheme: light dark;
								}

color-scheme을 meta 태그에도 설정할 수 있습니다:

								<meta name="color-scheme" content="light dark">

prefers-color-scheme 예제

시스템 다크 모드 설정에 따라 자동으로 색상이 변경되는 예제입니다.

테스트 방법

prefers-color-scheme을 테스트하는 방법:

Windows: 설정 → 개인 설정 → 색 → 다크 모드 선택
macOS: 시스템 설정 → 일반 → 외관 → 다크 모드 선택
브라우저 DevTools: 렌더링 탭에서 "prefers-color-scheme" 에뮬레이션

참고: color-scheme 속성이 설정되어 있어 브라우저의 기본 스크롤바와 폼 컨트롤도 자동으로 조정됩니다.