CSS <color> 자료형: 색상

CSS <color> 자료형: 색상

CSS <color> 자료형은 색상을 표현합니다. <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> 자료형은 아래 구문들 중 하나로 지정합니다.

currentcolor 키워드

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

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

<div class="box">
  파란 색 텍스트입니다.
  <div class="hr"></div>
  위의 가로줄과 주위 테두리의 색도 파란 색이어야 합니다.
</div>
.box {
  color: blue;
  border: 1px dashed currentColor;
}

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

불러오는 중...

color() 표기법

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

보간

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

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

접근성

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

예제

다양한 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

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
<color>
color() (Profiled color values)
Mix <percentage> and <number> in parameters
Relative color() syntax
color-contrast()
color-mix()
currentcolor keyword
hsl() (HSL color model)
Alpha parameter
Mix <percentage> and <number> in parameters
Relative HSL colors
Space-separated parameters
hwb() (HWB color model)
Mix <percentage> and <number> in parameters
Relative HWB colors
lab() (Lab color model)
Mix <percentage> and <number> in parameters
Relative Lab colors
lch() (LCH color model)
Mix <percentage> and <number> in parameters
Relative LCH colors
light-dark()
Named colors
rebeccapurple
transparent
oklab() (Oklab color model)
Mix <percentage> and <number> in parameters
Relative Oklab colors
oklch() (OKLCH color model)
Mix <percentage> and <number> in parameters
Relative Oklch colors
rgb() (RGB color model)
Alpha parameter
Float values in parameters
Mix <percentage> and <number> in parameters
Relative RGB colors
Space-separated rgb() parameters
RGB hexadecimal notation (#RRGGBB, #RGB, …)
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)
System colors
AccentColor and AccentColorText
Mark, MarkText, ButtonBorder

마지막 수정:

CC BY-SA 4.0 unless otherwise noted. See LICENSE.