CSS 색상 모듈 레벨 5

1. 소개

이 섹션은 규범적이지 않습니다.

이 모듈은 새로운 함수 contrast-color(), color-mix() 및 light-dark()를 추가하고, 기존 함수에 상대 색상 구문을 확장합니다.

또한 color() 함수를 확장하여 미리 정의된 색상 공간뿐만 아니라 ICC 프로파일로 정의된 사용자 정의 색상 공간 (보정된 CMYK 포함)을 CSS에서 사용할 수 있도록 합니다.

또한 device-cmyk를 추가하여 보정되지 않은 CMYK 색상을 표현합니다.

2. <color> 구문

CSS에서 색상은 <color> 유형으로 표현됩니다:

<color> = <color-base> | currentColor | <system-color> | 
      <contrast-color()> | <device-cmyk()>  | <light-dark()>

<color-base> = <hex-color> | <color-function> | <named-color> | <color-mix()> | transparent
<color-function> = <rgb()> | <rgba()> |
              <hsl()> | <hsla()> | <hwb()> |
              <lab()> | <lch()> | <oklab()> | <oklch()> |
              <alpha()> |
              <color()>

절대 색상은 <color>의 계산된 값으로, 절대적이고 색채계적인 해석을 가지는 색상입니다. 이는 다음과 같은 값이 아닙니다:

• currentColor (이는 color 속성의 값에 따라 다릅니다)

• <system-color> (이는 색상 모드에 따라 다릅니다)

• <light-dark()> (이는 색상 모드에 따라 다릅니다)

• <contrast-color()> (이는 색상 모드에 따라 다릅니다)

• <device-cmyk()> (이는 색채계적인 기준이 없습니다)

또한 <color-mix()> 또는 상대 색상 구문 내에서 이러한 값이 사용되지 않습니다.

sRGB로 변환되는 색상은:

• hex 색상

• rgb() 및 rgba() 값(상대적 색상 포함)

• hsl() 및 hsla() 값(상대적 색상 포함)

• hwb() 값(상대적 색상 포함)

• named 색상

레거시 색상 문법을 지원하는 함수는:

• rgb() 및 rgba()

• hsl() 및 hsla()

<hsl()>, <hsla()>, <hwb()>, <lch()>, 및 <oklch()> 색상 함수는 원통형 극 좌표 색상 표현을 사용하며 <hue> 각도를 사용합니다; 그 외 색상 함수는 직교 사각 좌표 색상 표현을 사용합니다.

3. 색상 혼합: color-mix() 함수

웹 개발자, 디자인 도구 및 디자인 시스템 개발자는 구성 요소 색상 관계를 확장하는 데 도움을 주기 위해 색상 함수를 자주 사용합니다. 여러 플랫폼 및 다양한 사용자 환경 설정을 지원하는 디자인 시스템이 증가하고 있으며, UI의 다크 모드 기능이 강화되는 상황에서, 색상을 수동으로 설정하지 않고 대신 색상 스킴이 계산되는 단일 소스를 갖는 것이 더욱 유용해지고 있습니다.

현재 Sass, HSL 값에 대한 calc(), 또는 PostCSS가 이를 수행하는 데 사용됩니다. 그러나 전처리기는 동적으로 조정된 색상에는 작동할 수 없습니다. 현재 모든 솔루션은 sRGB 색영역 및 HSL의 지각적 제한에 국한됩니다. (색상 원형에서 색상이 응축되고, 노란색과 파란색처럼 시각적으로 서로 다른 밝기를 가지는 두 색상이 동일한 HSL 밝기를 가질 수 있습니다.)

이 요구를 충족하기 위해 color-mix() 함수는 하나 이상의 <color> 명세의 목록을 받아서, 지정된 <color-space>와 지정된 비율로 이들을 혼합한 결과를 반환합니다.

color-mix() = color-mix( <color-interpolation-method>? , [ <color> && <percentage [0,100]>? ]#)

3.1. 혼합을 위한 색상 공간

색상 보간 방법이 지정되지 않은 경우 Oklab을 기본값으로 사용합니다. 그렇지 않으면 지정된 색상 공간을 혼합에 사용합니다.

3.2. 백분율 정규화

백분율은 0%에서 100% 사이여야 합니다. 음수 백분율은 명시적으로 허용되지 않습니다. 백분율은 혼합 백분율 정규화를 통해 정규화됩니다.

color-mix(in lch, purple 50%, plum 50%)
color-mix(in lch, purple 50%, plum)
color-mix(in lch, purple, plum 50%)
color-mix(in lch, purple, plum)
color-mix(in lch, plum, purple)
color-mix(in lch, purple 80%, plum 80%)

color-mix(in lch, purple 30%, plum 30%)

3.3. color-mix 결과 계산

color-mix(in lch, peru 40%, palegoldenrod)

color-mix(in lch, teal 65%, olive);

color-mix(in oklch, teal 0%, olive 0%);

3.4. 색상 공간 혼합이 color-mix에 미치는 영향

혼합 색상 공간의 선택은 최종 결과에 큰 영향을 줄 수 있습니다.

color-mix(in lch, white, black);
color-mix(in xyz, white, black);
color-mix(in srgb, white, black);

color-mix(in xyz, rgb(82.02% 30.21% 35.02%) 75.23%, rgb(5.64% 55.94% 85.31%));

color-mix(in lch, white, blue);
color-mix(in oklch, white, blue);
color-mix(in srgb, white, blue);

color-mix(in hsl, color(display-p3 0 1 0) 80%, yellow);

color-mix(in lab, device-cmyk(0.091777 0.043303 0.312816 0.000000) 100%, yellow);

3.5. 비단일 알파가 color-mix에 미치는 영향

지금까지의 color-mix() 예시는 모두 완전히 불투명한 색상을 사용했습니다. 예시를 단순화하기 위해 프리멀티플리케이션과 언프리멀티플리케이션 과정은 생략되었습니다. 이 단계들은 1로 곱하고 1로 나누는 것뿐이므로 결과에는 변화가 없기 때문입니다.

일반적인 경우에는 색상에 비단일 알파 값이 존재할 수 있으므로, 프리멀티플라이, 보간, 언프리멀티플라이 과정이 반드시 포함되어야 합니다.

color-mix(in srgb, rgb(100% 0% 0% / 0.7) 25%, rgb(0% 100% 0% / 0.2));

백분율 정규화가 알파 곱셈자를 생성하는 경우, 계산은 마지막 단계만 추가로 다릅니다.

color-mix(in srgb, rgb(100% 0% 0% / 0.7) 20%, rgb(0% 100% 0% / 0.2) 60%);

참고: 보간된 알파에 알파 곱셈값을 곱한 후 그것으로 프리멀티플리케이션을 되돌리는 데 사용하면 안 됩니다. 혼합 백분율이 100%로 스케일링되지 않았다면 올바른 방식이지만, 스케일링되었으므로 이렇게 하면 혼합 색상에 두 번 조정이 가해집니다.

4. 상대 색상

4.1. 상대 색상의 처리 모델

이 명세의 이전 단계에서는 색상 함수가 오직 절대적인 방식으로만 색상을 지정할 수 있었으며, 모든 색상 구성 요소를 직접 지정해야 했습니다.

새로운 상대 색상 문법은 최신 색상 문법을 확장하여 기존 색상을 색상 함수로 수정할 수 있도록 해줍니다. 기준 색상이 지정되면, 각 색상 구성 요소(그리고 지정된 경우 알파 값)는 직접 지정하거나, 기준 색상에서 가져올 수 있으며 (필요하다면 수식 함수로 수정할 수도 있습니다).

기준 색상과 상대 색상은 동일한 색상 함수를 사용할 필요가 없습니다.

필수 변환: 모든 연산은 상대 색상 함수의 색상 공간에서 수행됩니다. 기준 색상의 원래 지정된 색상 공간이 다른 색상 함수를 사용했다면, 먼저 선택한 색상 함수로 변환된 후, 각 구성 요소에 의미 있는 값이 부여되고, 구성 요소 키워드는 기준 색상이 아니라 상대 색상의 색상 공간을 참조합니다.

상대 색상에서 알파 값이 생략된 경우, 이는 기준 색상의 알파를 기본값으로 사용합니다(절대 문법에서는 100%가 기본값인 것과 대조적임).

상대 색상 문법을 사용할 때는 색상 구성 요소 값이 직전 지정이든 색상 공간 변환에서 오든, 참조 범위로 클램프되지 않고 그대로 유지됩니다. 만약 대상 색상 공간이 이를 표현할 수 있다면 색공간 범위를 벗어난 값도 유지됩니다.

하지만 상대 색상 문법을 사용하는 경우, 알파 구성 요소 값은 직접 지정하든 색상 공간 변환에서 오든 클램프됩니다.

누락된 구성 요소는 CSS Color 4 § 12.2 Interpolating with Missing Components와 동일한 방식으로 처리됩니다: 기준 색상 공간과 상대 색상 함수의 색상 공간 모두에서 유사 구성 요소를 확인한 뒤 이들 값이 이월됩니다.

대부분의 상대 색상 문법 사용은 각 인자 위치에서 구성 요소 키워드를 쓰지만, 실제로는 어떤 위치든 사용 가능합니다.

구성 요소를 일반 위치 외에서 사용할 경우 주의해야 합니다; 백분율이 숫자로 해석될 때는, 해당 숫자가 다른 위치에서 사용되더라도 "자동 스케일링"이 적용되지 않습니다.

device-cmyk()에 대한 상대 문법은 존재하지 않습니다.

4.2. 상대 색상 문법

각 함수의 상대 색상 지원을 위한 문법 변경 세부 사항은 아래에 정리되어 있지만, 모두 공통 구조를 따릅니다:

• 원본 색상은 함수 시작 부분에 from <color> 값으로 지정할 수 있습니다. 알파 구성요소도 지정 가능하면 포함됩니다.

• 원본 색상이 지정되지 않으면, 해당 함수는 상대 색상이 아닙니다.

• 원본 색상이 지정된 경우, 나머지 인자는 일반적으로 직접 지정하거나, 구성요소 키워드를 사용해 상대 색상의 색상 공간으로 변환된 원본 색상의 구성요소를 참조할 수 있습니다. 수학 함수로 이 키워드를 동적으로 수정할 수도 있습니다.

• 상대 색상 문법은 인자가 필수인지 선택인지에는 영향을 주지 않습니다.

• 상대 색상 문법은 현대 색상 문법에만 적용됩니다. 레거시 색상 문법에는 적용할 수 없으며, 시도하면 오류입니다.

• 하지만 원본 색상은 현대 또는 레거시 문법 중 어느 것이든 사용할 수 있습니다.

구성요소 키워드는 <숫자> 또는 none을 반환합니다; 만약 원래 <백분율> 또는 <각도>로 지정됐다면, 그 <백분율>은 <숫자>로, <각도>는 도(degree) 단위의 <숫자>로 변환됩니다 (이는 표준 단위입니다) [0, 360] 범위 내입니다.

html { --bluegreen:  oklab(54.3% -22.5% -5%); }
.overlay {
  background:  oklab(from var(--bluegreen) calc(1.0 - l) calc(a * 0.8) b);
}

html { --base:  oklch(52.6% 0.115 44.6deg) }
.summary {
  background:  oklch(from var(--base) l c  calc(h + 90));
}

html { --color: green; }
.foo {
  --darker-accent: lch(from var(--color) calc(l / 2) c h);
}

html { --bg-color:  blue; }
.overlay {
  background:  rgb(from var(--bg-color) r g b / 80%);
}

--vivid-yellow:  color(display-p3 1 1 0); 
--paler-yellow:  color(from var(--vivid-yellow) srgb r g calc(b + 0.5));

--tan:  oklch(78% 0.06 75 / 0.7);
--deeper-tan:  oklch(from var(--tan) l c h / calc(alpha * 2));

--blue-into-gray: rgb(from var(--color)
                    calc(r * .3 + g * .59 + b * .11)
                    calc(r * .3 + g * .59 + b * .11)
                    calc(r * .3 + g * .59 + b * .11));

color: color(from color(srgb 0 0 0 / 60%) srgb alpha 0.6 0.6 / 0.9);

color: rgb(from rgb(0 0 0 / 60%) alpha 153 153 / 0.9);

이 예시에서 무채색 원본 색상에 색상(hue)이 없습니다; 상대 색상에도 hue가 없으며, 그 색상을 사용하는 그라데이션에 영향을 줍니다.

html { --bg:  hsl(none 3% 50%); }
.foo {
  --darker-bg:  oklch(from var(--bg) calc(l * 0.8) c h);
}
.bar {
  background: linear-gradient(in Oklab to right,   var(--darker-bg),   #4C3);
}

--bg 값이 OkLCh로 변환되면 oklch(0.592 0.009 17.42)가 되지만, 유사한 hue 구성요소는 계승되어 oklch(0.592 0.009 none)이 됩니다. 이 값들은 상대 함수에서 사용되어 더 어두운 색상 oklch(0.474 0.009 none)이 됩니다.

그라데이션의 연한 녹색은 oklch(0.743 0.222 141.6)이고, 보간하면 다른 색상도 그 hue를 가지게 되어 oklch(0.474 0.009 141.6)이 됩니다.

따라서 그라데이션은 일정한 녹색 hue를 갖습니다.

만약 구현체가 이러한 계승을 하지 않는다면, --darker-bg의 hue는 0이 되어, 그라데이션 시작 부분에 바람직하지 않은 붉은빛이 나타납니다.

하지만, 누락된 값에 대해 계산을 하면 none은 0으로 처리됩니다.

4.3. 상대 sRGB 색상

sRGB 색상의 의미는 CSS Color 4 § 5 sRGB Colors에서 정의됩니다.

최신 색상 문법의 rgb() 및 rgba() 함수의 문법은 다음과 같이 확장됩니다:

<modern-rgb-syntax> = rgb( [ from <color> ]?
        [ <number> | <percentage> | none]{3}
        [ / [<alpha-value> | none] ]?  )
<modern-rgba-syntax> = rgba( [ from <color> ]?
        [ <number> | <percentage> | none]{3}
        [ / [<alpha-value> | none] ]?  )

상대 색상 문법 내 rgb() 또는 rgba() 함수에서는 사용 가능한 구성 요소 키워드는 다음과 같습니다:

• r, g, b는 모두 <number> 값이며, 기준 색상의 빨강, 초록, 파랑 구성 요소를 sRGB로 (필요하다면 변환 후) 나타냅니다. 255.0은 100%와 같습니다.

• alpha는 <number>이며, 기준 색상의 알파 투명도를 나타냅니다. 1.0은 100%와 같습니다.

rgb(from  indianred 255 g b)

상대 sRGB 색상 문법은 오직 레거시 RGB 문법이 아닌 형태에만 적용됩니다.

rgba(from  darkblue 16, 32, b, 0.5 )

rgb(from  darkblue 16 32 b / 0.5 )

4.4. 상대 HSL 색상

HSL 색상의 의미는 CSS Color 4 § 7 HSL Colors: hsl() 및 hsla() 함수에서 정의됩니다.

최신 색상 문법의 hsl() 및 hsla() 함수의 문법은 다음과 같이 확장됩니다:

<modern-hsl-syntax> = hsl([from <color>]?
          [<hue> | none]
          [<percentage> | <number> | none]
          [<percentage> | <number> | none]
          [ / [<alpha-value> | none] ]? )
<modern-hsla-syntax> = hsla([from <color>]?
        [<hue> | none]
        [<percentage> | <number> | none]
        [<percentage> | <number> | none]
        [ / [<alpha-value> | none] ]? )

상대 색상 문법 내 hsl() 또는 hsla() 함수에서는 사용 가능한 구성 요소 키워드는 다음과 같습니다:

• h는 <number>이며, 기준 색상의 HSL 색상(hue)에 해당하며, 단위는 도(degree)입니다. (필요하다면) sRGB로 변환한 뒤, [0, 360] 범위로 정규화됩니다. 90은 90deg와 같습니다.

• s와 l은 <number>이며, 기준 색상의 HSL 채도(saturation) 및 밝기(lightness)에 해당합니다. (필요하다면) sRGB로 변환한 값을 사용합니다. 100은 100%와 같습니다.

• alpha는 <number>이며, 기준 색상의 알파 투명도에 해당합니다. 1.0은 100%와 같습니다.

--accent:  lightseagreen;
--complement:   hsl(from var(--accent) calc(h + 180) s l);

상대 HSL 색상 문법은 레거시 HSL 문법이 아닌 형태에만 적용됩니다.

4.5. 상대 HWB 색상

HWB 색상의 의미는 CSS Color 4 § 8 HWB Colors: hwb() 함수에서 정의됩니다.

hwb() 함수의 문법은 다음과 같이 확장됩니다:

hwb() = hwb([from <color>]?
        [<hue> | none]
        [<percentage> | <number> | none]
        [<percentage> | <number> | none]
        [ / [<alpha-value> | none] ]? )

상대 색상 문법 내 hwb() 함수에서 사용할 수 있는 구성 요소 키워드는 다음과 같습니다:

• h는 <number>이며, 기준 색상의 HWB 색상(hue)에 해당합니다(단위는 도), (필요하다면) sRGB로 변환한 뒤 [0, 360] 범위로 정규화됩니다. 90은 90deg와 같습니다.

• w와 b는 <number> 값이며, 기준 색상의 HWB 흰색도(whiteness) 및 검정도(blackness)에 해당합니다. (필요하다면) sRGB로 변환한 값을 사용합니다. 100은 100%와 같습니다.

• alpha는 <number> 값이며, 기준 색상의 알파 투명도에 해당합니다. 1.0은 100%와 같습니다.

4.6. 상대 Lab 색상

Lab 색상의 의미는 CSS Color 4 § 9.1 CIE Lab and LCH에서 정의됩니다.

lab() 함수의 문법은 다음과 같이 확장됩니다:

lab() = lab([from <color>]?
        [<percentage> | <number> | none]
        [<percentage> | <number> | none]
        [<percentage> | <number> | none]
        [ / [<alpha-value> | none] ]? )

상대 색상 문법 내 lab() 함수에서 사용할 수 있는 구성 요소 키워드는 다음과 같습니다:

• l은 <number> 값이며, 기준 색상의 CIE 명도(Lightness)에 해당합니다. (필요하다면) CIE Lab으로 변환한 값입니다. 100은 100%와 같습니다.

• a와 b는 <number> 값이며, 기준 색상의 CIE Lab a, b 축에 해당합니다. (필요하다면) CIE Lab으로 변환한 값입니다. 125는 100%에, -125는 -100%에 해당합니다.

• alpha는 <number> 값이며, 기준 색상의 알파 투명도에 해당합니다. 1.0은 100%와 같습니다.

  테스트

  • relative-currentcolor-lab-01.html (실시간 테스트) (소스)

--mycolor:  orchid;
// orchid는 lab(62.753 52.460 -34.103)
--mygray:  lab(from var(--mycolor) l 0 0)
// mygray는 lab(62.753 0 0)이며, rgb(59.515% 59.515% 59.515%)

4.7. 상대 Oklab 색상

Oklab 색상의 의미는 CSS Color 4 § 9.2 Oklab 및 OKLCh에서 정의됩니다.

oklab() 함수의 문법은 다음과 같이 확장됩니다:

oklab() = oklab([from <color>]?
          [<percentage> | <number> | none]
          [<percentage> | <number> | none]
          [<percentage> | <number> | none]
          [ / [<alpha-value> | none] ]? )

상대 색상 문법 내 oklab() 함수에서 사용할 수 있는 구성 요소 키워드는 다음과 같습니다:

• l은 <number> 값이며, 기준 색상의 Oklab 명도(Lightness)에 해당합니다. (필요하다면) Oklab으로 변환한 값입니다. 1.0은 100%와 같습니다.

• a 및 b는 <number> 값이며, 기준 색상의 Oklab a, b 축에 해당합니다. (필요하다면) Oklab으로 변환한 값입니다. 0.4는 100%에, -0.4는 -100%에 해당합니다.

• alpha는 <number> 값이며, 기준 색상의 알파 투명도에 해당합니다. 1.0은 100%와 같습니다.

  테스트

  • relative-currentcolor-oklab-01.html (실시간 테스트) (소스)

4.8. 상대 LCH 색상

LCH 색상의 의미는 CSS Color 4 § 9.1 CIE Lab and LCH에서 정의됩니다.

lch() 함수의 문법은 다음과 같이 확장됩니다:

lch() = lch([from <color>]?
        [<percentage> | <number> | none]
        [<percentage> | <number> | none]
        [<hue> | none]
        [ / [<alpha-value> | none] ]? )

상대 색상 문법 내 lch() 함수에서 사용할 수 있는 구성 요소 키워드는 다음과 같습니다:

• l은 <number> 값이며, 기준 색상의 CIE 명도(Lightness)에 해당합니다. (필요하다면) CIE LCH로 변환한 값입니다. 100은 100%와 같습니다.

• c는 <number> 값이며, 기준 색상의 LCH 채도(Chroma)에 해당합니다. (필요하다면) CIE LCH로 변환한 값입니다. 150은 100%와 같습니다.

• h는 <number> 값이며, 기준 색상의 LCH 색상(hue, 도 단위)에 해당합니다. (필요하다면) CIE LCH로 변환 후 [0, 360] 범위로 정규화됩니다. 90은 90deg와 같습니다.

• alpha는 <number> 값이며, 기준 색상의 알파 투명도에 해당합니다. 1.0은 100%와 같습니다.

--accent:  lightseagreen;
--complement:   lch(from var(--accent) l c calc(h + 180));

--mycolor:  orchid;
// orchid는 lch(62.753 62.571 326.973)
--mygray:  lch(from var(--mycolor) l 0 h)
// mygray는 lch(62.753 0 326.973)이고, rgb(59.515% 59.515% 59.515%) 와 같습니다.

--mymuted:  lch(from var(--mygray) l 30 h);
// mymuted는 lch(62.753 30 326.973)이고, rgb(72.710% 53.293% 71.224%) 와 같습니다.

하지만 HSL과는 달리, 조작 결과가 항상 가시색 영역에 들어간다는 보장은 없습니다.

--mycolor:  lch(60% 90 320);
lch(from var(--mycolor) l c calc(h - 120));

--mycolor:  lch(60% 90 320);
hsl(from var(--mycolor) calc(h - 120) s l);

4.9. 상대 OkLCh 색상

OkLCh 색상의 의미는 CSS Color 4 § 9.2 Oklab 및 OKLCh에서 정의되어 있습니다.

oklch() 함수의 문법이 다음과 같이 확장됩니다:

oklch() = oklch([from <color>]?
          [<percentage> | <number> | none]
          [<percentage> | <number> | none]
          [<hue> | none]
          [ / [<alpha-value> | none] ]? )

상대 색상 구문 oklch() 함수 내에서, 허용되는 구성요소 키워드는 다음과 같습니다:

• l은 <number>로, 원본 색상의 Oklab 밝기(Lightness)에 해당하며, 필요하면 OkLCh로 변환된 후의 값입니다. 1.0은 100%와 동일합니다.

• c는 <number>로, 원본 색상의 OkLCh 색도(Chroma)에 해당하며, 필요하면 OkLCh로 변환된 후의 값입니다. 0.4는 100%와 동일합니다.

• h는 <number>로, 원본 색상의 OkLCh 색상각(hue)을 도 단위로 표시하고, 필요하면 OkLCh로 변환된 후의, [0, 360] 범위로 정규화된 값입니다. 90은 90deg와 동일합니다.

• alpha는 <number>로, 원본 색상의 알파 투명도에 해당합니다. 1.0은 100%와 동일합니다.

OkLCh는 지각적으로 균일하고 색도를 보존하며, 각 축이 색상의 쉽게 이해되는 속성에 해당하므로, 색상 조작에 적합한 선택입니다.

--mycolor:  lch(60% 90 320);
oklch(from var(--mycolor) l c calc(h - 120));

4.10. 상대 알파 색상

상대 알파 색상은 원본 색상을 참조하며, 알파 채널만 변경합니다. 알파 채널의 의미는 CSS Color 4 § 4.2 색상에서 투명도 표현: <alpha-value> 문법에서 정의되어 있습니다.

alpha() 함수(이 단계에서 새로 도입됨)의 문법은 다음과 같습니다:

alpha() = alpha([from <color>]
          [ / [<alpha-value> | none] ]? )

상대 색상 구문 alpha() 함수 내에서, 허용되는 구성요소 키워드는 다음과 같습니다:

• alpha는 <number>로, 원본 색상의 알파 투명도에 해당합니다. 1.0은 100%와 동일합니다.

원본 색상의 색상 구성 요소는 변경되지 않으며, 알파 구성 요소만 수정 또는 대체됩니다. 이 함수의 결과는 원본 색상의 색상 공간에 유지됩니다.

--mycolor:  oklch(60% 0.25 315 / 0.3);
 alpha(from var(--mycolor) / 80%);

--mycolor:  oklch(60% 0.25 315 / 0.8);
 alpha(from var(--mycolor) / calc(alpha * 0.5));

5. 미리 정의된 및 사용자 정의 색상 공간 지정: color() 함수

color() 함수는 특정 색상 공간에서 색상을 지정할 수 있게 해줍니다 (다른 색상 함수들이 대부분 암시적으로 sRGB 색상 공간을 사용하는 것과 달리).

이 레벨에서는 color() 함수가 CSS Color 4 §  10. 미리 정의된 색상 공간에서 지정된 사전 정의 공간뿐만 아니라, 사용자 정의 색상 공간도 허용하도록 확장됩니다.

또한 절대 색상뿐만 아니라 상대 색상도 허용하도록 확장됩니다.

문법은 이제 다음과 같습니다:

color() = color( [from <color>]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<colorspace-params> = [<custom-params> | <predefined-rgb-params> | <xyz-params>]
<custom-params> = <dashed-ident> [ <number> | <percentage> | none ]+
<predefined-rgb-params> = <predefined-rgb> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020
<xyz-params> = <xyz-space> [ <number> | <percentage> | none ]{3}

color 함수는 명시적으로 지정된 색상 공간에서 색상을 지정하는 매개변수를 받습니다.

아래 설명된 대로 잘못된 색상 또는 유효한 색상을 나타냅니다.

잘못된 색상이 아닌 모든 색상은 유효한 색상입니다.

유효한 색상이어도 출력 장치(화면, 프로젝터, 프린터)에서 생성 가능한 색상 범위 밖일 수 있습니다. 이 경우 해당 색상 공간에 대해 색역 밖(out of gamut)이라고 합니다.

색역 밖의 색상은 구성 요소 값이 0 또는 0%보다 작거나, 1 또는 100%보다 클 수 있습니다. 이는 잘못된 색상이 아니며, 대신 표시를 위해 색역 맵핑이 상대 컬러리메트릭 방식으로 수행되어, 계산값 단계에서 0/0%~1/100% 범위로 맞춰집니다.

각 유효한 색상은 출력 장치(화면 또는 프린터)의 색역 안에 있거나, 색역 밖에 있습니다.

5.1. 상대 color() 함수 색상

상대 색상 구문 color() 함수에서 <custom-params>를 사용하는 경우, 허용되는 구성요소 키워드의 개수와 이름은 다음과 같습니다:

• 해당 @color-profile에 있는 components 디스크립터에 의해 정의됨. 없을 경우 상대 색상 조작이 유효하지 않습니다. 이 값들은 <number>이며, 원본 색상의 각 구성요소에 해당하며, 필요하면 색상 프로파일의 색상 공간으로 변환됩니다. 1.0은 100%에 해당합니다.

상대 색상 구문 color() 함수에서 <predefined-rgb-params>를 사용하는 경우, 허용되는 구성요소 키워드는 다음과 같습니다:

• r, g, b 모두 <number>이며, 원본 색상의 적색, 녹색, 청색 구성 요소에 해당합니다. 필요하면 미리 정의된 RGB 색상 공간으로 변환됩니다. 1.0은 100%에 해당합니다.

상대 색상 구문 color() 함수에서 <xyz-params>를 사용하는 경우, 허용되는 구성요소 키워드는 다음과 같습니다:

• x, y, z 모두 <number>이며, 원본 색상의 X, Y, Z 구성 요소에 해당합니다. 필요하면 해당 화이트 포인트에 맞춘 상대 CIE XYZ 색상 공간으로 변환됩니다. 1.0은 100%에 해당합니다.

상대 색상 구문 color() 함수에서 <predefined-rgb-params> 또는 <xyz-params> 중 하나를 사용하는 경우, 추가로 허용되는 구성요소 키워드는 다음과 같습니다:

• alpha는 <number>로, 원본 색상의 알파 투명도에 해당합니다. 1.0은 100%와 같습니다.

매개변수는 다음 형식을 가집니다:

• 색상 공간을 나타내는 <ident> 또는 <dashed-ident>. <ident>인 경우, CSS Color 4 §  10. 미리 정의된 색상 공간에 있는 (예: display-p3) 미리 정의된 색상 공간 중 하나를 나타냅니다. <dashed-ident>인 경우 @color-profile 규칙으로 정의된 사용자 정의 색상 공간을 나타냅니다. 일부 미리 정의된 색상 공간은 <number>, <percentage> 또는 둘 다의 사용을 더 제한할 수 있습니다.

  <ident>가 존재하지 않는 색상 공간을 지정하는 경우 (미리 정의된 색상 공간 중 일치하는 이름 없음), 또는 미리 정의되었으나 지원되지 않는 색상 공간인 경우, 이 인수는 유효하지 않은 색상을 나타냅니다.

  <dashed-ident>가 존재하지 않는 색상 공간을 지정하는 경우 (색상 프로파일의 이름과 일치하지 않거나, 일치하나 해당 프로파일이 로드되지 않았거나, 유효한 프로파일이 아닌 경우), 이 인수는 유효하지 않은 색상을 나타냅니다.

• 하나 이상의 <number> 또는 <percentage>로, 색상 공간이 필요로 하는 매개변수 값입니다.

  사용자 정의 색상 공간의 경우, 지정된 구성 요소 값이 0 또는 0% 미만이거나 1 또는 100% 초과여도 유효하지 않은 것은 아니고, 계산 값 시점에 유효 범위로 클램프(clamp)됩니다. 이는 ICC 프로파일이 일반적으로 허용 범위를 벗어난 입력값을 받지 않기 때문입니다.

  사용자 정의 색상 공간에 색상 공간이 필요로 하는 매개변수 개수보다 더 많은 <number> 또는 <percentage>가 지정되면, 끝쪽에 있는 초과 <number>는 무시됩니다. 색상은 여전히 유효한 색상입니다.

  사용자 정의 색상 공간에 구성 요소 디스크립터에 명시된 것보다 더 많은 <number> 또는 <percentage>가 지정되면, 끝쪽 추가 값도 여전히 유효하지만, 상대 색상 문법에서는 사용할 수 없습니다. 색상은 여전히 유효한 색상입니다.

  사용자 정의 색상 공간에 색상 공간이 필요로 하는 매개변수 개수보다 적은 <number> 또는 <percentage>가 지정될 경우, 누락된 매개변수는 0으로 기본값이 지정됩니다. (이는 추가 잉크가 스폿 컬러 또는 바니시인 다중 구성요소 프린터에서 페이지의 대부분 색상에서는 추가 잉크를 사용하지 않는 경우에 특히 편리합니다.) 색상은 여전히 유효한 색상입니다.

  미리 정의된 색상 공간의 경우, 지정된 구성 요소 값이 0 또는 0% 미만이거나 1 또는 100% 초과여도 유효하지 않은 것은 아니며, 이 범위를 벗어난 색상은 계산 값 시점에 상대 색도 의도로 색상 공간에 맞게 조정됩니다.

• 선택적 슬래시로 구분된 <alpha-value>. 생략하면 기본값은 100%입니다.

--base:  color(display-p3 0.7 0.5 0.1);
--dark:  color(from var(--base) xyz-d65 calc(x/2) calc(y/2) calc(z/2));

5.2. 사용자 정의 색상 공간

CSS는 색상을 색상 프로필 참조로 지정할 수 있도록 허용합니다. 예를 들어 교정된 CMYK 프린터, 또는 RGB 색상 공간, 혹은 다른 종류의 색상/흑백 출력 장치(특성화된)를 사용할 수 있습니다.

color: color(--swopc 0.0134 0.8078 0.7451 0.3019);
color: color(--indigo 0.0941 0.6274 0.3372 0.1647 0 0.0706 0.1216);
color: color(prophoto-rgb 0.9137 0.5882 0.4784);
color: color(display-p3 0.3804 0.9921 0.1412);

미리 정의된 색상 공간 CSS Color 4 §  10. 미리 정의된 색상 공간을 사용하지 않는 색상은 <dashed-ident>를 사용하여 구분하며, 스타일시트 어딘가에 @color-profile at-rule이 필요합니다. 이름을 프로필 데이터와 연결합니다.

@color-profile --swopc {
  src: url('http://example.org/swop-coated.icc');}
@color-profile --indigo {
  src: url('http://example.org/indigo-seven.icc');}

5.3. 색상 프로필 지정: @color-profile at-rule

@color-profile 규칙은 나중에 color() 함수에서 색상을 지정할 때 사용할 수 있는 색상 프로필을 정의하고 이름을 지정합니다.

정의 방식은 다음과 같습니다:

@color-profile = @color-profile [<dashed-ident> | device-cmyk] { <declaration-list> }

<dashed-ident>는 색상 프로필의 이름을 지정하며, CSS 스타일시트에서 이 이름으로 사용할 수 있습니다. 또는 device-cmyk 키워드는 이 색상 프로필이 유효하다면 device-cmyk로 지정된 색상을 해석할 때 사용됨을 의미합니다.

@color-profile 규칙은 이 명세에서 정의된 설명자를 허용합니다.

src 설명자는 색상 프로필 정보를 가져올 URL을 지정합니다.

동일한 이름의 @color-profile 규칙이 여러 개 정의된 경우, 문서 내에서 마지막에 오는 규칙이 우선하며, 이전 규칙들은 모두 무시됩니다.

가져온 ICC 프로파일이 유효하려면

• ICC 프로파일로 파싱될 수 있어야 하며

• Input, Display, Output 또는 색상 공간 ICC 프로파일이어야 합니다. (Abstract, DeviceLink, NamedColor ICC 프로파일은 사용할 수 없습니다).

프로파일이 유효하지 않으면, 이 프로파일을 참조하는 모든 CSS 색상은 유효하지 않은 색상이 됩니다.

외부 색상 프로파일을 가져오려면, @color-profile 규칙 rule이 주어졌을 때, 스타일 리소스를 가져오기 규칙에 따라 rule의 URL을 사용해 ruleOrDeclaration은 rule로, destination은 "color-profile", CORS 모드는 "cors"로 설정하며, processResponse는 response |/res|와 null, 실패 또는 바이트 스트림 byteStream을 인자로 받아 실행합니다: 만약 byteStream이 바이트 스트림이라면, |byteStream|에서 파싱된 색상 프로파일을 적용합니다.

참고: ICC 프로파일의 인터넷 미디어 타입("MIME type") 은 application/vnd.iccprofile입니다.

색상 프로파일에는 "렌더링 의도(rendering intents)"가 포함되며, 이는 색상 프로파일이 정의된 색역보다 작은 색역으로 색상을 감마핑하는 방식을 정의합니다. 일반적으로 프로파일에는 하나의 의도만 있지만, 둘 이상인 경우 rendering-intent 디스크립터로 사용할 의도를 선택합니다.

네 가지 렌더링 의도 유형은 [ICC]입니다:

relative-colorimetric

미디어 상대 컬러리메트릭은 목적 매체의 색역에 포함되는 소스 색상을 각 미디어의 화이트 포인트에 대해 상대적으로 변경하지 않아야 합니다. 목적 매체 색역을 벗어난 소스 색상은 다양한 방법을 사용해 색역 경계에 맵핑됩니다.

미디어 상대 컬러리메트릭 렌더링 의도는 소스 매체 블랙포인트를 목적 매체 블랙포인트로 맵핑하는 블랙 포인트 보정과 함께 자주 사용됩니다. 이 방법은 소스 화이트 포인트를 목적 화이트 포인트로 맵핑해야 하며, 블랙 포인트 보정이 쓰이면 소스 블랙 포인트도 목적 블랙 포인트로 맵핑해야 합니다. 적응 알고리즘을 사용해 화이트 포인트 변화에 맞게 조정해야 하며, 출발과 목적 색역 모두에 포함되는 색상의 상대적 관계를 유지해야 합니다. 목적 색역에 포함되지 않는 색상의 상대적 관계는 변경될 수 있습니다.

absolute-colorimetric

ICC-절대 컬러리메트릭은 목적 매체 색역 안에 들어가는 소스 색상을 채택된 화이트(완전히 반사하는 확산체)에 대해 상대적으로 변경하지 않아야 합니다. 색역을 벗어난 소스 색상은 다양한 방법을 통해 색역 경계에 맵핑됩니다. 이 방법은 색역 내에 있는 색상에 대해 가장 정확한 색상 매칭을 제공하지만, 목적 매체 화이트 포인트가 소스의 것보다 낮을 경우 하이라이트가 잘릴 수 있습니다. 그러므로 정확한 색상 매칭이 필요하고 하이라이트 손실이 중요하지 않은 경우에만 사용하는 것이 권장됩니다.

이 방법은 색상 변환 시 반드시 화이트 포인트 및 블랙 포인트 매칭을 비활성화해야 합니다. 일반적으로 이 옵션은 테스트 목적이 아니면 권장하지 않습니다.

perceptual

이 방법은 특히 소스와 목적지가 크게 다를 때(예: 화면 이미지를 반사 인쇄로 재현할 때) 이미지에 주로 사용됩니다. 소스 이미지의 색상을 목적 매체에 최적화해 재현하며, 이 과정은 독자적 방법을 사용합니다. 이 재최적화는 소스 및 목적 색역 모두에서 색상이 변경될 수 있지만, Perceptual 변환은 재현시 원본의 기본적 예술적 용도를 유지해야 합니다. 원본 이미지의 오류를 자동으로 보정하지 않습니다.

참고: v2 ICC 프로파일에는 명확한 Perceptual 기준 매체가 없으므로 상호운용성 문제가 발생할 수 있습니다. v2 ICC 프로파일을 사용하는 경우, Perceptual 렌더링 의도보다는 블랙 포인트 보정이 적용된 미디어 상대 컬러리메트릭 렌더링 의도를 사용하는 것이 더 안전합니다. 단, 사용될 특정 소스 및 목적 프로파일 결합이 원하는 결과를 주는지 미리 확인한 경우는 예외입니다.

이 방법은 맵핑된 타깃 장치 색역 내에서 픽셀 사이의 상대 색상값을 유지해야 합니다. 또한, 타깃 색역에 이미 포함된 픽셀도 색상 어긋남과 단절을 방지하고 장면의 전체적인 외관을 최대한 유지하기 위해 변환될 수 있습니다.

saturation

이 옵션은 원본의 상대 채도(색도)를 보존하고 솔리드 색상을 선명하게 유지하도록 고안되었습니다. 그러나 Perceptual 의도와 마찬가지로 상호운용성 문제가 있으며, v4 프로파일을 사용해도 솔리드 컬러 보존은 기준 매체 해결책에 적합하지 않으므로 문제가 해결되지 않습니다. 이 렌더링 의도는 사용할 소스와 목적 프로파일 조합이 원하는 결과를 낸다는 것을 확인한 경우가 아니라면 권장되지 않습니다. 이 옵션은 원본 픽셀의 상대 채도(색도) 값을 보존해야 합니다. 색역을 벗어난 색상은 같은 채도를 유지하며 색역 내로 조정되어야 합니다.

색상 프로파일은 다양한 개수의 색상 구성요소를 가진 색상 공간을 정의할 수 있습니다. 예를 들어, 시안, 마젠타, 옐로우, 블랙(CMYK) 프로파일은 c, m, y, k라는 네 개 구성요소를 갖습니다. 반면, 4채널 가산형 스크린 프로파일은 r, g, y, b라는 네 개의 구성 요소를 가질 수도 있습니다.

이 디스크립터의 값은 <ident> 토큰의 쉼표로 구분된 목록입니다. 각 <ident>> 는 구성요소의 이름이며, 색상 프로파일에서 사용되는 순서를 따릅니다. 토큰의 개수는 구성요소 수를 정의합니다.

components: cyan, magenta, yellow, black

components: c,m,y,k

components: cyan, magenta, yellow, black, orange, green, violet

구성요소가 ASCII 대소문자 구분 없이 none과 일치하는 경우, 해당 디스크립터는 유효하지 않습니다. 이는 누락 값 토큰과 충돌하기 때문입니다.

구성요소로 선택한 이름이 CSS Values 4 § 10.7.1 Numeric Constants: e, pi에 정의된 CSS 숫자 상수와 충돌하는 경우에도 해당 구성요소는 여전히 유효하지만, calc() 내에서는 숫자 상수가 해당 구성요소 명을 가리는(shadowing) 현상으로 인해 예기치 않은 결과가 발생할 수 있습니다.

@color-profile --unwise {
  src: url(https://example.com/unwise);
  components: mi, pi, ni;
}
--base: color(--unwise 35% 20% 8%);
--accent: color(from var(--base) mi calc(pi * 2) calc(ni / 2));

5.4. CSS와 인쇄: 교정된 CMYK 및 기타 인쇄 색상 공간 사용

@color-profile at-rule은 RGB 색상 공간에만 국한되지 않습니다. 화면은 일반적으로 색상을 RGB로 직접 표시하지만, 프린터는 종종 색상을 CMYK로 표현합니다.

Cyan, Magenta, Yellow, Black(CMYK)로 보정된 4색 인쇄 또는 Cyan Magenta Yellow Black Orange Green Violet(CMYKOGV)와 같은 추가 잉크를 사용하는 고충실도 광색역 인쇄도 인쇄할 때 사용하는 잉크, 종이, 총 잉크 사용율 및 장비 조합에 해당하는 ICC 프로파일만 있으면 CSS에서 사용할 수 있습니다.

@color-profile --fogra39 {
  src: url('https://example.org/Coated_Fogra39L_VIGC_300.icc');
}
.header {
  background-color:   color(--fogra39 0% 70% 20% 0%);
  }

주어진 CMYK 조합의 결과 색상을 알 수 있으므로, 인쇄 출력을 화면에 시각화(소프트프루프)할 수 있습니다.

또한, 색상을 알아야 하는 작업(안티 앨리어싱, 합성, 그라디언트 색상 사용 등)도 정상적으로 진행할 수 있습니다.

@color-profile --swop5c {
  src: url('https://example.org/SWOP2006_Coated5v2.icc');
}
.header {
  background-color:   color(--swop5c 0% 70% 20% 0%);
}

지정한 CMYK 색상이 sRGB 색역 바깥에 있다는 것을 안다면, 미디어쿼리 등을 이용하여 대체 색상도 지정할 수 있습니다.

@media (color-gamut: srgb) {
  .header {
    background-color:   rgb(8.154% 60.9704% 37.184%);
    }
}
@media print, (color-gamut: p3){
  .header {
    background-color:   color(--fogra39 90% 0% 90% 0%);
    }
}

색상은 4개의 잉크(CMYK)에만 국한되지 않습니다. 예를 들어 광색역 7색 잉크세트도 사용할 수 있습니다.

@color-profile --fogra55beta {
  src: url('https://example.org/2020_13.003_FOGRA55beta_CL_Profile.icc');
}
.dark_skin {
  background-color: 
  color(--fogra55beta 0.183596 0.464444 0.461729 0.612490 0.156903 0.000000 0.000000);
}
.light_skin {
  background-color: 
  color(--fogra55beta 0.070804 0.334971 0.321802 0.215606 0.103107 0.000000 0.000000);
}
.blue_sky {
  background-color: 
  color(--fogra55beta 0.572088 0.229346 0.081708 0.282044 0.000000 0.000000 0.168260);
}
.foliage {
  background-color: 
  color(--fogra55beta 0.314566 0.145687 0.661941 0.582879 0.000000 0.234362 0.000000);
}
.blue_flower {
  background-color: 
  color(--fogra55beta 0.375515 0.259934 0.034849 0.107161 0.000000 0.000000 0.308200);
}
.bluish_green {
  background-color: 
  color(--fogra55beta 0.397575 0.010047 0.223682 0.031140 0.000000 0.317066 0.000000);
}

5.5. CMYK 색상을 Lab으로 변환하기

교정된 CMYK 색상 공간에서 Lab으로의 변환은 일반적으로 ICC 프로필에서 Lab 값을 조회하여 이루어집니다.

5.6. Lab 색상을 CMYK로 변환하기

인쇄를 위해서는 Lab 색상을 프린터의 색상 공간으로 변환해야 합니다.

이는 일반적으로 ICC 프로필에서 CMYK 값을 조회하여 이루어집니다.

6. 보정되지 않은 CMYK 색상: device-cmyk() 함수

프린터가 보정되지 않은 경우에도, 특정 잉크 조합의 출력 결과를 실험이나 출력 샘플 견본집을 통해 알고 있을 때, CMYK 색상을 장치 의존적으로 표현하는 것이 유용할 수 있습니다.

참고: 실제 결과 색상이 미지수이기 때문에, CSS 처리기는 근사값을 산출할 수 있습니다. 이 근사값은 실제 인쇄 결과와 크게 다를 수 있습니다.

device-cmyk() 함수는 작성자가 이런 방법으로 색상을 지정할 수 있게 해줍니다:

device-cmyk() = <legacy-device-cmyk-syntax> | <modern-device-cmyk-syntax>
<legacy-device-cmyk-syntax> = device-cmyk( <number>#{4} )
<modern-device-cmyk-syntax> = device-cmyk( <cmyk-component>{4} [ / [ <alpha-value> | none ] ]? )
<cmyk-component> = <number> | <percentage> | none

device-cmyk() 함수의 인자들은 시안, 마젠타, 옐로우, 블랙 순서로 0과 1 사이의 숫자나 최신 문법에서는 0%~100% 사이의 백분율로 구성 요소를 지정합니다. 이 두 사용법은 동치이며, 선형적으로 변환됩니다. 0 또는 0% 미만이거나 1 또는 100% 초과인 값도 유효하지 않은 것은 아니며, 계산값 산출 시 0/0% 또는 1/100%로 클램프(clamp)됩니다.

최신 문법에서는 다섯 번째 인자가 색상의 알파 값을 지정합니다. 이는 rgb() 함수의 네 번째 인자와 똑같이 해석됩니다. 생략하면 기본값은 100%입니다.

역사적 이유로, device-cmyk()는 레거시 색상 문법도 지원합니다.

일반적으로, 인쇄 기반 응용프로그램은 실제로 색상을 CMYK로 저장하고 그 형태로 프린터에 전송합니다. 그러나 이러한 색상은 색채측정적 해석을 가지지 않으며, 그러므로 그라디언트, 합성, 블렌딩 등에는 사용할 수 없습니다.

따라서 장치 CMYK 색상은 동등한 색상으로 변환되어야 합니다. 이것은 HSL이나 HWB를 RGB로 변환하는 것처럼 단순하지 않으며, 실제 변환은 출력 장치의 정확한 특성에 따라 달라집니다.

1. 사용자, 작성자, 혹은 user-agent 스타일시트에 @color-profile 정의가 있고, src 디스크립터로 지정된 리소스를 불러올 수 있으며, 그 리소스가 유효한 CMYK ICC 프로파일이고, user agent가 ICC 프로파일을 처리할 수 있다면, device-cmyk() 함수의 계산값은 CMYK 색상의 Lab 값이어야 합니다.
2. 그렇지 않으면, device-cmyk() 함수의 계산값은 다음의 단순화 알고리즘으로 변환한 CMYK 색상의 sRGB 값이어야 합니다.

color:  device-cmyk(0 81% 81% 30%);
color:  rgb(178 34 34);
color:  firebrick;

color:  device-cmyk(0 81% 81% 30%);
color:  lab(45.060% 45.477 35.459)
color:  rgb(70.690% 26.851% 19.724%);

이 단순 변환은 잉크의 색채측정 정보, 도트 게인, RGB 공간의 색채측정 정보 등을 모르기 때문에 반드시 근사적입니다.

6.1. 교정되지 않은 CMYK와 sRGB 기반 색상 간의 단순 변환

CMYK를 RGBA로 단순 변환하는 방법:

• red = 1 - min(1, cyan * (1 - black) + black)
• green = 1 - min(1, magenta * (1 - black) + black)
• blue = 1 - min(1, yellow * (1 - black) + black)
• 알파는 입력 색상과 동일합니다.

RGBA를 CMYK로 단순 변환하는 방법:

• black = 1 - max(red, green, blue)
• cyan = (1 - red - black) / (1 - black), 또는 0 if black이 1일 때
• magenta = (1 - green - black) / (1 - black), 또는 0 if black이 1일 때
• yellow = (1 - blue - black) / (1 - black), 또는 0 if black이 1일 때
• 알파는 입력 색상과 동일합니다.

7. 사용된 색상 모드에 반응하기: light-dark() 함수

시스템 색상은 현재 사용 중인 color-scheme 값에 반응할 수 있습니다. light-dark() 함수는 동일한 기능을 저자에게 제공합니다.

light-dark() = light-dark( <color>, <color> )

이 함수는 사용된 색상 모드가 light 또는 알 수 없는 상태면 첫 번째 색상의 계산값으로, 사용된 색상 모드가 dark이면 두 번째 색상의 계산값으로 평가됩니다.

8. 동적으로 충분한 대비의 텍스트 색상을 지정하기: contrast-color() 함수

색상이 동적으로 생성될 때, 이를 배경 색상으로 사용할 경우 충분한 대비를 제공하는 텍스트 색상을 지정하는 것은 종종 어려울 수 있습니다. contrast-color() 함수는 지정된 색상을 단색 배경으로 사용할 때 텍스트에 대해 충분한 색상 대비가 보장되는 색상을 자동으로 제공합니다.

참고: 가독성은 복잡한 주제이며, 충분한 색상 대비는 그 중 한 부분일 뿐입니다. 충분한 대비의 색상 쌍을 가진다고 해서 텍스트가 반드시 읽기 쉬운 것은 아니며, 이는 폰트, 텍스트 크기, 주변 색상 등 다양한 요인에 따라 달라집니다.

contrast-color() = contrast-color( <color> )

contrast-color()는 white 또는 black 중 텍스트에 대해 최대 색상 대비를 제공하는 색상으로 해석됩니다. 입력 색상이 단색 배경으로 사용될 때, white와 black 모두 동일한 대비를 제공하면 white로 해석됩니다.

밝은 색 또는 어두운 색을 출력할지 결정하는 정확한 색상 대비 알고리즘은 이 수준에서는 UA(사용자 에이전트) 정의입니다.

참고: 향후 명세에서는 사용되는 대비 알고리즘, 용도, 반환되는 색상 등에 대해 더 많은 제어 기능이 추가될 예정입니다.

UA에는 WCAG 2.1 섹션 1.4.3 최소 대비 대비 비율 알고리즘만을 밝은색/어두운색 결정에 단순히 사용하지 말 것을 권장합니다. 이 알고리즘에는 여러 가지 알려진 문제점이 있습니다. 그러나 이 함수가 반환하는 색상은 WCAG 2.1 섹션 1.4.3 최소 대비 기준 AA 대형 텍스트에는 반드시 부합해야 합니다. 많은 저자들이 법적 요구사항을 충족해야 하기 때문입니다.

9. 색상 보간

9.1. 색상 보간을 위한 색상 공간

<color-interpolation-method>는 사용자 정의 색상 공간을 사용할 수 있도록 확장됩니다:

<color-space> = <rectangular-color-space> | <polar-color-space> | <custom-color-space>
<rectangular-color-space> = srgb | srgb-linear | display-p3 | display-p3-linear | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | <xyz-space>
<polar-color-space> = hsl | hwb | lch | oklch
<custom-color-space> = <dashed-ident>
<hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue
<color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<dashed-ident>는 유효한 @color-profile 규칙에서 선언되어 있어야 하며, 그렇지 않으면 <color-interpolation-method>는 유효하지 않습니다.

10. <color> 값 해석

10.1. color-mix() 값 해석

모든 <color> 매개변수가 해당 색상 공간의 색상으로 해석된다면, 계산값은 지정된 혼합 색상 공간에서 계산된 혼합 색상이 됩니다. 계산은 CSS Color 4 §  14. Resolving <color> Values에 따라 해석됩니다. 그렇지 않은 경우(currentColor가 함수에서 사용되었다면), 계산값은 각 <color> 매개변수를 CSS Color 4 §  14. Resolving <color> Values에 따라 해석한 color-mix() 함수가 되며, 이는 자식 요소로의 상속성을 보장합니다.

10.2. 상대 색상 구문 값 해석하기

모든 <color> 매개변수가 자신이 속한 색상 공간의 해당 색상으로 해석된다면, 계산값은 지정된 RCS 색상 공간에서 <color>의 절대값이 되며, CSS Color 4 §  14. Resolving <color> Values에 따라 해석됩니다.

그 외의 경우(함수에서 currentColor가 사용된 경우), 계산값은 상대 색상 구문 함수이며, 원본 <color> 매개변수는 CSS Color 4 §  14. <color> 값 해석하기에 따라 해석되어, 자식 요소로 상속이 유지됩니다.

10.3. device-cmyk 값 해석하기

계산값 및 사용값은 지정된 장치 특화 CMYK 색상이며, (구성 요소는 <number> 타입, <percentage> 타입 아님) 지정된 알파 구성 요소와 짝지어집니다 (<number> 타입, <percentage> 타입 아님; 지정하지 않으면 불투명이 기본값입니다).

사용값은 연산에 따라 달라질 수 있습니다; CMYK 지원 장치로 렌더링할 때는 CMYK 색상으로 렌더링될 수 있으며; 비-CMYK 색상과 혼합하거나 비-CMYK 장치로 렌더링할 때는, § 6 보정되지 않은 CMYK 색상: device-cmyk() 함수에 명시된 대로 변환되어야 합니다.

 device-cmyk(0% 70% 20% 0%)

 device-cmyk(0 0.7 0.2 0)

 lab(63.673% 51.577 5.811)

11. 직렬화

이 절은 CSS Color 4 §  15. 색상 값 직렬화를 확장하여 color-mix(), device-cmyk(), 그리고 상대 색상 함수의 결과 직렬화를 추가합니다.

이 섹션에서 명세에 사용되는 문자열과 해당 문자 코드는 다음과 같습니다.

문자열 "."은 지역과 상관없이 소수점 구분자로 사용되며, 천 단위 구분자는 사용하지 않습니다.

일반적으로, 결과의 alpha가 정확히 1이면, 직렬화 시 생략됩니다; 1(완전 불투명)이 암묵적 기본값입니다.

11.1. color-mix() 직렬화

color-mix() 함수의 선언값을 직렬화하면 문자열 "color-mix(in "이 나오고, 이어서 지정된 <color-space>가 모두 소문자로 작성되며, 그 다음에 ", "가, 첫 번째로 지정된 색상이 이어지고, 한 칸 띄우고 첫 번째 백분율의 직렬화(아래 참고) 그 다음 ", "가, 다음으로 두 번째 지정 색상, 두 번째 백분율의 직렬화가 나와, 마지막으로 ")"로 끝납니다.

color-mix() 함수 선언값의 첫 번째 백분율 직렬화는 다음과 같이 정의됩니다:

• 첫 번째 백분율 p1과 두 번째 백분율 p2가 모두 지정된 경우:

  • 둘 다 p1이 50%, p2도 50%라면 아무 것도 직렬화하지 않습니다.

  • 그 외에는 p1을 그대로 직렬화합니다.

• 첫 번째 백분율 p1만 지정된 경우:

  • p1이 50%이면 아무 것도 직렬화하지 않습니다.

  • 그 외에는 p1을 그대로 직렬화합니다.

• 두 번째 백분율 p2만 지정된 경우:

  • p2가 50%면 아무 것도 직렬화하지 않습니다.

  • p2가 calc()이 아니라면 100%-p2 값을 직렬화합니다.

  • 그 외에는 아무 것도 직렬화하지 않습니다.

• 둘 다 지정되지 않은 경우:

  • 아무 것도 직렬화하지 않습니다.

color-mix() 함수 선언값의 두 번째 백분율 직렬화는 다음과 같이 정의됩니다:

• 첫 번째 백분율 p1, 두 번째 백분율 p2 모두 지정된 경우:

  • 둘 다 calc()가 아니고, p1 + p2 = 100%라면 아무 것도 직렬화하지 않습니다.

  • 그 외에는 p2를 그대로 직렬화합니다.

• 첫 번째 백분율 p1만 지정된 경우:

  • 아무 것도 직렬화하지 않습니다.

• 두 번째 백분율 p2만 지정된 경우:

  • p2가 50%면 아무 것도 직렬화하지 않습니다.

  • p2가 calc()가 아니면 아무 것도 직렬화하지 않습니다.

  • 그 외에는 p2를 그대로 직렬화합니다.

• 둘 다 지정되지 않은 경우:

  • 아무 것도 직렬화하지 않습니다.

참고: calc() 값은 알 수 없는 값으로 간주되므로 절대 50%와 같지 않고, 무언가와 더해 100%가 되는 경우도 없습니다.

color-mix(in oklab, teal, peru 40%)

color-mix(in oklab, teal 50%, peru 50%)

color-mix(in oklab, teal 70%, peru 70%)

color-mix() 함수 결과의 직렬화는 혼합에 currentColor 키워드가 사용됐는지에 따라 달라집니다. 사용됐다면 결과는 선언값대로 직렬화됩니다. 이렇게 하면 color 프로퍼티가 다른 값을 갖는 자식 요소에도 정확한 혼합 비율이 적용될 수 있습니다. 그렇지 않으면 결과는 <color> 형식이며, CSS Color 4 §  15. 색상 값 직렬화 에 정의된 대로 직렬화됩니다. 사용되는 형식은 "in"으로 지정된 색상 공간에 따라 다릅니다:

¹

xyz는 xyz-d65의 별칭이기 때문입니다.

왕복(round-trip) 직렬화의 최소 정밀도는 CSS Color 4 §  15. <color> 값 직렬화에서 명시된 것과 동일합니다.

color-mix(in lch, peru 40%, palegoldenrod)

color-mix(in srgb, peru 40%, palegoldenrod)

11.2. 원본 색상 직렬화

다른 색상 함수 내부에서 원본 색상으로 사용된 색상의 선언값을 직렬화할 때의 형식은 다음과 같습니다:

1. rgb(), rgba(), hsl(), hsla()인 경우

• 표준 색상 함수를 식별하는 문자열, rgb()와 rgba()의 경우 "rgb", hsl()과 hsla()의 경우 "hsl" (모두 소문자), 뒤이어 "(", 그다음 지정된 비알파(non-alpha) 구성요소들의 공백으로 구분된 목록이 오며 (숫자는 숫자로, %는 %로, 각도는 도 단위의 정규화된 각도로, calc()는 단순화된 형태로 직렬화), 클램핑은 적용되지 않음, 알파 구성요소가 있으면 " / "와 지정된 알파 구성요소(색상 구성요소와 동일 규칙), 그 뒤에 ")"가 옵니다.

참고: 현대 문법이든 레거시 문법이든 동일한 직렬화가 사용됩니다.

2. hwb(), lab(), lch(), oklab(), oklch()인 경우

• 모두 소문자인 색상 함수 문자열을 사용하고, "("를 붙인 뒤, 명시된 비알파 컴포넌트를 공백으로 구분해 나열합니다 (숫자, 백분율, 각도, calc() 처리 동일, 클램핑 없음) 알파 컴포넌트가 있으면 " / " 뒤에 동일 규칙으로 직렬화, 마지막에 ")"를 붙입니다.

3. color()의 경우

• "color(" 문자열 뒤에 표준 색상 공간("xyz-d65"는 "xyz"의 경우) 소문자, 공백, 명시된 비알파 컴포넌트 공백 구분 나열(숫자, 백분율, 각도, calc() 동일, 클램핑 없음) 알파 컴포넌트가 있으면 " / " 뒤에 동일 규칙으로 직렬화, 마지막에 ")"를 붙입니다.

11.3. 상대 색상 함수 직렬화

상대 색상의 선언값 직렬화는 다음과 같습니다:

1. rgb(), rgba(), hsl(), hsla()의 경우

• 표준 색상 함수명("rgb" 또는 "hsl", 모두 소문자), 뒤이어 "(from ", 다음으로 원본 색상 직렬화 (중첩된 원본 색상 직렬화 규칙 사용), 한 칸 공백, 지정된 비알파 채널 인자들의 공백 구분 목록 (식별자는 식별자로, 숫자와 %는 숫자로, 각도는 도 단위 정규화, calc()는 단순화 형태로 직렬화), 그리고(알파값이 1이 아니면) " / "와 알파값(색상 채널 인자와 동일한 규칙, 단 클램프 적용) 그 뒤에 ")"

2. hwb(), lab(), lch(), oklab(), oklch()의 경우

• 모두 소문자인 색상 함수명, 뒤이어 "(from ", 원본 색상 직렬화 (중첩된 원본 색상 직렬화 규칙 사용), 한 칸 공백, 지정된 비알파 채널 인자들의 공백 구분 목록 (식별자는 식별자로, 숫자와 %는 숫자로, 각도는 도 단위 정규화, calc()는 단순화 형태로 직렬화), 그리고(알파값이 1이 아니면) " / "와 알파값(색상 채널 인자와 동일한 규칙, 단 클램프 적용) 그 뒤에 ")"

3. color()의 경우

• "color(from " 문자열, 원본 색상 직렬화 (중첩된 원본 색상 직렬화 규칙 사용), 한 칸, 정규화된 색상공간명("xyz"는 "xyz-d65") (소문자), 한 칸, 지정된 비알파 채널 인자들의 공백 구분 목록 (식별자는 식별자로, 숫자와 %는 숫자로, 각도는 도 단위 정규화, calc()는 단순화 형태로 직렬화), 그리고(알파값이 1이 아니면) " / "와 알파값(색상 채널 인자와 동일한 규칙, 단 클램프 적용) 그 뒤에 ")"

OkLcH(from peru  l    c  h)

rgb(from red calc(r / 2) g calc(30%));

hsl(from hsl(none 10% 50%) h s l);

hsl(from hsl(127.9 302% 25.33%) h s l);

<div id="example" 
  style="background-color: rgb(from currentcolor r g calc(b / 2)); 
  color: blue;">
</div>

상대 색상 함수 결과의 직렬화는 혼합 또는 참조에 currentColor가 원본 색상으로 사용된 경우에 따라 달라집니다. 이 경우 결과는 선언값 그대로 직렬화됩니다. 이렇게 하면 color 프로퍼티가 다른 값을 갖는 자식 요소에도 올바른 값이 사용됩니다. 그 외에는, 해석값(계산된 <color>)으로 직렬화되며, CSS Color 4 §  15. 색상 값 직렬화에서 정의됩니다.

표현 방법은 상대 색상의 색상 공간에 따라 달라집니다:

왕복 직렬화의 최소 정밀도는 CSS Color 4 § 15.5 color() 함수의 값 직렬화에서 지정된 것과 동일합니다.

lch(from peru calc(l * 0.8) calc(c * 0.7) calc(h + 180)) 

11.4. 사용자 정의 색상 공간 직렬화

color() 컴포넌트 값의 보존 정밀도와 직렬화 값의 유효 숫자 개수는 이 명세에서 정의되어 있지 않으나, CMYK 색상 공간의 경우 최소한 8비트 정밀도로 왕복(round-trip)할 수 있을 만큼 충분해야 하며, 이는 뒤의 0이 생략되지 않는 한 최소 소수점 두 자리를 의미합니다.

@color-profile --swop5c {src: url('https://example.org/SWOP2006_Coated5v2.icc');
}
.header {
background-color:    color(--swop5c  0% 70.0% 20.00% .0%);
}

11.5. device-cmyk 값 직렬화

device-cmyk() 값의 직렬화 형식은 계산값에서 파생되며, 함수 이름은 소문자로 표기한 device-cmyk() 형태를 사용합니다.

구성 요소 값은 10진수로 직렬화되며, <number>로 작성합니다. 각 구성 요소 값 사이에는 ASCII 공백 문자 " " 하나만 구분자로 사용해야 합니다.

어느 구성 요소 값에서든 소수점 이하에 0만 남으면 끝의 0 및 소수점도 생략해야 합니다.

  device-cmyk(0 81% 81% 30%)

device-cmyk() 구성 요소 값의 보존 정밀도, 즉 직렬화에 포함될 유효숫자 자리수는 이 규격서에 정의되어 있지 않으나, 값이 8비트 정밀도로 왕복 가능해야 하며, 끝의 0이 생략되지 않았다면 최소 소수점 이하 두 자리까지 직렬화해야 합니다. 값은 +∞ 쪽으로 반올림해야 하며, 자르기(truncate)가 아닙니다.

알파값이 1이면 별도 표기하지 않습니다. 1이 아닌 알파값은 반드시 명시적으로 직렬화해야 하며, 문자열 " / " (ASCII 공백, 슬래시, 다시 공백) 으로 블랙("k") 색상 구성 요소 값과 알파값을 구분해야 합니다.

12. API

12.1. CSSColorProfileRule 인터페이스

CSSColorProfileRule 인터페이스는 @color-profile 규칙을 나타냅니다.

[Exposed=Window]
interface CSSColorProfileRule : CSSRule {
  readonly attribute CSSOMString name ;
  readonly attribute CSSOMString src ;
  readonly attribute CSSOMString renderingIntent ;
  readonly attribute CSSOMString components ;
};

name, 타입 CSSOMString, 읽기 전용

name 속성을 가져올 때 CSSOMString 객체를 반환해야 하며, 해당 규칙에 정의된 색상 프로필의 name 직렬화 값을 포함해야 합니다.

src, 타입 CSSOMString, 읽기 전용

renderingIntent, 타입 CSSOMString, 읽기 전용

components, 타입 CSSOMString, 읽기 전용

나머지 속성을 가져올 때는 해당 규칙에 정의된 연결된 설명자의 직렬화 값을 포함하는 CSSOMString 객체를 반환해야 합니다. 해당 규칙에 설명자가 지정되어 있지 않으면, 속성은 빈 문자열을 반환해야 합니다.

13. 기본 스타일 규칙

아래 스타일시트는 참고용이며, 규범적이지 않습니다. 이 스타일시트는 구현체가 HTML 패밀리 문서의 기본 스타일링으로 사용할 수 있습니다.

/* 데스크톱 사용자 에이전트의 하이퍼링크 기본 색상 */
:link { color: LinkText; }
:visited { color: VisitedText; }
:active { color: ActiveText; }

/* device-cmyk에 대한 합리적이고 보수적인 기본값 */
@color-profile device-cmyk {
  src: url('https://drafts.csswg.org/css-color-4/ICCprofiles/Coated_Fogra39L_VIGC_300.icc');
}

14. 색상 변환 샘플 코드

이 절은 규범적이지 않습니다.

device-cmyk의 단순 변환은 매우 간단합니다:

function naive(cmyk) {
  // CMYK 값 배열을 단순하게
  // sRGB로 변환
  let [cyan, magenta, yellow, black] = cmyk;
    let red = 1 - Math.min(1, cyan * (1 - black) + black);
    let green = 1 - Math.min(1, magenta * (1 - black) + black);
    let blue = 1 - Math.min(1, yellow * (1 - black) + black);
    return [red, green, blue];
}

15. 보안 관련 고지

이 명세는 CSS에 ICC 프로파일의 필요시에만 다운로드하는 기능을 추가합니다. 이 파일에는 실행 가능한 코드가 포함되어 있지 않으며, 따라서 보안 위험이 증가하지 않습니다.

16. 개인정보 보호 관련 고지

이 명세와 관련해 보고된 새로운 개인정보 보호 이슈는 없습니다.

17. 접근성 관련 고지

이 명세는 배경이 사용자 지정 색상(동적 색상 포함)인 텍스트를 위한 충분한 명암차를 보장할 수 있는 방법을 추가합니다.

18. 변경사항

18.1. 2025년 3월 18일 작업 초안 이후

• 상대 색상에서 CSS Color 4의 해당 정의로 가는 백링크 추가 (이슈 13286)
• 여러 개의 @color-profile 규칙이 있을 때 마지막 규칙이 적용됨을 명시 (이슈 12980)
• color-mix()의 기본값을 oklab으로, color-interpolation-method를 생략할 수 있도록 정의 (이슈 10484)
• color-mix()가 두 색상으로 한정된 것으로 가정한 남은 텍스트 삭제
• origin color 직렬화에 대한 설명 보강 (이슈 10328)
• 보간을 위한 color spaces에 display-p3-linear 추가
• alpha() RCS 함수 추가
• color-mix를 여전히 두 색상이 한정된 걸로 설명한 해설문 업데이트
• 스타일 리소스의 외부 URL fetch 과정 보강
• color-mix()에 단일 항목만 있으면 지정된 색상 공간으로 반환됨을 명시
• 컬러 믹싱 알고리즘에 정규화 플래그 전달
• color-mix()가 1개 이상 인자허용, 다른 *-mix()와 통일
• “sRGB로 해석되는 색상”, “legacy color syntax를 지원하는 색상”에 대한 정의를 CSS Color 4에서 이식
• device-cmyk 변환 샘플 자바스크립트 코드 추가
• device-cmyk 대체 색상을 활용한 color-mix() 사례 추가
• device-cmyk()에는 RCS가 없음을 명기함(추론이 아닌 명시)
• color-mix()에서 퍼센트 합이 0이면 transparent 반환 정의
• “required conversion” 용어를 올바르게 수출(export)함

18.2. 2024년 2월 29일 작업 초안 이후

• 구성 요소 키워드가 none (또는 숫자)을 반환할 수 있음을 명확히 함
• 중첩 색상 함수 직렬화 예시 추가
• WG 결의에 따라 calc가 포함된 color-mix()의 경계조건 정의
• WG 결의에 따라 “퍼센트 합이 0이면 invalid” 언급 삭제
• “color channel”과 혼용되던 용어를 일관되게 “color component”로 변경
• WG 결의에 따라 contrast-color() 간소화
• premultiplied 용어 일관성 부여
• color profile components 대소문자 구분 없이 검증
• contrast-color()를 color type 정의에 추가
• 접근성 고려 사항 섹션 추가
• FOGRA39, 51, 55에 대한 참고사항 추가
• rectangular color spaces에서 <hue-interpolation-method>로 인한 문법오류 문구 제거(문법상 허용 안됨)
• relative color component 키워드가 어느 색상 공간을 참조하는지 명확히 정의
• relative color의 개념적 측면과 구문 세부사항 분리
• deltaE 테이블의 텍스트 명암을 충분히 확보하도록 강화
• 상대 색상 구성 요소는 클램프되지 않으나, 상대 알파는 클램프됨을 명확히 함

18.3. 2022년 6월 28일 작업 초안 이후

• CSSOM 직렬화를 specified value가 아닌 declared value 단위로 기술하도록 변경
• contrast-color() 함수 추가
• color-mix()의 보간 조건을 CSS color 4 구간에 명확히 연결
• HSL로의 가뭇 매핑 언급 삭제
• 절대 색상을 구문이 아닌 해설문에서 정의
• RCS의 percent→number 변환 범위를 각 case별로 명확히 반복 서술
• currentColor가 원본 색상인 상대 색상 직렬화 개선. sRGB, hsl(), hwb()는 color(srgb ...) 직렬화 사용. 왕복 지원.
• 추상에 light-dark() 함수 추가 명시
• CSS Color 4에서 더 넓은 rectangular color space 목록 포워딩
• custom params 문법에서 공백 구분을 명확히 함(쉼표 구분 아님)
• device-cmyk() 문법에서 none과 이전(legacy) 문법 추가
• color-mix()가 color type 문법에 부재했던 것 추가
• 지정된 RCS 값을 사용하는 직렬화 명확화
• color-mix, color-contrast, 상대 색상 구문의 결과 직렬화 정의 추가

18.4. 2022년 4월 28일 작업 초안 이후

• rgb() 정의 오타 수정
• 편집상의 개선(대소문자, 맞춤법, 명확성)
• 다른 명세에서 쓸 수 있도록 정의 수출(export)
• color() 문법의 alpha에 none 옵션 추가
• color-contrast() 함수 6레벨로 이동

18.5. 2021년 12월 15일 작업 초안 이후

• color() 사용 시 매개변수 과다·부족 허용을 custom color space로 한정
• RCS에서 어디든 number/percent 혼용 허용
• 상수 PI 등과의 컴포넌트 이름 충돌 위험에 대한 설명 추가
• Relative Color Syntax의 legacy(쉼표 구분) 문법 미사용 명시
• rgb() 함수 문법 수정, 알파에 none 추가
• color-mix()에서 hsl/hwb 사용 시 정밀도 극대화 위해 직렬화 방식 변경
• 색역을 벗어난 color-mix() 예시 추가
• HSL/HWB로 나타낼 수 없는 색상 설명 보강
• 맞춤법 오류 등 수정

18.6. 2021년 6월 1일 작업 초안 이후

• rectangular space 내 <hue-interpolation-method> 사용은 에러임을 명시
• 기존 <hue-adjuster>를 새 <hue-interpolation-method>로 변경
• CSSWG 결의로 @color-profile과 device-cmyk를 5단계로 이동
• none이 컴포넌트 이름이 될 수 없음을 명시
• OkLCh 상대 색상 문법 예시 추가
• 보간 색상 공간 정의
• fetch 기반의 색상 프로파일 로딩 정의
• D65-adapted CIE XYZ 상대 대비계산 명확화
• color-mix() 직렬화에 oklab(), oklch() 추가
• oklab(), oklch() 상대 색상 문법 추가
• lch와 oklch 혼합 예시 추가
• 혼합에 oklab, oklch 우선 사용 권장
• xyz를 D65 기준으로(색상 4와 통일)
• oklab, oklch 색상 공간 추가
• color-contrast() 해석 방법 명시
• 직렬화 최소 정밀도 명확화
• CIE LCH가 의도된 것임을 명확화
• 예시 추가
• color-adjust() 삭제, relative color syntax만 유지
• color-mix, color-contrast, relative color구문 결과 직렬화 정의

18.7. 2020년 6월 10일 FPWD 이후

• color() 함수용 상대 색상 문법 추가
• color-adjuster 선택사항 아님을 명확히 함
• color-mix 퍼센트 필수임을 명확히 함
• hue-adjuster를 color-mix에 복원
• 혼합 색상 공간 다른 예시 추가
• color-mix의 퍼센트 정규화 예시 추가
• color-mix() 내 음수 퍼센트 명시적 제외
• color-mix() 내 퍼센트 합이 100% 미만일 때 알파가 100% 미만임을 명시
• colorspace 용어 일관적으로 사용, <color-space> 토큰 정의
• color-contrast 문법 정정
• color-contrast()의 optional 목표 contrast-ratio 추가
• adjuster 문법 정정
• color-mix()에서 percentage 합이 0이 되는 case 명시
• color-mix() 연산 순서 정의
• 예시 grammar 최신화
• color-mix() 내 percentage 정규화 알고리즘 정의
• color-mix() 내 0%, 100% 의미 정의
• adjusters를 color-mix()에서 color-adjust()로 이동
• color-mix() 인자 임의 순서 허용
• color-mix() color space 필수
• percentage가 color 앞에 오는 것 허용
• color-mix() 알고리즘 명시
• color-mix(), color-contrast() 목록 최소 두 항목 명시
• relative color syntax 설명문 강화
• CSS 4 색상 직렬화 문서에 링크 추가
• 색상 공간(channels) 구분 섹션 분리
• color-adjust 예시 최신화
• 설명 다이어그램 추가
• unresolved percentage 처리
• adjusters percentage 허용
• 링크 수정
• color-mix grammar 최신화, adjusters 허용, alpha adjuster 추가
• 어떤 예시 일부 정정
• 예시 최신화
• color-mix 내 percentage 정규화 방법 명확화
• color-mix 내 0%, 100% 의미 명확화
• 절차적 설명문, 직렬화 개선
• 보간 색상 공간 명확화
• 색상에 대한 설명, 예시 확장
• 보류중이던 percent 처리반영
• normalize arguments to color-mix
• adjusters용 percentage 허용
• 링크 수정
• color-mix grammar 최신화, adjusters 허용, alpha adjuster 추가
• 일부 예시 정정
• 예시 최신화

18.8. CSS Color 4에서의 변경사항

CSS Color 4와 비교해 주요 변화 중 하나는 CSS 색상이 더 이상 sRGB나 display-p3 같은 미리 정의된 RGB 공간에만 제한되지 않는다는 점입니다.

이를 지원하기 위해 여러 가지 새로운 기능이 추가되었습니다:

1. color() 함수는 @color-profile 규칙으로 확장되어 보정된 CMYK를 포함한 장치 의존 색상을 지원합니다.
2. 출력 장치별(프린터별) 보정되지 않은 색상용 device-cmyk() 함수 추가

또한 새로운 color-mix() 함수가 두 색상을 지정된 색상 공간에서 혼합하여 새 색상을 만들 수 있습니다.