CSS 색상 HDR 모듈 레벨 1

1. 소개

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

CSS Color 4는 오픈 웹 플랫폼에 와이드 컬러 가멧(WCG) 색 공간을 추가합니다. 설계상, 이들은 모두 표준 다이내믹 레인지(SDR) 색 공간입니다. 본 명세는 고명암비(HDR)를 지원하기 위한 추가 사항을 정의합니다.

WCG 명세는 수십 년간 안정적으로 유지되어 왔으나, HDR 표준은 덜 성숙하여 최근 10년간 빈번하게 개정되었습니다.

1.1. 값 정의

이 명세는 CSS 속성 정의 관례와 [CSS2]에서, 값 정의 구문을 [CSS-VALUES-3]에서 따릅니다. 본 명세에서 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에 정의되어 있습니다. 다른 CSS 모듈과의 조합으로 이 값 타입의 정의가 확장될 수 있습니다.

각 속성 정의에 나열된 속성별 값 외에도, 본 명세에 정의된 모든 속성은 CSS-전역 키워드도 속성 값으로 허용합니다. 가독성을 위해 명시적으로 반복하지 않았습니다.

2. 다이내믹 레인지 제어

2.1. 다이내믹 레인지 정의

다이내믹 레인지란, 휘도의 가장 밝은 색상과 가장 어두운 색상 간의 차이를 의미합니다. 다이내믹 레인지는 사진 촬영에서 스톱(stops) 단위로 측정됩니다. 한 스톱은 휘도가 두 배가 되는 것을 의미합니다.

function DynamicRange (high, low) {
  return Math.log2(high) - Math.log2(low);
  } 

표준 다이내믹 레인지(SDR)에서는 미디어 화이트(일반적인 흰색 배경색 또는 어두운 배경의 흰색 텍스트)가 가장 밝은 색상입니다.

SDR의 경우 휘도는 미디어 화이트에 상대적으로 처리됩니다. 화면이 더 밝아져도 다이내믹 레인지는 변하지 않으며, 가장 어두운 색도 함께 밝아지기 때문입니다.

고명암비(HDR)의 경우, 미디어 화이트보다 더 밝은 색상을 표시할 수 있습니다. 예를 들어, HDR 디스플레이에서 미디어 화이트가 약 200 cd/m²로 설정되어 있으면, 하이라이트를 1000 cd/m²로 표시할 수 있습니다. 일반적으로, 가장 밝은 색상은 화면의 작은 영역에서만, 제한된 시간 동안 표시할 수 있습니다. 이는 에너지 사용량과 발열 문제 때문입니다.

HDR의 경우 휘도는 미디어 화이트에 상대적이 아닌 절대적으로 처리됩니다. 더 밝은 화면을 사용하면 다이내믹 레인지가 증가하며, 미디어 화이트의 휘도는 일정하게 유지됩니다.

2.2. 헤드룸 도입

이 섹션은 비규범적입니다.

HDR 디스플레이가 제공할 수 있는 휘도 수준은 매우 다양합니다.

피크 화이트가 미디어 화이트보다 더 큰 정도를 HDR 헤드룸이라고 하며, 미디어 화이트 수준, 사용자 선호도, 시청 환경에 따라 달라집니다.

일반적으로 사진 스톱(stops) 단위로 표현합니다. 따라서, 표준 다이내믹 레인지(SDR)는 정의상 HDR 헤드룸이 0스톱입니다. 가장 밝은 흰색이 미디어 화이트이기 때문입니다.

웹 플랫폼은 현재 디스플레이의 헤드룸 수준을 직접적으로 공개하지 않습니다. 이는 시청 환경에 따라 다르며, 실시간·정밀한 헤드룸 정보가 추적 벡터가 될 수 있기 때문입니다 (예를 들어, 사용자가 실외로 이동했고 맑은 날임을 감지하는 경우).

항상 사용 가능한 최대 HDR 헤드룸을 사용하는 것이 바람직하지는 않습니다. CSS는 대략적으로 원하는 헤드룸 수준을 제어할 방법을 제공합니다. 이 수준은 엘리먼트별로, 시간에 따라 달라질 수 있습니다.

2.3. dynamic-range-limit 속성

standard

표시되는 최대 휘도 색상은 미디어 화이트와 동일합니다. 즉, CSS 색상 white입니다.

high

표시되는 피크 최대 휘도가 미디어 화이트보다 훨씬 큽니다. 즉, CSS 색상 white이 기준이며, 정확한 수준은 명시되지 않습니다.

constrained-high

표시되는 피크 최대 휘도는 미디어 화이트보다 다소 큽니다. 즉, CSS 색상 white 기준이며, SDR 및 HDR 콘텐츠를 함께 편안하게 볼 수 있는 수준입니다.

body { dynamic-range-limit: standard; }
div.photogrid img { dynamic-range-limit: constrained-high }

2.4. 다이내믹 레인지 제한 혼합: dynamic-range-limit-mix() 함수

이 함수는 두 개의 dynamic-range-limit 값을 받아, 내부적으로 미디어 화이트 기준 스톱 단위로 변환한 뒤, 지정된 비율만큼 혼합한 결과로 화면을 조정합니다. 실제 계산 결과는 노출되지 않습니다.

dynamic-range-limit-mix() = dynamic-range-limit-mix( [ <ident> && <percentage [0,100]> ]#)

모든 퍼센트의 합이 0%이면 함수는 유효하지 않습니다.

2.5. dynamic-range-limit의 계산된 값

지정 값이 standard, constrained-high, 또는 high라면, 계산된 값은 지정 값과 동일합니다.

지정 값이 dynamic-range-limit-mix()라면, 계산된 값은 다음 알고리즘에 의해 결정됩니다:

1. v1, ..., vN을 혼합 대상 파라미터의 계산된 값이라고 하자.

2. p1, ..., pN을 혼합 퍼센트(비율)라 하며, 총합이 100%가 되도록 정규화한다.

3. 기여 퍼센트를 다음과 같이 정의한다:

   • p1_standard,...,pN_standard는 standard에 대한 v1,...,vN의 퍼센트이다.

   • p1_constrained_high,...,pN_constrained_high는 constrained-high에 대한 v1,...,vN의 퍼센트이다.

   • p1_high,...,pN_high는 high에 대한 v1,...,vN의 퍼센트이다.

4. 가중합을 다음과 같이 계산한다:

   • p_standard=(p1_standard*p1+...+pN_standard*pN)/100.

   • p_constrained_high=(p1_constrained_high*p1+...+pN_constrained_high*pN)/100.

   • p_high=(p1_high*p1+...+pN_high*pN)/100.

5. p_standard, p_constrained_high, 또는 p_high 중 하나가 100%이면, 계산된 값은 각각 standard, constrained-high, high 중 하나가 된다.

6. 그 외의 경우, 계산된 값은 dynamic-range-limit-mix()이며, 파라미터는 standard, constrained-high, high 순서이며, 각각 p_standard, p_constrained_high, p_high를 사용하고, 0%인 파라미터는 생략한다.

dynamic-range-limit-mix(
    high 10%,
    dynamic-range-limit-mix(standard 25%, constrained-high 75%) 20%,
    dynamic-range-limit-mix(constrained-high 10%, high 30%) 20%)

dynamic-range-limit-mix(standard 10%, constrained-high 40%, high 50%)

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

color() 함수는 특정 색 공간에서 색상을 지정할 수 있도록 해줍니다(다른 색상 함수들이 대부분 암시적으로 동작하는 sRGB 색 공간이 아님).

이 명세에서 color() 함수는 HDR용 미리 정의된 색 공간을 허용하도록 확장되었으며, CSS Color 4 §  10. Predefined Color Spaces의 SDR용 미리 정의된 색 공간 및 CSS Color 5 § 4 Relative Color Syntax의 상대 색상 구문도 허용합니다.

구문은 다음과 같습니다:

color() = color( [from <color>]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<colorspace-params> = [<custom-params> | <predefined-rgb-params> | 
  <predefined-polar-params> | <predefined-rectangular-params> | <xyz-params>]
<custom-params> = <dashed-ident> [ <number> | <percentage> | none ]+
<predefined-rgb-params> = <predefined-rgb> [ <number> | <percentage> | none ]{3}
<predefined-polar-params> = jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none]
<predefined-rectangular-params> = <predefined-rectangular> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | 
  rec2100-pq | rec2100-hlg | rec2100-linear
<predefined-rectangular> = jzazbz | ictcp
<xyz-params> = <xyz> [ <number> | <percentage> | none ]{3}
<xyz> = xyz | xyz-d50 | xyz-d65

4. HDR용 미리 정의된 색 공간:

CSS Color 4에서 정의된 SDR 색 공간에 더해, color 함수에서 사용할 수 있도록 다음 HDR 색 공간이 정의되어 있습니다.

이 새로운 색 공간의 값 직렬화는 CSS Color 4 §  15. Serializing <color> Values의 설명과 동일합니다.

4.1. rec2100-pq

rec2100-pq [Rec_BT.2100] 색 공간은 세 개의 숫자 파라미터(빨강, 초록, 파랑 채널)를 받으며, 각 값의 유효 범위는 실제 비트 깊이(컴포넌트당 10 또는 12비트)에 상관없이 [0, 1]입니다.

Perceptual Quantizer(PQ) 전기-광 변환 함수가 사용됩니다 [SMPTE-ST-2084],[Rec_BT.2100]. PQ는 화면 주변 밝기 5 cd/m²의 기준 시청 조건을 가정합니다.

ITU Reference 2100은 HDR 4k 및 8k TV에 사용됩니다.

SDR 색 공간 및 일부 HDR 색 공간과 달리, PQ 값은 절대값입니다(상대값이 아님).

SDR과 HDR 다이내믹 레인지를 로그 스케일로 보여주는 다이어그램 추가 필요

특징은 아래와 같습니다 (디스플레이 프라이머리는 [Rec.2020]와 동일):

비기준 시청 환경의 협대역 PQ 비디오나, HLG(어떤 시청 환경이든)의 경우, 블랙 레벨은 [Rec_BT.814] 부록에서 정의한 PLUGE 테스트 신호 및 절차를 사용해 조정해야 합니다. CSS에서 사용하는 PQ(광대역)의 경우, 블랙은 코드 포인트 0에 해당합니다.

 color(rec2100-pq 1.0 1.0 1.0);

 color(rec2100-pq 0.58 0.58 0.58);

 color(rec2100-pq 0.34 0.34 0.34)

sRGB 빨강, 초록, 파랑 및 P3 빨강, 초록, 파랑 인코딩 예시 추가 필요

선형광도 RGB 신호는 다음과 같이 PQ 인코딩으로 변환됩니다. 절대 휘도 스케일을 사용하므로, 상대 휘도를 스케일링하는 데 디퓨즈(미디어) 화이트의 휘도가 필요합니다. PQ에서 인코딩 가능한 최대값(피크, 소면적 화이트)은 10,000 cd/m²입니다. 미디어 화이트는 203 cd/m² [Rpt_BT.2408]입니다.

var Er;      // 빨강, 초록, 파랑 컴포넌트, SDR은 [0, 1], HDR은 [0, 70ish]
var Yw = 203;  // 디퓨즈 화이트의 절대 휘도, cd/m²
var x = Er * Yw / 10000;   // 피크 화이트의 절대 휘도는 10,000 cd/m².
const n = 2610 / (2 ** 14);
const m = 2523 / (2 ** 5);
const c1 = 3424 / (2 ** 12);
const c2 = 2413 / (2 ** 7);
const c3 = 2392 / (2 ** 7);
xPQ = (((c1 + (c2 * (x ** n))) / (1 + (c3 * (x ** n)))) ** m);

xPQ는 "감마 보정"(OETF 적용) 신호 [0, 1]입니다.

PQ 인코딩 값은 다음과 같이 선형광도로 변환됩니다:

var xPQ;      // 빨강, 초록, 파랑 PQ-인코딩 컴포넌트, [0, 1]
const ninv = (2 ** 14) / 2610;
const minv = (2 ** 5) / 2523;
const c1 = 3424 / (2 ** 12);
const c2 = 2413 / (2 ** 7);
const c3 = 2392 / (2 ** 7);
var x = (((Math.max(((xPQ ** minv) - c1), 0) / (c2 - (c3 * (xPQ ** minv)))) ** ninv);
var Yw = 203;      // 디퓨즈 화이트의 절대 휘도, cd/m²
var Ea = x * 10000;   // 절대 휘도, [0, 10,000].
var Er = x * 10000 / Yw;   // 디퓨즈 화이트 기준 상대 휘도, [0, 약 70].

4.2. rec2100-hlg

rec2100-hlg [Rec_BT.2100] 색 공간은 세 개의 숫자 파라미터(빨강, 초록, 파랑 채널)를 받으며, 각 값의 유효 범위는 실제 비트 깊이(컴포넌트당 10 또는 12비트)에 상관없이 [0, 1]입니다.

Hybrid Log-Gamma(HLG) 전기-광 변환 함수가 사용됩니다 [ARIB_STD-B67],[Rec_BT.2100]. HLG는 다양한 밝기의 디스플레이와 넓은 시청 환경에서 사용할 수 있으며, 사용자가 전체 밝기 수준을 제어할 수 있습니다. 0.75 값은 "디퓨즈/미디어 화이트", "18% 반사율 그레이" 카드는 0.38 값을 가집니다. [Rec_BT.2390].

특징은 아래와 같습니다 (디스플레이 프라이머리는 [Rec.2020]와 동일):

협대역 HLG 비디오(어떤 시청 환경이든)의 경우, 블랙 레벨은 [Rec_BT.814] 부록 4에서 정의한 PLUGE 테스트 신호 및 절차를 사용해 조정해야 합니다. CSS에서 사용하는 HLG(광대역)의 경우, 블랙은 코드 포인트 0에 해당합니다.

예시 추가 필요

 color(rec2100-hlg 0.75 0.75 0.75);

 color(rec2100-hlg 0.38 0.38 0.38)

선형광도 RGB 신호는 다음과 같이 HLG 인코딩으로 변환됩니다 [Rec_BT.2390]:

var E;      // 빨강, 초록, 파랑 컴포넌트, [0, 1]
const a = 0.17883277;
const b = 0.28466892;   // 1 - (4 * a)
const c = 0.55991073;   // 0.5 - a * Math.log(4 *a)
// 음수 처리
var sign = E < 0? -1 : 1;
var abs = Math.abs(E);
if (abs <= 1/12) {
  Edash = sign * Math.sqrt( 3 * abs);
}
else {
  Edash = a * Math.log(12 * E - b) + c;
}

Edash는 "감마 보정"(OETF 적용) 신호입니다.

역변환(HLG 인코딩 → 선형광도)은 다음과 같습니다 [Rec_BT.2390]::

var Edash;      // 빨강, 초록, 파랑 인코딩 컴포넌트, [0, 1]
const a = 0.17883277;
const b = 0.28466892;   // 1 - (4 * a)
const c = 0.55991073;   // 0.5 - a * Math.log(4 *a)
if (Edash <= 0.5) {
  E = (Edash ** 2) / 3;
}
else {
  E = (Math.exp((Edash - c) / a) + b) / 12;
}

같은 페이지에 정의된 블랙 레벨 리프트 Β 추가?

4.3. rec2100-linear

rec2100-linear [Rec_BT.2100] 색 공간은 세 개의 숫자 파라미터(빨강, 초록, 파랑 채널)를 받으며, 각 값의 명목 범위는 실제 비트 깊이(컴포넌트당 10 또는 12비트)에 상관없이 [0, 1]입니다.

빨강, 초록, 파랑이 모두 1.0인 색상은 절대 휘도가 203 cd/m²인 HDR 기준 화이트를 나타냅니다.

color(rec2100-linear 1 1 1)

color(rec2100-linear 9.852 9.852 9.852)

 color(rec2100-linear 1 1 1)

선형광도 전기-광 전달 함수가 사용됩니다.

특징은 아래와 같습니다 (디스플레이 프라이머리는 [Rec.2020]와 동일):

4.4. Jzazbz

Jzazbz 색 공간 [Safdar-PUCS] 은 세 개의 숫자 파라미터를 받으며, J_z는 밝기(Lab의 L과 유사), a_z와 b_z는 적-녹, 황-청 보색 축(Lab의 a, b와 유사)을 나타냅니다.

CIE Lab은 미디어 화이트 기준 [0%, 100%]의 밝기 스케일을 사용하며, 실험적으로 L=400%까지 확장된 바 있습니다. 반면, Jzazbz의 J_z 축은 [0, 1.0] 범위를 가지며, Perceptual Quantizer와 유사한 인코딩을 사용하여 13스톱 이상의 다이내믹 레인지를 표현할 수 있습니다.

특징은 아래와 같습니다:

Lab과 달리 D65 화이트포인트가 사용됩니다. 따라서 대부분의 RGB 색 공간(역시 D65 화이트포인트 사용)에서는 색상 적응 단계가 필요 없습니다.

 color(jzazbz 0.22207 -0.00016 -0.00012)

4.5. JzCzHz

LCH가 Lab의 극좌표 표현인 것처럼, JzCzHz는 Jzazbz의 극좌표 형태입니다. J_z는 JzCzHz에서와 동일하며 밝기를 나타내고, C_z는 채도(색의 강도), H_z는 a_z 양의 방향에서 b_z 양의 방향으로 측정한 색상각(도 단위)을 나타냅니다.

 color(jzazbz 0.17542 -0.1179 0.1092)

 color(jzczhz 0.17542 0.1614 132.50)

4.5.1. Jzazbz 색상을 JzCzHz 색상으로 변환

JzCzHz로의 변환은 간단합니다:

1. Hz = atan2(bz, az) // 단, 도(degree) 단위로 변환!
2. Cz = sqrt(az^2 + bz^2)
3. Jz는 동일

4.5.2. JzCzHz 색상을 Jzazbz 색상으로 변환

Jzazbz로의 변환도 간단합니다:

1. az = Cz cos(H) // 먼저 라디안으로 변환!
2. bz = Cz sin(H) // 먼저 라디안으로 변환!
3. Jz는 동일

4.6. ICtCp

ICtCp 색 공간은 [Rec_BT.2100]에서 상수 강도 IC_TC_P 신호 포맷으로 정의되며, 세 개의 수치 매개변수를 가집니다. I는 Intensity(강도)를 나타내며(Lab의 L과 유사하지만 10,000 cd/m²까지의 휘도 범위 포함), C_T와 C_P는 각각 황-청(tritanope) 및 적-록(protanope) 반대 색상 축을 나타냅니다(Lab의 b와 a에 각각 해당).

이 색 공간은 인간 시각 시스템의 LMS 콘 프라이머리에 기반합니다. Hunt-Pointer-Estevez(HPE) XYZ-LMS 변환이 사용되며, D65 화이트포인트로 정규화됩니다. 그 후 크로스토크 행렬이 적용되어 BT.2020 RGB의 색역 볼록도(gamut hull concavities)를 줄여 보간 오류를 줄입니다. 크로스토크는 또한 일정한 색상선(constant hue)과 Just Noticeable Difference(JND) MacAdam 타원의 균일성도 개선합니다.

다음과 같은 특성을 가집니다:

[Rec_BT.2100]에서는 IC_TC_P를 선형광 BT.2100 RGB에서 변환하여 정의하지만, 이 변환은 LMS를 통해 진행되므로 XYZ-LMS 변환을 적용하면 다른 색 공간도 표현할 수 있습니다.

Lab과 달리 D65 화이트포인트가 사용됩니다.

또한 Lab이 주로 저강도 반사색에 대해 테스트된 것과 달리, IC_TC_P는 고채도, 자발광, 고휘도(HDR) 색상에서도 테스트되었습니다. 이는 색상 차이 측정(deltaE ITP)과 SDR/HDR 색상 색역 매핑에 적합합니다.

 color(ictcp 0.5393 -0.2643 -0.0625)

 color(ictcp 0.58069 0 0)

5. SDR 및 HDR 콘텐츠 합성

합성은 CIE XYZ에서 이뤄져야 하며, 이 공간은 선형광 공간으로 색역 제한이 없습니다. 구현에 따라 선형광 RGB 공간에서 합성할 수도 있으며, 이 경우에도 결과는 같지만, 색역을 벗어나는 값(음수 또는 100% 초과)이 최종 디바이스 색 공간으로 변환될 때까지 올바르게 처리되고, 잘리거나 색역 매핑되지 않아야 합니다.

HLG 전달 함수를 사용하는 상대적 HDR의 경우, SDR 미디어의 흰색은 75% HLG 값이 표시되는 것과 동일한 휘도로 매핑해야 합니다. [SMPTE-ST-2084]

자세한 내용은 ITU Rpt_BT.2408-0의 표 3, 4를 참고하세요. [Rpt_BT.2408]

PQ 전달 함수를 사용하는 절대적 HDR의 경우, SDR 미디어의 흰색은 203 cd/m², 즉 58% PQ 값이 표시되는 것과 동일한 휘도로 매핑해야 합니다. [SMPTE-ST-2084] 단, 구현에 따라 기준이 아닌 시청 조건을 고려하기 위해 컬러 리렌더링 단계(OOTF)를 추가할 수도 있습니다.

6. <color> 값 직렬화

6.1. color() 함수 값 직렬화

이 섹션은 CSS Color 4 § 15.5 color() 함수 값 직렬화를 확장합니다.

color() 값의 직렬화 형태는 computed value에서 파생되며, color() 형태를 사용합니다. 함수명과 색 공간명은 ASCII 소문자로 표기합니다.

구성요소 값은 10진수로 직렬화되며, <number>로 작성됩니다. 단일 ASCII 공백 문자 " "를 구분자로 사용하며, 색 공간명과 첫 번째 색상 구성요소 사이에도 공백을 사용합니다.

미리 정의된 HDR 색 공간의 경우, 왕복 변환을 위한 최소 정밀도는 다음과 같습니다:

(내부 저장을 위해 구성요소별 16비트, half-float 또는 float를 권장합니다). 값은 +∞ 방향으로 반올림되어야 하며, 잘리면 안 됩니다.

PQ 기반 색 공간은 다양한 시청 환경에서 표시할 때 톤 매핑(OOTF)이 필요한가요?

개인정보 보호 고려사항

HDR headroom의 수치 값이 웹 플랫폼에서 직접 노출되지 않는 이유는, 노출될 경우 현재 시청 환경이 드러나 프라이버시 침해가 될 수 있기 때문입니다.

보안 고려사항

이 문서에 대해서는 보안 문제가 제기되지 않았습니다.

접근성 고려사항

일부 사용자는 매우 밝은 색상에 민감할 수 있으므로, 사용자 에이전트는 사용자가 최대 휘도를 제한할 수 있는 메커니즘을 제공해야 합니다. 제한된 밝기 범위로 디스플레이에 매핑하는 5.4.1절 toe and knee 절차는 [Rec_BT.2390]에 설명된 방법이 적합합니다.

dynamic-range-limit 속성은 사용자 스타일시트에서 standard 또는 constrained-high로 설정할 수도 있습니다.