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. ダイナミックレンジの定義

ダイナミックレンジは、 輝度の 最も明るい色と最も暗い色の差です。 ダイナミックレンジは写真用語のストップで測定されます。 1ストップは輝度が2倍になることを意味します。

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

標準ダイナミックレンジ（SDR）では、 メディアホワイト（通常の白い背景色や、暗い背景の上の白いテキストの色）が 最も明るい色となります。

SDRでは、輝度はメディアホワイトに相対的に扱われます。 画面を明るくしてもダイナミックレンジは変わりません、 なぜなら最も暗い色も同様に明るくなるためです。

ハイダイナミックレンジ（HDR）では、 メディアホワイトよりも明るい色を表示できます。 たとえば、HDRディスプレイでメディアホワイトを約200cd/m²に設定した場合、 ハイライトを1000cd/m²で表示できることがあります。 通常、最も明るい色は ディスプレイの一部のみ、かつ限られた時間だけ表示可能です。 これは電力消費や発熱の観点によるものです。

HDRでは、輝度は絶対値として扱われ、 メディアホワイトに対する相対値ではありません。 より明るい画面を使うことでダイナミックレンジが広がり、 メディアホワイトの輝度は一定となります。

2.2. ヘッドルームの導入

このセクションは非規範的です。

HDRディスプレイが出せる輝度レベルは 大きく異なります。

ピークホワイトがメディアホワイトよりどれだけ高いかは HDRヘッドルームと呼ばれ、 メディアホワイトのレベル、 ユーザーの好み、 視聴環境によって決まります。

これは一般的に写真用語のストップで表現されます。 したがって、標準ダイナミックレンジ（SDR）は 定義上HDRヘッドルームが0ストップであり、 最も明るい白がメディアホワイトであることを意味します。

Webプラットフォームは現在、 ディスプレイのヘッドルームレベルを直接公開していません。 これは視聴環境に依存し、 リアルタイムの非量子化ヘッドルーム情報が トラッキングベクターとなるためです （たとえば、ユーザーが屋外に移動し、晴れている日だと検出できるなど）。

常に利用可能な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()関数

この関数は2つの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. 定義済み色空間で定義されたSDR用の定義済み空間や、 CSS Color 5 § 4 相対色構文の相対色構文に加わるものです。

構文は次の通りです:

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色空間に加えて、下記のHDR色空間がcolor関数用に定義されています。

これら新しい色空間の値のシリアライズは、CSS Color 4 §  15. 色値のシリアライズで説明されているものと同じです。

4.1. rec2100-pq

rec2100-pq [Rec_BT.2100] 色空間は、赤・緑・青の各チャンネルを表す3つの数値パラメータを受け付けます。 それぞれの値の有効範囲は[0, 1]であり、実際のビット深度（1成分あたり10または12ビット）に関わらず共通です。

パーセプチュアルクアンタイザー（PQ）エレクトロオプティカルトランスファ関数が使用されます [SMPTE-ST-2084],[Rec_BT.2100]。 PQはスクリーンの周囲輝度5cd/m²という基準視聴条件を想定しています。

ITUリファレンス2100はHDR 4Kおよび8Kテレビで使用されています。

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,000cd/m²です。メディアホワイトは203cd/m²です[Rpt_BT.2408]。

var Er;      // 赤・緑・青成分, SDRは[0,1]、HDRは[0,70程度]
var Yw = 203;  // 拡散白の絶対輝度, cd/m²
var x = Er * Yw / 10000;   // ピーク白の絶対輝度は10,000cd/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] 色空間は、赤・緑・青の各チャンネルを表す3つの数値パラメータを受け付けます。 それぞれの値の有効範囲は[0, 1]であり、実際のビット深度（1成分あたり10または12ビット）に関わらず共通です。

ハイブリッドログガンマ（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] 色空間は、赤・緑・青の各チャンネルを表す3つの数値パラメータを受け付けます。 それぞれの値の公称範囲は[0, 1]であり、実際のビット深度（1成分あたり10または12ビット）に関わらず共通です。

赤・緑・青すべてが1.0の色は、絶対輝度203cd/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] は3つの数値パラメータを受け付けます。 J_zがLabのLと同様にLightness（明度）を表し、 a_zとb_zが赤緑軸・黄青軸（Labのa,bに類似）を表します。

CIE LabはL=0～100%（メディアホワイトに対する相対値）ですが、実験的にL=400%まで拡張されています。 対して、JzazbzのJ_z軸は[0,1.0]範囲で、 PQに類似した符号化を使い、13ストップ以上のダイナミックレンジを表現できます。

特徴は以下の通りです:

Labと異なりD65白色点が使われる点に注意してください。 そのため、ほとんどのRGB空間（D65白色点）では色順応処理は不要です。

 color(jzazbz 0.22207 -0.00016 -0.00012)

4.5. JzCzHz

LCH（Labの極座標形）と同様に、JzCzHzはJzazbzの極座標形です。 J_zはJzazbzと同じで明度を表し、C_zは彩度（クロマ）、H_zは色相角 （az正軸からbz正軸方向、度単位）を表します。

 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) // 度に変換すること！
2. Cz = sqrt(az^2 + bz^2)
3. Jzは同じ

4.5.2. JzCzHz色をJzazbz色へ変換

Jzazbzへの変換は簡単です:

1. az = Cz cos(H) // まずHをラジアンに変換！
2. bz = Cz sin(H) // まずHをラジアンに変換！
3. Jzは同じ

4.6. ICtCp

ICtCp 色空間は、 [Rec_BT.2100] における Constant Intensity IC_TC_P 信号フォーマットとして定義され、 3つの数値パラメータを受け付けます。I は強度（Lab の L に類似しますが、最大 10,000 cd/m² までの輝度範囲を扱います）を表し、 C_T と C_P はそれぞれ黄色-青（トリタノープ）軸および赤-緑（プロタノープ）軸を表します（それぞれ Lab の b, a に類似）。

これはヒトの視覚系の LMS コーン原色に基づいており、 Hunt–Pointer–Estevez (HPE) の XYZ→LMS 変換が用いられ、 D65 白色点に正規化されます。 その後、BT.2020 RGB のガマット殻の凹みを削減して補間誤差を減らすためにクロストーク行列が適用されます。 このクロストークは、等色相線の改善や、Just Noticeable Difference (JND) のマカダム楕円の均一性の改善ももたらします。

特徴は次のとおりです:

[Rec_BT.2100] は線形光 BT.2100 RGB からの変換で IC_TC_P を定義していますが、 この変換は 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 メディアホワイトを 58% PQ 値を表示するのに使用される輝度である 203 cd/m² にマップするべきです。 [SMPTE-ST-2084] ただし、実装は非参照視聴条件を考慮するために色の再レンダリングステップ（OOTF）を組み込むことを選択する場合があります。

6. <color> 値のシリアライズ

6.1. color() 関数の値のシリアライズ

このセクションは CSS Color 4 § 15.5 color() 関数の値のシリアライズ を拡張します

color() 値のシリアライズ形式は、算出値（computed value）から派生し、 color() 形式を使用します。関数名と色空間名には ASCII 小文字を使います。

成分値は 10 進でシリアライズされ、<number> として表されます。 成分値間と色空間名と最初の成分値の間の区切りには単一の ASCII スペース文字 " " を使用する必要があります。

定義済みの HDR 色空間について、ラウンドトリップのための最小精度は次のとおりです:

(内部保存にはコンポーネントごとに 16bit、half-float、または float が推奨されます)。 値は切り捨てではなく +∞ 方向への丸め を行う必要があります。

PQ ベースの色空間は、異なる視聴環境で表示するためにトーンマッピング（OOTF）を必要とするか？

プライバシーに関する考慮事項

Web プラットフォームが HDR ヘッドルーム の数値を直接公開していない理由は、 それにより現在の視聴条件が露出されてしまい、プライバシー侵害 となるためです。

セキュリティに関する考慮事項

この文書に関してはセキュリティ上の懸念は提起されていません

アクセシビリティに関する考慮事項

非常に明るい色に対して感受性を持つ人がいるため、 ユーザーエージェントはユーザーのオプションで最大輝度を制限する仕組みを提供すべきです。 推奨手順としては、[Rec_BT.2390] のセクション 5.4.1 Mapping to display with limited brightness range にある toe と knee の手順が適切だと考えられます。

dynamic-range-limit プロパティは、ユーザースタイルシートで standard または constrained-high に設定することもできます。