CSS <color> 자료형: 색상

CSS <color> 자료형은 색상을 표현합니다. <color>는 자신과 그 뒤의 배경을 어떻게 합성해야 하는지 결정하는 알파 채널 투명도 값도 포함할 수 있습니다.

구문

/* 색상 키워드 */
rebeccapurple
aliceblue

/* RGB 16진수 */
#f09
#ff0099

/* RGB (빨강, 초록, 파랑) */
rgb(255 0 153)
rgb(255 0 153 / 80%)

/* HSL (색조, 채도, 밝기) */
hsl(150 30% 60%)
hsl(150 30% 60% / 80%)

/* HWB (색조, 백색률, 흑색률) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/* LAB (밝기, A축, B축) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/* LCH (밝기, 크로마, 색조) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/* Oklab (밝기, A축, B축) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/* Oklch (밝기, 크로마, 색조) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/* 상대적 색상 */
/* HSL 색조 변경 */
hsl(from red 240deg s l)
/* HWB 알파 채널 변경 */
hwb(from green h w b / 0.5)
/* LCH 밝기 변경 */
lch(from blue calc(l + 20) c h)

/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))

<color> 자료형은 아래 구문들 중 하나로 지정합니다.

• 키워드: <named-color>, <system-color>, currentcolor
• 16진수 표기법: <hex-color> (#ff0000 등)
• 함수 표기법: <color-function>
  • sRGB: hsl(), hwb(), rgb()
  • CIELAB: lab(), lch()
  • Oklab: oklab(), oklch()
  • 기타 색 공간: color()
• 상대 색상 구문으로 기존 색상에 상대적인 신규 색상 지정
• 두 개 이상 색상 혼합: color-mix()
• 라이트 모드, 다크 모드에서 사용할 색상 각각 지정: light-dark()

currentcolor 키워드

currentcolor 키워드는 요소의 CSS color 속성이 가진 값을 나타냅니다. 이 키워드를 사용하면 기본 값에서는 color의 영향을 받지 않는 속성들의 색도 color의 값으로 맞출 수 있습니다.

currentcolor를 color 속성의 값으로 사용한 경우에는 부모에게서 상속하는 color 값을 가리키게 됩니다.

예제

<div class="box">
  파란 색 텍스트입니다.
  <div class="hr"></div>
  위의 가로줄과 주위 테두리의 색도 파란 색이어야 합니다.
</div>

.box {
  color: blue;
  border: 1px dashed currentColor;
}

.hr {
  background: currentColor;
  height: 9px;
}

RGB 색

RGB 색 모델은 적색, 녹색, 청색 값으로 sRGB 색 공간 위의 색을 정의합니다. 선택적으로 알파 값이 색의 투명도를 나타냅니다.

구문

RGB 색은 rgb()와 rgba() 함수 표기법으로 표현합니다.

함수 표기법: rgb(R, G, B), rgba(R, G, B), rgb(R, G, B, A), rgba(R, G, B, A)

R(적), G(녹), B(청)를 <number> 또는 <percentage>로 표기하며, 숫자 255는 100%와 같습니다. A(알파)는 <percentage> 또는 0 이상 1 이하의 <number>로 숫자 1은 100%(불투명)와 같습니다.

함수 표기법: rgb(R G B), rgba(R G B), rgb(R G B / A), rgba(R G B / A)

CSS Color Module Level 4부터 함수 표기법의 매개변수를 공백으로 구분할 수 있습니다.

HSL 색

HSL 색 모델은 색상, 채도, 명도 값으로 sRGB 색 공간 위의 색을 정의합니다. 선택적으로 알파 값이 색의 투명도를 나타냅니다.

많은 디자이너는 색상, 채도, 명도를 구별해 조정할 수 있는 HSL을 RGB보다 직관적으로 받아들입니다. 특히 HSL을 활용하면 한 색상의 여러 색조를 만들기 쉽습니다. 그러나 HSL을 사용하면 인지적으로 균일하지 못한 색상이 나타날 수 있습니다. 예를 들어, hsl(240 100% 50%)와 hsl(60 100% 50%)의 수치 상 명도는 같지만, 실제 색을 비교하면 전자가 후자의 색보다 훨씬 어둡게 보입니다.

구문

HSL 색은 hsl()과 hsla() 함수 표기법으로 표현합니다.

함수 표기법: hsl(H, S, L), hsla(H, S, L), hsl(H, S, L, A), hsla(H, S, L, A)

H(색상)는 색상환 위의 각도입니다. CSS Color Module Level 4 명세에 따라 deg, rad, grad, turn 단위를 사용한 <angle>, 또는 CSS Color Module Level 3 명세에 따라 단위 없는 <number>를 지정할 수 있으며, <number>를 사용하면 도 단위(deg)로 해석합니다. 색상환의 정의에 따르면 적색=0deg=360deg고, 다른 모든 색은 원 위에 균일하게 위치합니다. 예컨대 녹색=120deg, 청색=240deg입니다. <angle> 자료형이므로 0도 ~ 360도를 벗어나면 원을 한 바퀴 돌게 됩니다. 따라서 -120deg=240deg, 480deg=120deg, -1turn=1turn입니다.

S(채도)와 L(명도)은 <percentage>입니다. 채도 100%는 완전한 유채색, 0%는 완전한 무채색(회색)입니다. 명도 100%는 백색, 0%는 흑색, 50%는 중간 회색입니다.

A(알파)는 <percentage> 또는 0 이상 1 이하의 <number>로 숫자 1은 100%(불투명)와 같습니다.

HWB 색

HWB 색 모델은 HSL처럼 색상, 백색, 흑색 값으로 sRGB 색 공간 위의 색을 정의합니다.

HSL과 마찬가지로 RGB보다 HWB를 더 직관적으로 받아들이기 쉽습니다. 색상 매개변수는 HSL과 동일하고, 그 뒤에 백색과 흑색 매개변수를 <percentage> 값으로 제공해야 합니다. 선택적으로 알파 값도 지정할 수 있습니다.

구문

HWB 색은 hwb() 함수 표기법으로 표현합니다.

함수 표기법: hwb(H W B), hwb(H W B/A)

H(색상)는 색상환 위의 각도입니다. CSS Color Module Level 4 명세에 따라 deg, rad, grad, turn 단위를 사용한 <angle>, 또는 CSS Color Module Level 3 명세에 따라 단위 없는 <number>를 지정할 수 있으며, <number>를 사용하면 도 단위(deg)로 해석합니다. 색상환의 정의에 따르면 적색=0deg=360deg고, 다른 모든 색은 원 위에 균일하게 위치합니다. 예컨대 녹색=120deg, 청색=240deg입니다. <angle> 자료형이므로 0도 ~ 360도를 벗어나면 원을 한 바퀴 돌게 됩니다. 따라서 -120deg=240deg, 480deg=120deg, -1turn=1turn입니다.

W(백색)와 B(흑색)는 <percentage>입니다. 두 값을 혼합하면 최종 색이 되므로 완전한 검은색은 흑색 100% 뿐만 아니라 백색 0%도 필요합니다. 완전한 흰색 또한 흑색 0%와 백색 100%가 필요합니다. 흑색과 백색을 둘 다 50%로 지정하거나 둘 다 100%로 지정하면 중간 회색입니다.

A(알파)는 <percentage> 또는 0 이상 1 이하의 <number>로 숫자 1은 100%(불투명)와 같습니다.

Lab 색

CSS Color Module Level 4에서 Lab 색 모델이 추가됐습니다. Lab 색은 특정 색 공간에 제한되지 않으며, 인간이 볼 수 있는 가시영역을 모두 표현할 수 있습니다.

Lab 색은 lab() 함수 표기법으로 표현합니다.

LCH 색

CSS Color Module Level 4에서 LCH 색 모델이 추가됐습니다. LCH 색은 특정 색 공간에 제한되지 않으며, 인간이 볼 수 있는 가시영역을 모두 표현할 수 있습니다.

LCH 색은 lch() 함수 표기법으로 표현합니다.

LCH는 Lab을 극형식(polar form)으로 나타낸 것으로 둘의 본질은 같습니다. 다만, LCH로는 크로마와 색상 값으로 원하는 색을 지정할 수 있으므로 *a**와 *b** 값을 혼합해야 하는 Lab 색보다 더 직관적입니다. 이 관점에서 LCH는 HSL과 비슷합니다.

하지만 LCH(Lab)는 인지적으로 HSL보다 훨씬 더 균일합니다. 즉, LCH 색 모델은 사람이 인지하는 색의 “밝기”를 올바르게 나타낼 수 있습니다. 예컨대 HSL에서는 두 색, hsl(60 100% 50%)과 hsl(240 100% 50%)를 같은 명도(50%)로 나타내지만 LCH와 Lab에서는 전자(노랑)의 *L**이 97.6, 후자(파랑)의 L*이 29.6으로 수치만 봐도 후자가 훨씬 어둡습니다. 따라서 LCH는 HSL과 달리 하나의 *L** 팔레트를 완전히 다른 색들에 적용해도 기대하는 결과 범위 내의 색조 팔레트를 얻을 수 있습니다. 참고로 LCH와 HSL의 색상환의 형태는 같지만 서로 다른 색을 가리킵니다.

color() 표기법

CSS Color Module Level 4에서 color() 함수가 추가됐습니다. color() 함수는 사전에 정의된 색 공간뿐만 아니라 @color-profile 규칙으로 정의한 사용자 정의 색 공간 위의 색도 표현할 수 있습니다.

보간

애니메이션과 그레이디언트에서, <color> 값의 보간은 적색, 청색, 녹색 값에 대해 독립적으로 이뤄집니다. 각각의 값은 부동소수점 실수로서 보간됩니다. 갑자기 무채색이 나타나는 일을 방지하기 위해, 색 보간은 알파 채널을 곱한 색 공간에서 진행합니다. 보간 속도는 애니메이션이 사용하는 타이밍 함수가 결정합니다.

접근성

색을 구분하기 힘든 사용자도 존재하므로 WCAG 2.1 권고안은 특정 메시지나 동작, 결과를 색만으로 나타내지 않도록 안내하고 있습니다.

예제

다양한 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%) /* 오류! <number>와 <percentage>를 혼합할 수 없음 */
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(2.55e2, 0e0, 1.53e2, 1e2%)

다양한 HSL 구문

/* 모두 70% 불투명도의 라벤더색 */
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%)

/* 모두 15% 불투명도의 라벤더색 */
hsl(270, 60%, 50%, .15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)

다양한 HWB 구문

/* 다양한 색조의 라임색 */
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* 같은 라임색, 50% 불투명도 */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

명세

CSS Color Module Level 4

브라우저 호환성