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> (black, white, red 등), <system-color>, currentcolor
• 16진수 표기법: <hex-color> (#ff0000 등)
• 함수 표기법: <color-function>
  • sRGB: hsl(), hwb(), rgb()
  • CIELAB: lab(), lch()
  • Oklab: oklab(), oklch()
  • 기타 색 공간: color()
• 상대 색상 구문으로 기존 색상에 상대적인 신규 색상 지정
• 두 개 이상 색상 혼합: color-mix()
• 대비율에 따라 색 선택: color-contrast()
• 라이트 모드, 다크 모드에서 사용할 색상 각각 지정: 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;
}

색상 성분 제외하기

구형 쉼표 구분 구문을 사용하는 경우가 아니라면, 모든 CSS 색상 함수의 성분에는 none 키워드를 사용해서 성분을 뺄 수 있습니다.

색상 보간에서 none 키워드를 사용하면 일부 색상 성분만 보간하고 나머지는 유지하고 싶을 때 유용합니다. 보간 밖에서 none 키워드를 사용할 경우 적절한 단위의 0, 즉 0, 0%, 0deg 등으로 해석됩니다.

/* 같은 색 */
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);

/* 같은 색 */
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);

보간

색의 보간은 그레이디언트, 트랜지션, 애니메이션에서 발생합니다.

<color> 값의 보간 시 우선 주어진 색공간으로의 변환을 먼저 수행하고, 계산 값 각각의 성분을 선형 보간합니다. 트랜지션과 애니메이션에서의 보간 속도는 이징 함수가 결정합니다. 보간 색공간은 Oklab이 기본이지만, 몇몇 색 관련 함수 표기법에서는 <color-interpolation-method>로 재설정할 수 있습니다.

보간에서 성분 제외하기

같은 색공간에서

보간 색공간에 속하는 두 색을 보간할 때, 한 색에서 제외된 성분은 다른 색의 해당 성분으로 대체됩니다. 예를 들어, 아래의 두 표현식은 같은 색을 나타냅니다.

color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))
color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))

다른 색공간에서: 유사 성분

어느 한 색의 색공간이 보간 색공간과 다르다면, 그 색의 누락된 성분은 색공간 변환 후 같은 범주에 속한 유사 성분으로 이전됩니다. 유사 성분의 범주는 다음과 같습니다.

예를 들어…

• color(xyz 0.2 0.1 0.6)의 X (0.2) 성분은 rgb(50% 70% 30%)의 R (50%) 성분과 유사합니다.
• hsl(0deg 100% 80%)의 H (0deg) 성분은 oklch(80% 0.1 140)의 H (140) 성분과 유사합니다.

Oklch를 보간 색공간으로 사용하고 아래의 두 색을 보간하는 경우를 생각해 보겠습니다.

lch(80% 30 none)
color(display-p3 0.7 0.5 none)

보간 절차는 다음과 같습니다.

1. 두 색의 제외된 성분을 0 값으로 대체합니다.

   lch(80% 30 0)
   color(display-p3 0.7 0.5 0)

2. 두 색 모두 보간 색공간으로 변환합니다.

   oklch(83.915% 0.0902 0.28)
   oklch(63.612% 0.1522 78.748)

3. 변환된 두 색의 성분 중 어느 것이라도 원래 색에서 제외된 성분과 같은 범주에 속한다면, 해당 성분을 다시 제외합니다.

   oklch(83.915% 0.0902 none)
   oklch(63.612% 0.1522 78.748)

4. 한 쪽의 제외된 성분을 다른 쪽의 성분 값으로 대체합니다.

   oklch(83.915% 0.0902 78.748)
   oklch(63.612% 0.1522 78.748)

접근성

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

명세

CSS Color Module Level 4

브라우저 호환성