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()> |
            <color()>

絶対色は、計算された値が絶対的な色彩測定解釈を持つ <color> です。 これは、次の値ではないことを意味します:

• currentColor（color プロパティの値に依存します）

• <system-color>（カラーモードに依存します）

• <light-dark()>（カラーモードに依存します）

• <contrast-color()>（カラーモードに依存します）

• <device-cmyk()>（色彩測定基準がありません）

また、<color-mix()> または相対色構文内でこれらの値が使用されることもありません。

3. 色の混合: color-mix() 関数

ウェブ開発者、デザインツール、デザインシステムの開発者は、 コンポーネントの色の関係をスケーリングする際に色関数を使用することがよくあります。 複数のプラットフォームや複数のユーザー設定をサポートするデザインシステムの使用が増加している中で、 例えばUIのダークモードの機能が向上した場合など、 手動で色を設定する必要がなく、スキームを計算する単一のソースを持つことが さらに便利になります。

現在、Sass、HSL値のcalc()、またはPostCSSがこれを行うために使用されています。 しかし、プリプロセッサは動的に調整された色で動作することができません。 現在のすべてのソリューションはsRGBガマットに制限されており、 HSLの知覚的な制限（色がカラーホイール上で密集している、 また、黄色と青のように視覚的に異なる明度を持つ2つの色が 同じHSL明度を持つ可能性がある）に制約されています。

このニーズを満たすために、color-mix()関数は2つの<color>仕様を取り、 指定された<color-space>で 指定された割合でそれらを混合した結果を返します。

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

3.1. パーセンテージの正規化

パーセンテージは0%から100%の範囲で指定する必要があります。負のパーセンテージは明確に禁止されています。パーセンテージの正規化は以下の通りです：

1. p1 を最初のパーセンテージ、p2 を2番目のパーセンテージとします。

2. 両方のパーセンテージが省略された場合、それぞれ50%（2色を均等に混ぜる）になります。

3. そうでなければ、p2 が省略された場合は 100% - p1 となります。

4. そうでなければ、p1 が省略された場合は 100% - p2 となります。

5. そうでなければ、両方が指定されて合計が100%を超える場合、合計が100%になるようにスケーリングされます。

6. そうでなければ、両方が指定されて合計が100%未満の場合、合計値がアルファ乗算率として保存されます。その後、合計が100%になるようにスケーリングされます。

つまり p1 は p1 / (p1 + p2) となり、p2 は p2 / (p1 + p2) となります。

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.2. color-mixの結果の計算

両方のパーセンテージを正規化した後、結果は以下のアルゴリズムで生成されます：

1. CSS Color 4 § 12. 色補間 で説明されているように、 両方の色は指定された補間<color-space>に変換されます。 この際、類似成分も考慮されます。

2. 色は指定されたカラースペース内で補間されます。詳細は CSS Color 4 § 12. 色補間 を参照してください。 指定されたカラースペースが cylindrical-polar-color 空間の場合、 <hue-interpolation-method> により 色相の補間方法が制御されます。詳細は CSS Color 4 § 12.4 色相補間 を参照してください。 <hue-interpolation-method> が指定されていない場合は、 shorter が指定されたものとして扱います。

3. パーセンテージの正規化でアルファ乗算率が生成されていた場合、補間結果のアルファ成分はこの乗算率で乗算されます。

ミックスの結果は、2番目の色から最初の色への進行の指定されたパーセンテージの位置にある色です。

注: 付随的に、パーセンテージ0%は他方の色を指定カラースペースへ変換したものを返し、100%は同じ色を指定カラースペースへ変換したものを返します。

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

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

3.3. 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);

3.4. color-mixにおけるアルファ値の影響

これまでのcolor-mix()の例では すべて完全に不透明な色を使用していました。 例の簡易化のため、 プレ乗算および逆プレ乗算処理を 省略していました。 これは単に1で掛けて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 欠損成分の補間 と同様に処理されます： 基準カラースペースと相対関数のカラースペース双方で 類似成分を確認し 欠損として引き継ぎます。

多くの場合、相対色構文では 成分キーワードを 対応する引数で使用しますが、 どの位置でも使用できます。

成分を通常の位置以外で使う場合は注意してください。 パーセンテージが数値に変換される際、 その数値が他の位置で使われても 位置の違いによる「自動スケーリング」はありません。

4.2. 相対色構文

各関数で相対色に対応するための 構文の詳細は以下に記載しますが、 全て共通の構造に従います：

• 基準色は 関数の先頭でfrom <color>値として指定できます。 ここでアルファ成分も省略されていなければ含みます。

• 基準色が指定されていない場合、その関数は相対色ではありません。

• 基準色が指定されている場合、 残りの引数は通常通り直接指定するか、 成分キーワードとして 基準色の成分（相対色のカラースペースへ変換済）を参照できます。 数式関数でも これらのキーワードを使い 基準色の成分を動的に修飾できます。

• 相対色構文は 引数が必須か任意かには影響しません。

• 相対色構文は現代的な色構文のみに適用されます。 古い色構文では使えません。使おうとするとエラーです。

• ただし、基準色は 現代構文でも古い構文でも指定できます。

成分キーワードは <number> または none を返します。 元が <percentage> や <angle> で指定されていた場合、その<percentage>は <number>に変換され、 <angle>は度数の <number>（正規単位）として[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);

この例では無彩色の基準色が 色相を欠損していて、 相対色も 色相を欠損しており、 その色を使うグラデーションに影響します。

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) ですが 類似色の色相成分は引き継がれて oklch(0.592 0.009 none) となります。 この値を相対関数で使うことで 暗い色 oklch(0.474 0.009 none) が得られます。

グラデーションの明るい緑は oklch(0.743 0.222 141.6) で、 補間されるともう一方の色もその色相を持ち oklch(0.474 0.009 141.6) になります。

よってグラデーションは一定の緑色系の色相になります。

実装がこの引き継ぎを行わなかった場合、 灰色の --darker-bg は色相0となり、 グラデーションの始端が赤みを帯びてしまいます。

ただし、欠損値に対して計算を行う場合、none は 0として扱われます。

4.3. 相対sRGB色

現代的な色構文の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()および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色相（度単位）に対応します。 必要ならsRGBへの変換後の値で、 [0, 360]範囲に正規化されます。90は90degに相当します。

• sとlは<number>であり、 基準色のHSL彩度・明度に対応します。 必要なら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()関数の文法は以下のように拡張されます：

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

相対色構文のhwb()関数の中で、許可される成分キーワードは以下の通りです：

• hは<number>であり、 基準色のHWB色相（度単位）に対応します。 必要ならsRGBへの変換後の値で、 [0, 360]範囲に正規化されます。90は90degに相当します。

• wとbは<number>であり、 基準色のHWBホワイトネス・ブラックネスに対応します。 必要ならsRGBへの変換後の値です。 100は100%に相当します。

• alphaは<number>であり、 基準色のアルファ透明度に対応します。1.0は100%に相当します。

4.6. 相対Lab色

lab()関数の文法は以下のように拡張されます：

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

相対色構文のlab()関数の中で、許可される成分キーワードは以下の通りです：

• lは<number>であり、 基準色のCIE明度に対応します。 必要なら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()関数の文法は以下のように拡張されます：

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

相対色構文のoklab()関数の中で、許可される成分キーワードは以下の通りです：

• lは<number>であり、 基準色のOklab明度に対応します。 必要なら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()関数の文法は以下のように拡張されます：

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

相対色構文のlch()関数の中で、許可される成分キーワードは以下の通りです：

• lは<number>であり、 基準色のCIE明度に対応します。 必要ならCIE LCHへの変換後の値です。 100は100%に相当します。

• cは<number>であり、 基準色のLCH彩度に対応します。 必要ならCIE LCHへの変換後の値です。 150は100%に相当します。

• hは<number>であり、 基準色のLCH色相（度単位）に対応します。 必要なら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()関数の文法は以下のように拡張されます：

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

相対色構文のoklch()関数の中で、許可される成分キーワードは以下の通りです：

• lは<number>であり、 基準色のOklab明度に対応します。 必要ならOKLChへの変換後の値です。 1.0は100%に相当します。

• cは<number>であり、 基準色のOKLCh彩度に対応します。 必要ならOKLChへの変換後の値です。 0.4は100%に相当します。

• hは<number>であり、 基準色のOKLCh色相（度単位）に対応します。 必要ならOKLChへの変換後の値で、 [0, 360]範囲に正規化されます。90は90degに相当します。

• alphaは<number>であり、 基準色のアルファ透明度に対応します。1.0は100%に相当します。

OKLChは知覚的均一で彩度保持性も高く、 軸が色の分かりやすい属性に対応しているため、 色操作にはOKLChが適しています。

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

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> [ <number> | <percentage> | none ]{3}
<xyz> = xyz | xyz-d50 | xyz-d65

color関数は明示的に指定された色空間で色を指定するためのパラメータを受け取ります。

この関数は、下記で説明する無効な色 または有効な色を表します。

無効な色でない場合はすべて有効な色です。

有効な色であっても、出力デバイス（スクリーン、プロジェクタ、プリンタ）で 再現可能な色域の範囲外である場合があります。 その場合は、その色空間に対してガマット外と言います。

ガマット外の色は成分値が0や0%未満、1や100%超過となります。 これらは無効ではなく、表示のためにガマットマッピングによって 相対色表色意図で0/0%〜1/100%の範囲に収められ、 計算値時に処理されます。

各有効な色は出力デバイス（スクリーン、プリンタなど）のガマット内か ガマット外のいずれかです。

5.1. 相対 color() 関数色

相対色構文のcolor()関数で<custom-params>を使う場合、 許可される成分キーワードの数と名前は：

• 対応するcomponents記述子（@color-profile）で定義されます。 なければ、相対色操作は無効です。これらは<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>が存在しない色空間名（color profile名に一致しない場合や、対応するプロファイルが未ロード・無効な場合）は 無効な色となります。

• 1つ以上の<number>または<percentage>で色空間のパラメータ値を指定します。

  カスタム色空間の場合、 指定した成分値が0や0%未満、1や100%超過でも無効ではありません。 計算値時に有効範囲にクランプされます。 ICCプロファイルは範囲外値を受け付けないためです。

  カスタム色空間で、必要なパラメータ数より多く<number>や<percentage>を指定した場合、 余分な<number>は末尾から無視されます。 色は依然として有効な色です。

  カスタム色空間で、components記述子より多く<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規則が必要です。 これにより名前とプロファイルデータが関連付けられます。

@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規則

@color-profile規則は 色プロファイルを定義・命名し、 後でcolor()関数で色指定に利用できます。

定義は以下の通りです：

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

<dashed-ident>は色プロファイルの名前を指定し、 CSSスタイルシートで利用されます。 また、device-cmykキーワードを使うと、 この色プロファイルが有効なら device-cmyk指定色の解決に用いられます。

@color-profile規則はこの仕様で定義されたディスクリプタを受け付けます。

srcディスクリプタは 色プロファイル情報取得用のURLを指定します。

取得したICCプロファイルが有効となる条件：

• ICCプロファイルとしてパースできること

• Input, Display, Output, または色空間ICCプロファイルであること（Abstract, DeviceLink, NamedColor ICCプロファイルは使用不可）。

プロファイルが無効なら、このプロファイルを参照する全CSS色は 無効な色となります。

外部色プロファイルの取得は、@color-profile規則ruleを受け取り、スタイルリソースの取得をruleのURLで行い、 スタイルシートはruleの親CSSスタイルシート、 destinationは "color-profile"、CORSモードは "cors"、 processResponseはレスポンス|/res|とnull・失敗・ バイトストリームbyteStreamに対して： byteStreamがバイトストリームなら それをパースした色プロファイルを適用します。

注: ICCプロファイルのInternet Media Type（MIMEタイプ）は application/vnd.iccprofileです。

色プロファイルは 「レンダリングインテント」（rendering intents）を持ち、 より小さいガマットへの色のガマットマッピング方法を定義します。 多くの場合プロファイルはインテントを1つのみ持ちますが、複数ある場合は rendering-intentディスクリプタで選択します。

レンダリングインテントは4種類あります [ICC]:

relative-colorimetric

メディア相対色域マッピング（media-relative colorimetric）は、出力媒体ガマット内のソース色を 媒体の白点に対して変更せずに保持することを要求します。出力媒体ガマット外のソース色は、 様々な方法でガマット境界上の色にマッピングされます。

メディア相対色域レンダリングインテントは ブラックポイント補正（black point compensation）と併用されることが多く、 ソース媒体の黒点も出力媒体の黒点にマッピングします。 この方法ではソースの白点を出力の白点にマッピングしなければなりません。 ブラックポイント補正が使われる場合はソース黒点も出力黒点にマッピングされます。 白点変更へ適応するアルゴリズムも使うべきです。 ガマット内の色の相対関係は保持しますが、 ガマット外の色の相対関係は変化することがあります。

absolute-colorimetric

ICC絶対色域マッピング（ICC-absolute colorimetric）は、 出力媒体ガマット内のソース色を採用白（perfect reflecting diffuser）に対して変更せずに保持します。 ガマット外の色はガマット境界にマッピングされます。この方法はガマット内の色のマッチ精度が最も高いですが、 出力媒体白点がソースより低いとハイライトクリッピングが発生します。 そのため、厳密な色マッチが必要かつハイライトクリッピングが問題にならない用途でのみ推奨されます。

この方法では白点・黒点のマッチングを無効化しなければなりません。一般的にテスト以外では推奨されません。

perceptual

この方法は画像用途でよく使われます。ソース画像と出力媒体間で大きな違いがある場合（例：スクリーン画像を印刷物に再現） ソース画像の色を出力媒体向けに再最適化します。プロプライエタリな方法で ソース・出力ガマット両方内の色が変更されることもありますが、 芸術的意図は再現されるべきです。ソース画像の誤り補正は行いません。

注: v2 ICCプロファイルでは 知覚的参照媒体が規定されておらず、 相互運用性の問題が生じることがあります。 v2 ICCプロファイルを使う場合は知覚的インテントよりも ブラックポイント補正付きメディア相対色域インテントが安全です。 特定のプロファイル組み合わせで望む結果になるか確認が必要です。

この方法はターゲットデバイスガマットへのマッピング時に ピクセル間の相対色値を保持します。 ガマット内のピクセル値も変更される場合があり、 色相シフトや不連続・全体的外観の維持のためです。

saturation

このオプションは元の相対彩度（chroma）を維持し、 ソリッドカラーを純粋に保つために作られました。 ただし知覚的インテント同様に相互運用性の問題があり、 v4プロファイルでも解決されません。特定のプロファイル組み合わせで期待通りになる場合のみ推奨です。 このオプションは元のピクセルの相対彩度値を維持するべきです。 ガマット外の色は同じ彩度でガマット内に収めます。

色プロファイルは色空間の成分数を自由に定義できます。 例えばCMYKプロファイルは4成分 cyan, magenta, yellow, black 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 数値定数: e, piで定義されたCSS数値定数と衝突しても、成分自体は有効ですが calc()内では 数値定数が優先され予期しない結果になります。

@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規則はRGB色空間だけに限定されません。 画面は通常RGB色を直接表示しますが、 プリンタは多くの場合CMYKで色を表現します。

シアン・マゼンタ・イエロー・ブラック（CMYK）による4色印刷や、 シアン・マゼンタ・イエロー・ブラック・オレンジ・グリーン・バイオレット（CMYKOGV）など 高忠実度広色域印刷もCSSで行えます。 その場合、使用するインク・用紙・トータルインクカバレッジ・機器に対応する ICCプロファイルが必要です。

@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%にクランプされます。

現代構文では第5引数がアルファ成分を指定します。 rgb()関数の第4引数と同じ扱いです。 省略時は100%になります。

歴史的理由で、device-cmyk()はレガシー色構文もサポートしています。

通常、印刷系アプリケーションは色をCMYKで保持し、 そのままプリンタに送ります。 しかしこうした色には色域的な解釈がなく、 グラデーション・合成・ブレンド等には使えません。

そのため、Device CMYK色は等価な色に変換する必要があります。 これはHSLやHWBからRGBへの変換のように単純ではなく、 出力デバイスの特性によって変換方法が異なります。

1. ユーザー・作者・UAスタイルシートに @color-profileのdevice-cmyk定義があり、 srcディスクリプタのリソースが取得可能で、 有効なCMYK ICCプロファイルであり、 UAが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)
• Alphaは入力色と同じ。

RGBAからCMYKへ単純変換するには：

• black = 1 - max(red, green, blue)
• cyan = (1 - red - black) / (1 - black), または 0 （blackが1の時）
• magenta = (1 - green - black) / (1 - black), または 0 （blackが1の時）
• yellow = (1 - blue - black) / (1 - black), または 0 （blackが1の時）
• alphaは入力色と同じ

7. 使用中のcolor-schemeへの反応：light-dark()関数

システム色は現在のcolor-scheme値に応じて反応できます。 light-dark()関数は 著者にも同様の機能を提供します。

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

この関数は、使用中のcolor schemeがlightまたは不明の場合は 最初の色の計算値に、 使用中のcolor schemeがdarkの場合は 2番目の色の計算値になります。

8. 動的に十分なコントラストを持つテキスト色を指定する：contrast-color()関数

色を動的に生成する場合、背景色に十分なコントラストを持つテキスト色を指定するのは難しいことがあります。 contrast-color()関数は、 指定色を背景色としてテキスト色に使ったときに 十分なコントラストが保証される色を自動的に提供します。

注: 可読性は複雑な課題であり、十分なコントラストはその一要素に過ぎません。 コントラストのある色の組み合わせがあっても、フォント・文字サイズ・周囲の色などさまざまな要因で テキストの可読性が保証されるわけではありません。

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

contrast-color()は、白または黒 のどちらか、入力色を背景にした時に最大コントラストとなる方を返します。 白と黒が同じコントラストの場合は 白になります。

どちらの色を返すかのコントラスト判定アルゴリズムは 現行標準ではUA定義です。

注: 将来の仕様では コントラスト判定アルゴリズムや用途、返される色の制御が強化される予定です。

UAは単純にWCAG 2.1 section 1.4.3 Contrast (Minimum)の判定アルゴリズムだけで 明色・暗色の選択をしないことが推奨されます。既知の問題が複数あるためです。 ただしこの関数の返す色はWCAG 2.1 section 1.4.3 Contrast (Minimum) の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 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65
<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. Resolving <color> Valuesで解決したものとして、 子要素への継承を維持したままになります。

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> 値を拡張し、 color-mix()、 device-cmyk()、 および 相対色関数の結果のシリアライズについて追加します。

このセクションでは、仕様で使われる文字列と対応する文字は次のとおりです。

文字列"."は、ロケールに関係なく 10進区切り文字として使われ、千単位区切りは使いません。

通常通り、 結果のアルファ値がちょうど1なら シリアライズ時に省略します。 暗黙の1（完全不透明）がデフォルトです。

11.1. color-mix()のシリアライズ

color-mix()関数の宣言値のシリアライズは 文字列"color-mix(in "から始まり、 指定された<color-space>をすべて小文字で、 続いて", "、 1つ目の指定色、 スペース、 1つ目のパーセンテージ（下記）、 ", "、 2つ目の指定色、 2つ目のパーセンテージ（下記）、 ")"となります。

color-mix()関数宣言値の1つ目のパーセンテージのシリアライズ：

• 1つ目p1・2つ目p2両方指定の場合：

  • p1=50%、p2=50%なら何もシリアライズしない

  • それ以外はp1をそのままシリアライズ

• 1つ目p1のみ指定の場合：

  • p1=50%なら何もシリアライズしない

  • それ以外はp1をそのままシリアライズ

• 2つ目p2のみ指定の場合：

  • p2=50%なら何もシリアライズしない

  • p2がcalc()でない場合は100%-p2をシリアライズ

  • それ以外は何もシリアライズしない

• 両方未指定の場合：

  • 何もシリアライズしない

color-mix()関数宣言値の2つ目のパーセンテージのシリアライズ：

• p1・p2両方指定の場合：

  • p1・p2ともcalc()でなく、p1+p2=100%なら何もシリアライズしない

  • それ以外はp2をそのままシリアライズ

• 1つ目p1のみ指定の場合：

  • 何もシリアライズしない

• 2つ目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()関数結果のシリアライズは mix内でcurrentColorキーワードが使われているかで異なります。 使われている場合は宣言値としてシリアライズされます。 これにより、colorプロパティ値が異なる子要素でも正しい混色が使えます。 そうでない場合は <color>として CSS Color 4 §  15. シリアライズ <color> 値に従いシリアライズされます。 使用される形式は"in"で指定した色空間によります：

¹

xyzはxyz-d65のエイリアスだからです

往復時の最小精度は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"はrgb()とrgba()に、 "hsl"はhsl()とhsla()に、 "("の後に、 非アルファ成分をスペース区切りで並べる（数値は数値、パーセンテージはパーセンテージ、角度は度単位で正規化、calc()は簡約形）、 クランプせず、 アルファ成分があれば " / "＋アルファ成分（色成分と同様の規則）、 ")"で閉じます。

注: 現代構文かレガシー構文かにかかわらず同じシリアライズ。

2. hwb()、lab()、lch()、oklab()、oklch()の場合：

• 関数名を全て小文字で、 "("の後に、 非アルファ成分をスペース区切りで並べる（数値は数値、パーセンテージはパーセンテージ、角度は度単位で正規化、calc()は簡約形）、クランプせず、 アルファ成分があれば " / "＋アルファ成分（色成分と同様の規則）、 ")"で閉じます。

3. color()の場合：

• "color("の後に 正規化色空間名（"xyz"は"xyz-d65"）を全て小文字で、 スペース、 非アルファ成分をスペース区切りで並べる（数値は数値、パーセンテージはパーセンテージ、角度は度単位で正規化、calc()は簡約形）、クランプせず、 アルファ成分があれば " / "＋アルファ成分（色成分と同様の規則）、 ")"で閉じます。

11.3. 相対色関数のシリアライズ

相対色の宣言値のシリアライズは：

1. rgb()、rgba()、hsl()、hsla()の場合：

• 関数名を全て小文字で、 "(from "＋元色のシリアライズ（入れ子の場合のルールで）、 スペース＋非アルファチャンネル引数（識別子は識別子、数値は数値、パーセンテージはパーセンテージ、角度は度単位で正規化、calc()は簡約形）、 アルファ成分があれば " / "＋アルファ成分（チャンネル引数と同様）、 ")"で閉じます。

2. hwb()、lab()、lch()、oklab()、oklch()の場合：

• 関数名を全て小文字で、 "(from "＋元色のシリアライズ（入れ子の場合のルールで）、 スペース＋非アルファチャンネル引数（識別子は識別子、数値は数値、パーセンテージはパーセンテージ、角度は度単位で正規化、calc()は簡約形）、 アルファ成分があれば " / "＋アルファ成分（チャンネル引数と同様）、 ")"で閉じます。

3. color()の場合：

• "color(from "＋元色のシリアライズ（入れ子の場合のルールで）、 スペース＋正規化色空間名（"xyz"は"xyz-d65"）を全て小文字で、 スペース＋非アルファチャンネル引数（識別子は識別子、数値は数値、パーセンテージはパーセンテージ、角度は度単位で正規化、calc()は簡約形）、 アルファ成分があれば " / "＋アルファ成分（チャンネル引数と同様）、 ")"で閉じます。

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. シリアライズ <color> 値に従う）になります。

使用される形式は 相対色の色空間によります：

往復時の最小精度は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ビット精度で値を往復できるだけの精度が必要です。 これは少なくとも小数点以下2桁を要しますが、 末尾のゼロが省略されている場合もあります。

@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スペース " " を1つ使用します。

成分値の末尾の小数部分のゼロは省略し、 小数部分が全てゼロなら小数点も省略します。

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

device-cmyk()成分値の保持精度、 つまりシリアライズ値の有効数字の桁数は本仕様では定義されませんが、 少なくとも8ビット精度で値を往復できるだけの精度が必要です。 これは少なくとも小数点以下2桁を要しますが、 末尾のゼロが省略されている場合もあります。 値は+∞方向に丸め、切り捨てしません。

アルファ値が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, readonly

name属性の取得時は その規則に定義された色プロファイルのnameの シリアライズを含むCSSOMStringオブジェクトを返します。

src, 型 CSSOMString, readonly

renderingIntent, 型 CSSOMString, readonly

components, 型 CSSOMString, readonly

残りの属性の取得時は その規則に定義されたディスクリプタのシリアライズを含む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. セキュリティに関する考慮事項

この仕様はCSSにオンデマンドのICCプロファイルダウンロード機能を追加します。 これらには実行可能コードは含まれておらず、 セキュリティリスクの増加にはなりません。

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

この仕様に関して新たなプライバシー懸念は報告されていません。

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

この仕様は、ユーザー指定色（動的色を含む）を背景にしたテキストの十分なコントラストを確保する方法を追加します。

17. 変更点

17.1. 2024年2月29日 作業草案以降の変更

• 成分キーワードがnoneおよび数値を返せることを明確化
• 入れ子色関数のシリアライズ例を追加
• WG決議によりcolor-mix()とcalcのエッジケースを定義
• WG決議によりcolor-mix()の「合計ゼロなら無効」記述を削除
• 「color channel」と「color component」の用語統一
• WG決議によりcontrast-color()を簡略化
• premultipliedへのリンクを統一
• 色プロファイル成分の大文字小文字を検証するよう明確化
• contrast-color()をcolor型定義に追加
• アクセシビリティ考慮事項セクションの追加
• FOGRA39, 51, 55への参照追加
• 矩形色空間で<hue-interpolation-method>がエラーになる記述を削除（文法が許さないため）
• 相対色成分キーワードがどの色空間と関係するか明確化
• 相対色の概念的側面と構文的側面を分離
• deltaE表でテキストのコントラストを確保
• 相対色成分はクランプされず、相対アルファのみクランプされることを明確化

17.2. 2022年6月28日 作業草案以降の変更

• CSSOMシリアライズを指定値ではなく宣言値で記述
• contrast-color()関数追加
• color-mix()についてCSS color 4の補間セクションへのリンク追加
• HSLへのガマットマッピング記載の残りを削除
• 絶対色を文法でなく記述で定義
• RCSの各場合についてパーセント→数値変換の参照範囲明記
• 入れ子相対色関数のシリアライズ例明記
• sRGB, hsl()、hwb()はcolor(srgb ...)でシリアライズし往復可能とした
• 抽象にlight-dark()関数を追加
• CSS Color 4から矩形色空間のリストを拡張
• カスタムparams文法修正（カンマ区切り→空白区切り）
• device-cmyk()の文法修正（noneとレガシー構文追加）
• color-mix()がcolor型文法に欠落していたのを追加
• RCSの指定値シリアライズを明確化
• light-dark()関数追加
• color-mixのパーセント正規化アルゴリズム修正（50%エッジケースを含める）
• HSL例をガマットマッピング後のsRGB→HSL変換へ更新
• 一部例の構文強調修正
• RCS基準色にオプションアルファ追加
• 不要なpowerless成分の誤用修正
• パーセント→数値変換の参照範囲使用
• すべての色関数でnumber/percent混在可と明確化
• RCSはmodern color syntaxのみ適用と明確化
• 必要な色空間変換を定義、不要な変換はスキップ可と明確化
• 正しい/不正なグラデーション画像追加
• カスタム色空間で名前なし成分も有効と明確化
• 例を明確化
• RCSの成分不足定義
• 色補間法にdashed-ident追加、カスタム色空間で補間可能に
• RCSのhue成分はdegreeのnumberに解決と明確化
• currentColorが基準色のRCS解決値を定義
• チャンネルキーワードは型1つのみ
• レガシー構文でのRCS誤用例を修正
• 例でシリアライズ統一
• RCSのmissing components定義
• 色補間時のlchとoklch例追加
• RCSはmodern構文のみと明確化
• absolute colorを文法でなく記述で定義
• 色補間空間を定義
• 色プロファイルロードをfetchで定義
• コントラストはD65適応CIE XYZ基準で計算と明記
• oklab/oklch色空間と相対色構文追加
• color-contrast()の解決方法定義
• シリアライズの最小精度明確化
• CIE LCHの意味明記
• 一部例の追加
• color-adjust()削除、相対色構文のみ残す
• color-mix, color-contrast, 相対色構文の結果のシリアライズ定義

17.3. 2022年4月28日 作業草案以降の変更

• rgb()定義のタイプミス修正
• 編集向上（大文字小文字、スペル、明確化）
• 他仕様で参照可能な定義をエクスポート
• color()文法のalphaにnoneを追加
• color-contrast()関数をlevel 6へ移動

17.4. 2021年12月15日 作業草案以降の変更

• color()のパラメータ数超過/不足の許容範囲をカスタム色空間のみへ制限
• RCSでnumber/percentどちらも使用可に変更
• PI等の定数名との成分名衝突可能性を明確化
• 相対色構文がレガシー（カンマ区切り）構文を使わないことを明確化
• rgb()文法の修正（alphaでnoneが選択肢に入っていなかった）
• color-mix()でhslやhwbを使う場合、精度最大化のためcolor(srgb ...)でシリアライズ
• ガマット外color-mix例追加
• HSLやHWBモデルでガマット外色を表現できない場合の表現を明確化
• 一部スペルミス修正

17.5. 2021年6月1日 作業草案以降の変更

• 矩形空間で<hue-interpolation-method>を使うとエラー
• 旧<hue-adjuster>を新<hue-interpolation-method>に変更
• WG決議により@color-profileとdevice-cmykをlevel 5へ移動
• noneを成分名から除外
• OKLCh相対色構文例追加
• 色補間空間定義
• カラー プロファイルのロードをfetchで定義
• コントラストはD65適応CIE XYZ基準で計算と明記
• oklab/oklch色空間追加
• color-contrast())の解決方法明確化
• シリアライズ形式の最小精度明確化
• CIE LCHの意味明記
• いくつか例追加
• color-adjust()削除、相対色構文のみ残す
• color-mix, color-contrast, 相対色構文の結果のシリアライズ定義

17.6. 2020年6月10日FPWD以降の変更

• color()関数の相対色構文追加
• color-adjusterがオプションでないことを明確化
• color-mixのパーセント指定が必須であることを明確化
• hue-adjusterをcolor-mixに戻した
• 異なる混色色空間の例を追加
• color-mix()のパーセント正規化例を追加
• color-mix()で負のパーセントを明示的に除外
• color-mix()でパーセント合計が100%未満の場合、アルファ透明度も100%未満となることを明確化
• 用語を一貫してcolor spaceとし、<color-space>トークンを定義
• color-contrast文法修正
• color-contrast()にオプションの目標コントラスト比追加
• adjuster文法修正
• パーセント合計ゼロの場合のコーナーケース対応を明記
• color-mix()の演算順序明確化
• 例を現行標準の文法に合わせて更新
• パーセントの正規化方法定義
• color-mix()における0%と100%の意味の明確化
• adjustersの定義をcolor-mix()からcolor-adjust()へ移動
• color-mix()の引数の順序を任意に許可
• color-mix()で色空間指定を必須化
• color-mix()のパーセントを色の前に指定可とした
• color-mix()の明示的なアルゴリズム追加
• color-mix()からadjustersを削除し文法を簡略化
• 混色に使う色空間指定のため"in"キーワード追加
• color-contrast()リストは最低2項目必要に
• 相対色構文の説明を改善
• CSS 4の色シリアライズ定義へのリンク追加
• 色空間の独立セクション追加
• color-adjust例更新
• 説明図追加
• 未解決パーセント対応
• color-mixの引数正規化
• adjustersにパーセント指定許可
• リンク修正
• color-mix文法更新、adjusters許可、アルファadjuster追加
• 一部例の修正
• セキュリティ・プライバシーセクション更新
• color-contrastにvsキーワード追加
• xyz adjusterを文法に追加
• hue adjusterキーワード追加
• 混色用にXYZ色空間追加
• color-adjusterと色空間の定義
• mix percentのデフォルトを50%に許容
• ワークド例・図追加
• スペル・文法・フォーマット細部修正
• color-contrast()値の解決セクション追加

17.7. CSS Color 4からの変更点

CSS Color 4と比較して大きな変更点として、 CSSの色がsRGBやdisplay-p3など既定のRGB空間に限定されなくなりました。

これに対応するため、いくつか新機能が追加されています：

1. color() 関数が@color-profile at規則で拡張され、プロファイル化されたデバイス依存色（キャリブレーションCMYK含む）を扱えるようになりました。
2. device-cmyk()関数で、出力デバイス固有のCMYK色空間で非キャリブレーション色を指定可能になりました。

さらに新しいcolor-mix()関数で、 指定した色空間で2色を混色し新しい色を得ることができます。