CSSカラーモジュール レベル5

W3C 作業草案、

この文書の詳細
このバージョン:
https://www.w3.org/TR/2026/WD-css-color-5-20260319/
最新版:
https://www.w3.org/TR/css-color-5/
編集者草案:
https://drafts.csswg.org/css-color-5/
旧バージョン:
履歴:
https://www.w3.org/standards/history/css-color-5/
フィードバック:
CSSWG Issues Repository
編集者:
Chris Lilley (W3C)
Una Kravets (Google)
Lea Verou (招待専門家)
以前の編集者:
Adam Argyle (Google)
この仕様への編集提案:
GitHub Editor
差分仕様:
はい
テストスイート:
https://wpt.fyi/results/css/css-color/

Copyright © 2026 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.

概要

このモジュールはCSS Color [css-color-4]を拡張し、色修正関数、カスタム色空間（ICCプロファイル）、contrast-color()、light-dark()、およびdevice-cmyk()を追加します。

CSSは、構造化文書（HTMLやXMLなど）の 画面上や印刷、その他デバイスでのレンダリングを記述する言語です。

この文書のステータス

このセクションは、本書が公開された時点でのステータスを説明しています。 現在のW3C刊行物一覧および本技術レポートの最新版は W3C規格・草案一覧で確認できます。

この文書は CSS作業グループ により 作業草案 （勧告トラックを使用） として公開されました。 作業草案としての公開は W3Cや加盟組織による支持を意味しません。

これはドラフト文書であり、 今後いつでも更新、差し替え、または廃止される可能性があります。 進行中の作業以外でこの文書を引用することは適切ではありません。

フィードバックは GitHubでissueを投稿（推奨）するか、 件名に “css-color” を含めて（例: “[css-color] …コメント概要…”）ご提出ください。 すべてのissueとコメントはアーカイブされます。 または、アーカイブ付き公開メーリングリスト www-style@w3.org へご送付ください。

この文書は 2025年8月18日版 W3Cプロセス文書に従っています。

この文書は W3C特許ポリシーの下で活動するグループにより作成されました。 W3Cは関連特許の公開リストを 管理しています（グループ成果物に関するもの）。 ページ内には、特許開示の案内も掲載されています。 特許の存在を把握し、その特許が必須クレーム を含むと信じる場合は、 W3C特許ポリシー第6節 に従い情報を開示しなければなりません。

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

絶対色（absolute color） とは、その計算値が絶対的かつ色測定値として解釈できる <color> のことです。 つまり、その値が次のものでないことが条件となります:

また、これらの値はいずれも<color-mix()> の内部や相対色構文には使用できません。

sRGBに解決される（resolve to sRGB） 色は以下の通りです:

従来のカラー構文に対応する（support legacy color syntax） 関数は以下の通りです:

<hsl()>、<hsla()>、<hwb()>、<lch()>、<oklch()>は 円筒極座標カラー表現 であり、<hue>角を用います。 それ以外のカラー関数は 直交座標カラー表現を用います。

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

ウェブ開発者やデザインツール・デザインシステム開発者は コンポーネント配色設計のスケーリング支援に カラー関数をよく利用します。 複数プラットフォームやユーザー環境（UIのダークモード等）が サポートされる設計システムの普及に伴い、 手動で色を設定する必要がなく、 単一のソースからスキームを計算できることが ますます有用になっています。

LC color picker
chloropleth map of the US

上はCIE LCH空間のカラーピッカーです。 ここでは、2色で色スケール （クロマと明度のみが変化、色相は一定）を定義しています。 下は、その色スケールを用いたコーロプレスマップです。

現在はSass、HSL値に対するcalc()、またはPostCSSなどが こうした用途に使われます。 しかしプリプロセッサでは動的に調整された色には対応できず、 すべての現行手法はsRGBガマットおよび HSLの知覚的限界（色相環で色が密集し、 たとえば黄色と青のように 見た目が明るさの異なる色でも HSL上のlightnessが同じになる）に縛られています。

この要求を満たすため、color-mix()関数は 1つ以上の<color>指定のリストを受け取り、 指定色空間<color-space>にて 指定された比率で合成した値を返します。

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

3.1. 合成時カラー空間

色補間法が指定されていない場合はOklabが使われます。 指定されている場合は、そのカラー空間を用いて合成します。

3.2. 割合の正規化

パーセンテージ値は0%から100%までである必要があります。 負のパーセンテージは明確に禁止されています。 割合は配合比率の正規化（normalizing mix percentages）によって正規化されます。

テスト
このさまざまな記法はすべて同等です： 
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%)

すべて purple と plum の lch空間での50%-50%合成結果を生成します： lch(51.51% 52.21 325.8)、これは rgb(68.51% 36.01% 68.29%) です。

ただし、以下のように alpha が1未満の場合、同じ結果ではありません：

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

この場合は lch(51.51% 52.21 325.8 / 0.6) となり、 rgb(68.51% 36.01% 68.29% / 0.6) です。

3.3. color-mixの結果計算

color-mix() を計算するには：

  1. 関数に渡されたmix itemリストから 「強制正規化フラグ」をtrueにした状態で 配合比率を正規化し、 itemsとleftoverを結果とする。

  2. もしleftoverが100%の場合は、 指定された変換先<color-space>で 透明黒を返す。

  3. alpha multを1 - leftoverとする（leftoverを0-1の数値として解釈）。

  4. もしitemsの長さが1なら、 その唯一のアイテムの色を指定補間<color-space>に変換し colorとする。

    そうでない場合：

    1. item stackを itemsを逆順にして作成 （最初の要素がスタックのトップ）

    2. item stack が2つ以上のとき繰り返す:

      1. item stackから2回popし、 a,bとする。 combined percentageをaとbの比率合計とする。

      2. CSS Color 4 §  12. 色の補間法どおりに aとbの色を 進捗比率(bの比率) / combined percentageで 補間する。 指定色空間が円筒極座標色空間の場合は <hue-interpolation-method> も指定されていれば CSS Color 4 § 12.4 色相補間に従う。 未指定の場合はshorterを仮定。

      3. 色が決まり、比率combined percentageのmix itemとして生成し、 stack push。

    3. item stackに残る唯一のカラーをcolorとする。

  5. colorのalpha成分にalpha multを掛ける。

  6. colorを返す。

注: 円筒極座標色空間では 合成順によって結果が異なります。 hueサークル上で“短い方/長い方“の方向は 途中の合成で変化しうるためです。 このアルゴリズムはリスト記述順に順次合成し 結果と次色を混ぜます。 直交座標色空間 では順序の影響はなく、より単純化できます。

テスト
この例は peru 40% ＋ palegoldenrod 60% の合成結果です。 
color-mix(in lch, peru 40%, palegoldenrod)

lch色空間で合成されます。 以下は中立軸L方向を上から見た図です：

2色の混合、その合成結果。 ab平面上にCIE L軸方向から投影しています。 a軸、b軸は原点で交差し、図の中央です。
peruとpalegoldenrodのCIE LCH空間での合成例。 peruの色相角はa軸正方向基準で63.677度、 palegoldenrodは98.834度です。 peruのクロマ（中性軸からの距離）は54.011、 palegoldenrodは31.406です。 合成可能な全ての点はこの曲線上に位置します。40%/60%合成例を示します。

計算は次の通りです：

この例はtealとoliveをlch色空間で合成します。 それぞれのlch値はtealが65%、oliveが35%の値です。

注: 色相・クロマで補間すると中間色も両端と同等の彩度を維持します。

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

2色の混合、その合成結果。 ab平面上にCIE L軸方向から投影しています。 a軸、b軸は原点で交差し、図の中央です。

tealとoliveの合成例。 tealの色相角はa軸正方向基準で196.4524度、 oliveは99.5746度。 tealのクロマは31.6903、 oliveは56.8124。 合成点は破線曲線上。65%/35%例を示します。

計算は次のとおりです：

この例では、2つの割合がともにゼロなので合計もゼロです： 
color-mix(in oklch, teal 0%, olive 0%);

したがって結果はoklch色空間での透明黒になります：
oklch(0% 0 none / 0)

この例では3色を合成し、 割合指定がないため 各色が1/3ずつ最終結果に寄与します。 
color-mix(in oklab, teal, olive, blue);

計算は次の通りです：

3.4. color-mixにおける混色空間の効果

混色のカラー空間の選択は、最終結果に大きな影響を与える場合があります。

この例はホワイトとブラックの50%合成を 3種類のカラースペースでおこなったものです。 
color-mix(in lch, white, black);
color-mix(in xyz, white, black);
color-mix(in srgb, white, black);

計算は次の通りです：

LCHで合成するとL値が50%となり、完全に中間のグレーになります（Labで合成しても同じ、LCHとLabはLightness軸が同じ）。

XYZでの合成結果は明るすぎます。XYZは線形ライトですが知覚的に一様ではありません。 sRGBでの合成結果もやや明るすぎで、sRGBは知覚的にも線形的にも一様ではありません。

この例はレッドとスカイブルーの合成です。 合成はxyzカラースペースで行われ、 レッドが75.23%（スカイブルーが24.77%）の割合となっています。 
color-mix(in xyz, rgb(82.02% 30.21% 35.02%) 75.23%, rgb(5.64% 55.94% 85.31%));

計算は次の通りです：

この例はホワイトとブルーの50%合成を 3種類のカラースペースで行なったものです。

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

計算は次の通りです：

この例は2色の合成であり、 hsl空間で混ぜています。 合成対象の1つがsRGB ガマット外になっています。 
color-mix(in hsl, color(display-p3 0 1 0) 80%, yellow);

計算は次の通りです：

device-cmyk()はcolor-mix()内で利用可能ですが、 計算結果は実装がどのように値を決定するかによって異なります。 
color-mix(in lab, device-cmyk(0.091777 0.043303 0.312816 0.000000) 100%, yellow);

最初の色が100%指定のため、2つ目の色は0%となり、混合結果に影響しません。 よって結果は1つ目の色のCIE Lab値となります。

この結果を可視化すると、 device CMYK値が実際にSWOP 2006 coatedとして印刷出力されると仮定します。

もし実装がICCプロファイルで lab() へ変換する場合、この例ではFOGRA39 Coatedプロファイルを使った場合：

別の実装が単純なカラ―変換アルゴリズム（sRGB値を返すもの）を使ったとすると：

3.5. color-mix における非1.0アルファ（不透明度）の影響

ここまでのcolor-mix()の例は すべて完全に不透明色を対象としています。 サンプルを単純化するために プリマルチプライ処理と逆演算（unpremultiply）処理は省略していますが、 これらは単に1倍・1除算なので結果自体は変わりません。

一般的な場合は 色が非1のアルファ成分を持ち、 プリマルチプライ＞補間＞逆演算各処理を省略できません。

この例は25%半透明レッドと75%半透明グリーンの sRGB混色例です。 プリマルチプライ（正しい） とプリマルチプライしない（誤った）例 の両方をあわせて示しています。 
color-mix(in srgb, rgb(100% 0% 0% / 0.7) 25%, rgb(0% 100% 0% / 0.2));

計算は次の通りです：

誤った計算方法：

この違いは非常に大きいです。両結果のΔE2000は30.7にもなります！

パーセンテージの正規化によりアルファ乗算係数が生成される場合、 最後にもう1つ処理が加わる以外は計算手順は同じです。

この例は前の例と同様ですが、 25%半透明レッド, 75%半透明グリーン（いずれもsRGB混色） です。

ただしこちらは 1色目が20%、2色目が60%指定です。 合計80%で、アルファ乗算係数は0.8となります。

ミックス比率は100/80倍されるため：
20% * 100/80 = 25%
60% * 100/80 = 75%
結局前例と同じ最終合成比となります。

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 欠損成分での補間 と同じ取り扱い： 両方のカラー空間で類似成分が存在すれば それがforward持ち越しされます。

多くの相対カラー構文の用途では 成分キーワードを 当該引数で使いますが、どの位置でも指定可能です。

通常位置以外の成分を用いる際は注意が必要です。 パーセント値が数値へ解決されたとき、 他引数で用いた場合に自動でスケーリングされることはありません。

相対device-cmyk()構文は存在しません。

4.2. 相対カラー構文

各関数が相対カラーを サポートするための構文変更の詳細は下記の通りですが、 いずれも共通した構造に従います：

成分キーワードは <number>または noneを返します。 もともと<percentage>や<angle> として指定されていた場合も <percentage>は <number>に、 <angle>は [0, 360]の範囲の度数<number> （正規単位）になります。

テスト
例えばカラーが<percentage>指定の場合、 同じカラースペースのRCSでは解決済みの<number>形式となります： 
html { --bluegreen:  oklab(54.3% -22.5% -5%); }
.overlay {
  background:  oklab(from var(--bluegreen) calc(1.0 - l) calc(a * 0.8) b);
}

この例では指定されたパーセンテージが数値に変換され oklab(0.543 -0.09 -0.02) になります。 RCSカラーの結果は l = 1 - 0.543 = 0.457、 a = -0.09 * 0.8 = -0.072、 bはそのまま-0.02となり oklab(0.457 -0.072 -0.02) です。

さらに元カラーの色相が <angle> で度指定されている場合 同じスペースのRCSでは解決済みの<number>形式になります： 
html { --base:  oklch(52.6% 0.115 44.6deg) }
.summary {
  background:  oklch(from var(--base) l c  calc(h + 90));
}

この例ではRCSカラーの結果は oklch(0.526 0.115 134.6)。

元色相が <angle>の 別単位（ラジアンやターン）でも 解決値<number>は 度数値になります。

成分キーワードを 数学関数で 使えば元カラーを 高度に操作できます。 
html { --color: green; }
.foo {
  --darker-accent: lch(from var(--color) calc(l / 2) c h);
}

この例では元カラーの 明度を半分にして暗くしていますが、他の成分は変更せず色味はそのままです。

また元カラーは カラーキーワード（sRGB）ですが、 lch()関数で呼び出すため自動的にLCH色に変換されます。

テーマ色が不透明で あるインスタンスだけ部分的に透明にしたい場合： 
html { --bg-color:  blue; }
.overlay {
  background:  rgb(from var(--bg-color) r g b / 80%);
}

この例では元カラーのr,g,b各成分は そのままですが、 キーワードで参照し元カラー値を維持しています。 しかし不透明度だけ80%に指定され、 元カラーのopacityに関わらず少し透明な色になります。

たとえばDisplay P3カラー がsRGBガマット外でも、 クリッピングされず表現できます。 
--vivid-yellow:  color(display-p3 1 1 0); 
--paler-yellow:  color(from var(--vivid-yellow) srgb r g calc(b + 0.5));

ここで--vivid-yellowはsRGBへ変換後も rgb(100% 100% -34.63%) となり負のb値もクランプされません。 RCS計算の結果は rgb(100% 100% 15.37%)

元カラーのalphaが0.7で、それを2倍にしても 結果のalphaは1（1.4にはならない）例： 
--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));

これにより redは rgb(76.5 76.5 76.5)、 limeは rgb(150.45 150.45 150.45)、 blueも rgb(150.45 150.45 150.45)になります。 例えばdarkolivegreen (RGB: rgb(85 107 47)) は rgb(93.8 93.8 93.8)になります。

（簡易なのは、まず見かけは輝度らしいが r/g/b値をリニアではなく ガンマ空間で扱っている点、 また係数が現行sRGBでなく過去NTSC空間のものな点）

（これは構文例の説明用で、 色変換だけなら oklch()で 明度のみ維持・彩度ゼロ oklch(from var(--color) l 0 h)の方が 人間の知覚に即したグレースケールになります）

例えば、

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

ここでalpha成分は <number>で0.6になり、 結果は color(srgb 0.6 0.6 0.6 / 0.9) です。

次の例でもalphaは0.6ですが、 color成分がrgb()構文で0-255範囲なため 色が大きく異なります： 

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

つまり rgb(0.6 153 153 / 0.9) であり、 153のまま rgb(153 153 153 / 0.9)にはなりません。

この例では無彩色の元カラーに 色相が無指定であり、 相対カラーも 色相が無指定（none）となり、 それがグラデーション定義に影響します。 
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) ですが、類似成分の色相はforward持ち越しされ oklch(0.592 0.009 none)となります。 これら値が相対関数で使われ、darker色は oklch(0.474 0.009 none) となります。

グラデの明るい緑色は oklch(0.743 0.222 141.6)なので、補間時には色相がそちらにそろい oklch(0.474 0.009 141.6)となります。

結果としてグラデーションは一貫した緑色寄りの色調になります。

もしこのforward伝播処理がなければ gray系--darker-bgは色相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()関数内で使える 成分キーワードは以下です：

テスト
sRGB色空間での成分操作例： 
rgb(from  indianred 255 g b)

この例はindianredのsRGB値(205 92 92)の赤成分を255で置換し、 rgb(255 92 92) を得ます。

相対sRGBカラー構文は従来のRGB記法ではなく、新構文専用です。

例えばrgbaの 従来カンマ区切り構文を 相対カラーで用いるのは誤りです： 
rgba(from  darkblue 16, 32, b, 0.5 )
代わりに次のように： 
rgb(from  darkblue 16 32 b / 0.5 )

この例はdarkblueのsRGB値(0 0 139)のr, g, αを置換し rgb(16 32 139 / 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() 関数で 使用できる 成分キーワード は次の通りです：

Tests
これにより色相角に180度を加え、補色が得られます。 
--accent:  lightseagreen;
--complement:   hsl(from var(--accent) calc(h + 180) s l);
lightseagreen は hsl(177deg 70% 41%) なので、--complement は hsl(357deg 70% 41%) になります。

相対 HSL カラー構文は従来の 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() 関数で 使用できる 成分キーワード は次の通りです：

Tests

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() 関数で 使用できる 成分キーワード は次の通りです：

ベースカラーの透明度を調整する複数の方法：

lab() は可視領域全体を包含するため、これらの調整はガマットクリッピングが発生せずロスレスです。 一方、sRGB ベースの関数（'rgb()', 'hsl()', 'hwb()' など）のアルファ調整は、 HSL や HWB の計算のために sRGB への変換を伴うため、同様にはならない点に注意してください。

明度を保ったまま完全に彩度を落としてグレーにする例： 
--mycolor:  orchid;
// orchid is lab(62.753 52.460 -34.103)
--mygray:  lab(from var(--mycolor) l 0 0)
// mygray is lab(62.753 0 0) which is rgb(59.515% 59.515% 59.515%)

4.7. 相対 Oklab カラー

Oklab カラーの意味は CSS Color 4 § 9.2 Oklab and OkLCh に定義されています。

oklab() 関数の文法は次のように拡張されます：

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

相対カラー構文内の oklab() 関数で 使用できる 成分キーワード は次の通りです：

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() 関数で 使用できる 成分キーワード は次の通りです：

Tests
lch(from peru calc(l * 0.8) c h) は、 peru（lch(62.2532% 54.0114 63.6769)）より 20% 暗い色を生成し、クロマと色相は変更されません。 結果は lch(49.80256 54.0114 63.6769) です。
これにより色相角に180度を加え、補色が得られます。 
--accent:  lightseagreen;
--complement:   lch(from var(--accent) l c calc(h + 180));
lightseagreen は lch(65.4937 39.4484 190.1013) なので、--complement は lch(65.4937 39.4484 370.1013) です。
明度を保ったまま完全に彩度を落としてグレーにする例： 
--mycolor:  orchid;
// orchid is lch(62.753 62.571 326.973)
--mygray:  lch(from var(--mycolor) l 0 h)
// mygray is lch(62.753 0 326.973) which is rgb(59.515% 59.515% 59.515%)

しかし今度は（色相を保持したので）再彩度化が可能です

--mymuted:  lch(from var(--mygray) l 30 h);
// mymuted is lch(62.753 30 326.973) which is rgb(72.710% 53.293% 71.224%)

ただし、HSL と異なり、LCH での操作は必ずしもガマット内に収まるとは限りません。

この例では、同じ Lightness と Chroma を保ちつつ色相を 120 度ずらした三色組を生成することを目指しています。 元カラーは RGB ガマット内にありますが、LCH で色相を回転するとガマット外の色が生成されます。 
--mycolor:  lch(60% 90 320);
lch(from var(--mycolor) l c calc(h - 120));

これにより非常に高クロマの青緑色が得られ、 lch(60% 90 200) は color(srgb -0.6 0.698 0.772) となり、sRGB ではガマット外（赤値が負）になります。 実際、display-p3 や rec2020 に対してもガマット外になります。

sRGB ガマット内で最も近い色は lch(60.71% 37.56 201.1) であり、 これは rgb(0% 64.2% 66.3%) です。クロマの差（90 ではなく 37.5）は非常に大きいです。

CIE の CH 平面上での相対色操作の図です。 a、b 軸が表記され、中央で交差しています。 中央の Lightness 軸方向を上から見ています。 sRGB 色空間の最大ガマットが不規則で凸な多角形として示されています。

この図は CIE ab 平面における sRGB ガマットを示します。 小さな円は原色・二次色を示し、 大きな円は元カラーでガマット内にありますが、 LCH 色相を -120° 回転させると灰色塗り・赤枠で示されるようにガマット外になります。 ガマットマップされた結果ははるかに低クロマになります。

同じ操作を HSL で行うとガマット内の結果が返りますが、別の不満点があります：

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

HSL では --mycolor は hsl(289.18 93.136% 65.531%) であり、120 度引くと hsl(169.18 93.136% 65.531%) になります。 これを LCH に戻すと lch(89.0345% 49.3503 178.714) となり、 Lightness が 60% から 89% に急上昇し、 Chroma は 90 から 49 に低下し、 色相も実際には 141 度変化しており、期待した 120 度とは異なります。

4.9. 相対 OkLCh カラー

OkLCh カラーの意味は CSS Color 4 § 9.2 Oklab and OkLCh に定義されています。

The grammar of the oklch() function is extended as follows:

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

相対カラー構文（relative color）の oklch() 関数で使用可能な 成分キーワード は以下の通りです：

Tests

OkLCh は知覚的に一様でかつクロマを保持するため、 軸が色の属性を直感的に表すこともあり、 色操作には OkLCh が適しています。

In this example, the aim is again to produce a new color with the same Lightness and Chroma, but the triad (hue differs by 120 degrees). In this example, we will do the manipulation in OkLCh. The origin color is inside the RGB gamut, but rotating the hue in OkLCh again produces an out of gamut color. 
--mycolor:  lch(60% 90 320);
oklch(from var(--mycolor) l c calc(h - 120));

--mycolor は oklch(0.69012 0.25077 319.893) です。 色相を 120 減じると非常に高クロマの青緑になり、 oklch(0.69012 0.25077 199.893) は sRGB ガマット外となり、 color(srgb -0.6018 0.7621 0.8448) と表されます（負の赤成分が示すとおり）。 これをガマット内に収めるには OkLCh のクロマを下げるとよく、 oklch(0.69012 0.1173 199.893) のようになります。 OkLCh のクロマは 0.251 から 0.117 に低下しました。

4.10. 相対アルファカラー

相対アルファカラーは元カラーを参照し、アルファチャネルのみを変更します。 アルファチャネルの意味は CSS Color 4 § 4.2 Representing Transparency in Colors: the <alpha-value> syntax に定義されています。

このレベルで新たに導入された alpha() 関数の文法は次のとおりです：

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

相対カラー構文（relative color）の alpha() 関数で使用可能な 成分キーワード は次の通りです：

元カラー（origin color）の色成分は変更されず、 アルファ成分のみが修正または置換されます。 この関数の結果は元カラーのカラースペースに属します。

例えばここでは結果は元カラーと同じですが、 アルファが 80% に変更されています。 
--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() 関数

The color() function allows a color to be specified in a particular, given color space (rather than the implicit sRGB color space that most of the other color functions operate in).

In this level the color() function is extended to allow custom color spaces, in addition to the predefined spaces from CSS Color 4 §  10. Predefined Color Spaces.

It is also extended to allow relative, rather than just absolute, colors.

Its syntax is now as follows:

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}

The color function takes parameters specifying a color, in an explicitly listed color space.

It represents either an invalid color, as described below, or a valid color.

Any color which is not an invalid color is a valid color.

A color may be a valid color but still be outside the range of colors that can be produced by an output device (a screen, projector, or printer). It is said to be out of gamut for that color space.

An out of gamut color has component values less than 0 or 0%, or greater than 1 or 100%. These are not invalid; instead, for display, they are gamut-mapped using a relative colorimetric intent which brings the values within the range 0/0% to 1/100% at computed-value time.

Each valid color is either in-gamut for the output device (screen, or printer), or it is out of gamut.

5.1. 相対カラーファンクションの色

相対カラー構文（relative color）の color() 関数で <custom-params> を使用する場合、 許可される 成分キーワード の数と名前は次のとおりです：

相対カラー構文の color() 関数で <predefined-rgb-params> を使用する場合、 許可される 成分キーワード は以下の通りです：

相対カラー構文の color() 関数で <xyz-params> を使用する場合、 許可される 成分キーワード は以下の通りです：

相対カラー構文の color() 関数で <predefined-rgb-params> または <xyz-params> を使用する場合、追加で許可される 成分キーワード は次のとおりです：

パラメータは次の形式を取ります：

Tests
例えば、CIE XYZ D65 色空間での相対カラー構文を使い、 基本色と同じ色度を持ちつつ輝度だけをちょうど半分にした色を生成する例： 
--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));

元カラーは color(xyz-d65 0.281 0.253 0.044) であるため、 相対色は color(xyz-d65 0.14 0.126 0.022) となります。

5.2. カスタム色空間

CSS では 色 をカラープロファイルに参照して指定できます。 例えばキャリブレートされた CMYK 印刷機や RGB 色空間、あるいは特性評価された他のカラー/モノクロ出力装置などが該当します。

この例では 4 つのキャリブレート色を指定します： うち 2 つはカスタム空間（SWOP 製本の CMYK プレス用と広ガマットの 7 インク印刷機用）、 残り 2 つは定義済み空間（ProPhoto RGB と display-p3 RGB）です。 いずれの場合も数値パラメータは 0.0 から 1.0 の範囲です（例: 0〜255 ではありません）。 
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. Predefined Color Spaces と区別され、<dashed-ident> を使って示されます。 また、名前とプロファイルデータを結び付けるために、 スタイルシート内のどこかに対応する @color-profile ルールが必要です。

Tests 
@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

The @color-profile ルールは、 後で color() 関数で色を指定するために使用できる カラープロファイル を定義し命名します。

定義は次のとおりです：

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

<dashed-ident> は スタイルシート内で使用される カラープロファイル の名前を与えます。 あるいは device-cmyk キーワードは、 このカラープロファイルが有効であれば device-cmyk で指定された色を解決するために使用されることを意味します。

@color-profile ルールは本仕様で定義されたディスクリプタを受け入れます。

Name: src
For: @color-profile
Value: <url>
Initial: n/a

src ディスクリプタはカラープロファイル情報を取得する URL を指定します。

同じ名前で複数の @color-profile ルールが定義されている場合、 文書内の順序で最後のものが有効となり、それ以前のすべては無視されます。

取得された ICC プロファイルが有効であるのは次のときです

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

外部カラープロファイルを取得する（fetch an external color profile）には、 @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 です。

Name: rendering-intent
For: @color-profile
Value: relative-colorimetric | absolute-colorimetric | perceptual | saturation
Initial: relative-colorimetric

カラープロファイル は 小さなガマットに対してその色をどのように ガマットマップ するかを定義する「レンダリングインテント」を含みます。 プロファイルはしばしば単一のインテントのみを含みますが、複数ある場合は rendering-intent ディスクリプタでそのうちの一つを選択します。

4 種類のレンダリングインテントは [ICC] に準拠します：

relative-colorimetric
メディア相対カラー・カラーメトリックは、送信元の色が 出力先媒体のガマット内に収まる場合は、各媒体の白点に対して相対的にそのまま保持することを要求します。 出力先ガマット外の送信元色は、さまざまな手法を用いてガマット境界上の色へマップされます。

メディア相対カラーメトリックレンダリングインテントは黒点補正（black point compensation）と共に用いられることが多く、 その場合は送信元媒体の黒点も出力先媒体の黒点にマップされます。 この手法は送信元白点を出力先白点へマッピングすべきです。もし黒点補正を使用するならば、 送信元黒点も出力先黒点へマップされなければなりません。白点の変化に対応するために適応アルゴリズムを用いるべきです。 送信元および出力先両方のガマット内にある色の相対的関係は保持されるべきです。 出力先ガマット外の色の相対関係は変更される可能性があります。

absolute-colorimetric
ICC 絶対カラーメトリックは、送信元の色が出力先媒体のガマット内に収まる場合、 採用された白（完全拡散反射体）に対して相対的にそのまま保持することを要求します。 出力先ガマット外の送信元色は、さまざまな手法を用いてガマット境界上の色へマップされます。 この方法はガマット内の色の一致を最も正確にしますが、 出力先媒体の白点が送信元より低い場合にはハイライトのクリッピングを招きます。 そのため、この方法は正確な色合わせが必要でハイライトクリッピングが問題にならない用途に限定して推奨されます。

この方法は色変換時に白点マッチングと黒点マッチングを無効にしなければなりません。 一般に、このオプションはテスト目的を除き推奨されません。

perceptual
この方法は特に送信元と出力先に大きな差がある場合（画面表示を反射印刷で再現する等）に、 画像に対して好まれる選択であることが多いです。送信元画像の色を取り出し、 出力先媒体向けに外観を再最適化します（非公開の手法を含む可能性があります）。 この再最適化により、送信元および出力先ガマット内にある色も変更されることがあり得ますが、 知覚変換は再現で元の芸術的意図を維持するように設計されます。送信元のエラーを修正しようとはしません。

注: v2 ICC プロファイルには知覚的参照媒体が指定されていないため、 相互運用性の問題を引き起こすことがあります。v2 プロファイルを使用する場合は、 特定の送信元および出力先プロファイルの組み合わせが望ましい結果を生むことを確認していない限り、 知覚的インテントの代わりに黒点補正付きのメディア相対カラーメトリックを使用した方が安全な場合があります。

この方法はピクセル間の相対的な色値をターゲットデバイスガマットへマップする際に維持するべきです。 この方法は、色相のシフトや不連続性を避け、シーンの全体的外観を可能な限り維持するために、 元々ターゲットデバイスのガマット内にあったピクセル値を変更することがあります。

saturation
このオプションは元の相対的彩度（クロマ）を保持し、面の色を純色として保つために作られました。 しかし知覚的インテントと同様に相互運用性の問題を抱えており、 面色保持が参照媒体ソリューションに適さないため v4 プロファイルを使っても問題は解決しません。 このレンダリングインテントの使用は、使用する特定の送信元・出力先プロファイルの組み合わせが 望ましい結果を生むことを確認している場合に限り推奨されます。 このオプションは元ピクセルの相対的彩度（クロマ）値を保持するべきです。ガマット外の色は、 同じ彩度を持ちつつガマット内にわずかに収まる色へ変換されるべきです。
Name: components
For: @color-profile
Value: <ident>#
Initial: n/a

カラープロファイルは可変数の成分を含む色空間を定義できます。 例えばシアン・マゼンタ・イエロー・ブラック（CMYK）プロファイルは 4 つの成分 c, m, y, k を持ちます。 一方、4 成分の加法スクリーンプロファイルは r, g, y, b などの 4 成分を用いるかもしれません。

このディスクリプタの値はカンマ区切りの <ident> トークンのリストです。 各 <ident> はコンポーネント名を示し、 その順序がカラープロファイルで使われる順序を表し、 トークンの総数が成分数を定義します。

このディスクリプタは cyan, magenta, yellow, black の 4 成分を宣言します： 
components: cyan, magenta, yellow, black
より簡潔な名前を選ぶこともできます： 
components: c,m,y,k
このディスクリプタは cyan, magenta, yellow, black, orange, green, violet の 7 成分を宣言します： 
components: cyan, magenta, yellow, black, orange, green, violet

もしコンポーネント名が ASCII 大文字小文字を区別しない 一致で none と一致する場合、 そのディスクリプタは無効です。これは欠損値を表すトークンと衝突するためです。

もしコンポーネント名に CSS の数値定数（CSS Values 4 § 10.7.1 Numeric Constants: e, pi で定義）の名前が衝突する場合でも、 コンポーネント自体は有効ですが、 calc() 内ではそのコンポーネント名は数値定数によりシャドウされ、 予期せぬ結果を生む可能性があります。

このディスクリプタは不用意にコンポーネント名を pi と呼んでおり、 相対カラー構文で予期しない結果を招きます。 
@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));

ここでは --accent のコンポーネント値は 35%、 3.14159265358979 * 2 = 6.28318530717959、 4% となります。

5.4. CSS と印刷: キャリブレートされた CMYK やその他の印刷色空間の使用

@color-profile at-rule は RGB 色空間に限定されません。 画面は通常 RGB で色を直接表示しますが、 印刷ではしばしば CMYK で色を表現します。

シアン・マゼンタ・イエロー・ブラック（CMYK）によるキャリブレートされた 4 色印刷や、 追加インク（CMYKOGV のような）を用いた高忠実度の広ガマット印刷も CSS で可能です。 ただしそのためには使用するインク、紙、総インク量、機器の組み合わせに対応する ICC プロファイルが必要です。

例えば、FOGRA39 の特性データを用い、 115gsm コート紙上で総インク量 300% の ISO 12647-2:2004 / Amd 1:2007 によるオフセット印刷を行う場合の例です [FOGRA39]。 
@color-profile --fogra39 {
  src: url('https://example.org/Coated_Fogra39L_VIGC_300.icc');
}
.header {
  background-color:   color(--fogra39 0% 70% 20% 0%);
  }

ここでは color() 関数はまずプロファイルに付けた名前を示し、 次にシアン、マゼンタ、イエロー、ブラックのパーセンテージを与えます。

このプロファイルでは、この値は lab(63.673303% 51.576902 5.811058) に解決され、 rgb(93.124, 44.098% 57.491%) になります。

与えられた CMYK 組合せから得られる実際の色が既知であるため、 印刷出力の画面上での可視化（ソフトプルーフ）が可能です。

また、色を知ることに依存する処理（アンチエイリアス、合成、グラデーションでの色使用など）は通常どおり実行できます。

A grid of colored squares. There are six columns, labelled A to F, and four rows, labelled 1 to 4.

カラーチェッカー（色補正用チャート）は印刷・写真業界で色忠実度を確保するために使われます。 各パッチに対する平均測定された Lab 値が利用可能です。 長方形は Lab 値を sRGB に変換したものを示します。 ほとんど見えない丸は Lab 値を FOGRA51 [FOGRA51] ICC プロファイルに通して CMYK に変換した結果を示しています。 それらの CMYK 値を同じ ICC プロファイルで逆にパスし、新しい Lab 値を得て、これを sRGB に変換して表示しています。

最も目立つ丸があるパッチ（3 行目、1 列目）は、 その色が使用した FOGRA51 CMYK 空間のガマット外にわずかにあるためです。

下の表は各パッチについて、元の Lab と CMYK を経由してラウンドトリップした後の Lab 値との DeltaE 2000 を示します。 DeltaE 2000 が 1 以上だと人間に識別可能です。

A B C D E F
1 0.06 0.07 0.03 0.04 0.06 0.17
2 0.03 0.75 0.05 0.06 0.03 0.02
3 1.9 0.04 0.06 0.05 0.02 0.05
4 0.03 0.08 0.03 0.03 0.04 0.80
この例は CGATS/SWOP TR005 2007 の特性データを使用し、 grade 5 紙上で総インク量 300%、 中程度のグレイ成分置換（GCR）を適用した ISO 12647-2:2004 によるオフセット印刷の例です。 
@color-profile --swop5c {
  src: url('https://example.org/SWOP2006_Coated5v2.icc');
}
.header {
  background-color:   color(--swop5c 0% 70% 20% 0%);
}

このプロファイルでは、この量の CMYK（前の例と同じパーセンテージ）は lab(64.965217% 52.119710 5.406966) に解決され、 rgb(94.903% 45.248% 59.104%) となります。

フォールバック色は例えばメディアクエリを使って指定でき、 指定した CMYK 色が sRGB ガマット外であることがわかっている場合に使用されます。

この例は前と同じ FOGRA39 設定を使用しますが、 sRGB ガマット外の明るい緑色を指定しています。 ただし display-p3 ガマット内には収まります。 したがってワイドガマット画面と印刷ではそのまま表示され、 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%);
    }
}

この CMYK 色は lab(56.596645% -58.995875 28.072154) または lch(56.596645% 65.33421077211648 154.5533771086801) に対応します。sRGB ではこれは rgb(-60.568% 62.558% 32.390%) となり、 大きな負の赤成分が示すとおりガマット外です。

結果がガマット内に入るまでクロマを下げると lch(56.596645% 51 154.5533771086801) となり、これは rgb(8.154% 60.9704% 37.184%) です。これが手動で指定したフォールバック色です。

ワイドガマット画面では、この色は display-p3 ガマット内にあり (display-p3(0.1658 0.6147 0.3533) になります)。

色は 4 色インク（CMYK）に限定されません。例えば広ガマットの 7 色インクセットも使用できます。

This example uses the beta FOGRA55 dataset [FOGRA55] for CMYKOGV seven-color printing. Four of the inks - black, cyan, magenta, and yellow - are the same as, and give the same results as, the FOGRA51 set. The other three inks are:

The measurement condition is M1, which means that optical brighteners in the paper are accounted for and the spectrophotometer has no UV-cut filter.

@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%の百分率で表せます。 これら2つの使い方は等価で、相互に線形に対応します。 0や0%未満、1や100%を超える値は無効ではなく、 計算値の段階で0/0%または1/100%に丸められます。

最新構文では、5番目の引数がカラーのアルファ成分を指定します。 これはrgb()関数の4番目の引数と同様に解釈されます。 省略された場合は、デフォルトで100%となります。

歴史的理由により、 device-cmyk()はレガシーカラー構文もサポートします。

通常、印刷ベースのアプリケーションは実際に使用する色をCMYKで保存し、 そのままプリンターに渡します。 しかしながら、こうした色は測色値が決まっていないため、 グラデーションや合成、ブレンドなどには使えません。

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

  1. ユーザー、著者もしくはユーザーエージェントのスタイルシートに @color-profileによるdevice-cmykの定義があり、 src記述子で指定されたリソースを取得でき、 そのリソースが有効なCMYK ICCプロファイルであり、 ユーザーエージェントがICCプロファイルを処理できる場合、 device-cmyk()関数の算出値はCMYK色のLab値となります。
  2. そうでない場合、 device-cmyk()関数の算出値は、 以下の単純変換アルゴリズムで変換されたCMYK色のsRGB値となります。
例えば、@color-profileが存在しない場合、 次の色は単純変換を使い等価となります。 
color:  device-cmyk(0 81% 81% 30%);
color:  rgb(178 34 34);
color:  firebrick;
@color-profileが例のスタイルシートに指定されている場合、 次の色は測色変換によって等価になります。 
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列（A〜F）、 4行（1〜4）で構成されています。

印刷・写真業界で色忠実性を保証するためのカラーチェッカー。 各パッチにはLab値の平均測定値が利用可能です。 長方形はLab値をsRGBに変換したもの。 円はICCプロファイルを通じてCMYKに変換し、 そのCMYK値を単純にsRGBへ再変換したものです。

下表は各パッチについて、CMYKを経てラウンドトリップした後のLab値と元のLab値のDeltaE 2000を示します。DeltaE 2000が1以上では僅かに知覚できる違い、5以上では全く異なる色です。

A B C D E F
1 11.33 9.36 5.66 7.52 12.39 21.58
2 6.40 8.79 11.77 17.16 11.91 3.97
3 12.1 17.00 3.38 1.94 18.08 14.97
4 1.89 6.56 7.85 8.76 9.82 10.29

6.1. 未補正CMYKとsRGBベース色の単純変換

CMYKからRGBAへの単純変換手順：

RGBAからCMYKへの単純変換手順：

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

システムカラーは現在使用中のcolor-scheme値に応じて変化する機能を持ちます。 light-dark()関数は、この能力を制作者側にも提供します。

この関数には2つの形式があります。一つは色のペア、もう一つは画像のペアを受け取ります。

light-dark() =  light-dark( [<color>, <color>] | [<image>, <image>])

色形式の場合、この関数は使用中のカラースキームがlightまたは不明な場合は1つ目の色の計算値に、 使用中のカラースキームがdarkの場合は2つ目の色の計算値に評価されます。

画像形式の場合、この関数は使用中のカラースキームがlightまたは不明な場合は1つ目の画像を、 使用中のカラースキームがdarkの場合は2つ目の画像を返します。

例えば、リンクのコントラストをライトモードとダークモードの両方で可読に保つ場合： 
  a:link {
      color: light-dark(blue, #81D9FE);
      background-color: light-dark(white, black);
}

従来の青いリンクテキストは 白い背景では可読性が高いです （WCAGコントラスト8.59:1、AAA合格）が、 黒い背景では可読性が低くなります （WCAGコントラスト2.44:1、AA不合格）。 その代わり、ダークモードではより明るい青#81D9FE が使われます （WCAGコントラスト13.28:1、AAA合格）。

可読なリンクテキスト

不可読なリンクテキスト

可読なリンクテキスト

例えば、ライトモードとダークモードの両方で見やすいリストの箇条書き記号を提供するには： 
ul.fancy {
    list-style-image: light-dark(
    url("icons/deep-maroon-ball.png"),
    url("icons/pale-yellow-star.png")
  );
}
Tests

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

色を動的に生成する際、背景色として用いた時に十分なコントラストのテキスト色を指定するのはしばしば困難です。 contrast-color()関数は、指定した背景色上でテキスト色として使用する場合に 必ず十分なコントラストを持つ色を自動的に返します。

注記: 可読性は複雑なテーマであり、適切な色コントラストは要件の一部でしかありません。 コントラストのある色の組み合わせでも、テキストが読みやすいとは限らず、 フォントやテキストサイズ、周囲の色など様々な要素に依存します。

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

contrast-color()は、whiteとblackのいずれか、 テキストとして最大の色コントラストを持つ方の色に解決されます。 white、 blackのどちらも同じコントラストの場合は whiteとなります。

どちらの色を返すかを決める厳密なコントラストアルゴリズムは現時点ではUA定義です。

注記: 将来の仕様では、 コントラストアルゴリズムや用途、返される色について更なる制御が導入される予定です。

UAsは、単にWCAG 2.1のセクション1.4.3（コントラスト、最低限）の コントラスト比アルゴリズムのみで判定しないよう推奨されます。これは既知の問題があるためです。 それでもこの関数で返される色は、WCAG 2.1セクション1.4.3（コントラスト、最低限）の AA大きなテキスト基準は満たすべきです。多くの著者は法的要求によってこれを満たす必要があります。

Tests

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-mix()関数となり、 各<color>パラメータは CSS Color 4 §  14. Resolving <color> Valuesに従って解決され、 子要素への継承が保持されます。

Tests

10.2. 相対カラ―構文値の解決

すべての<color>パラメータが それぞれのカラースペースの対応する色へ解決される場合、 計算値は指定されたRCSカラースペースでの絶対<color> 値となり、 CSS Color 4 §  14. Resolving <color> Valuesに従って解決されます。

Tests

それ以外（関数内でcurrentColorが使われている場合）は、 計算値は相対カラ―構文関数となり、 originの<color>パラメータはCSS Color 4 §  14. Resolving <color> Valuesに従い解決され、 子要素への継承が保持されます。

Tests

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)

となり、実装がICCプロファイルを理解かつ 適切なプロファイルを備えていれば、使用値は

 lab(63.673% 51.577 5.811)

注記: 他の色と同様に、使用値はスクリプトから取得できません。

11. シリアル化

このセクションは、CSS Color 4 §  15. Serializing <color> Values を拡張し、 color-mix()、 device-cmyk()、 および 相対カラー関数の 結果のシリアル化を追加します。

本節では、仕様で用いられる文字列と対応する文字は以下の通りです。

String Character
" " U+0020 SPACE
"," U+002C COMMA
"-" U+002D HYPHEN-MINUS
"." U+002E FULL STOP
"/" U+002F SOLIDUS

小数点にはピリオド " . " を使い、 ロケールに関係なく、かつ千単位区切りはなしとします。

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

11.1. color-mix()のシリアル化

color-mix()関数の宣言値のシリアル化は、 文字列 "color-mix(in "、 指定された<color-space>（小文字）、 ", "、 最初の指定色、 スペース、 最初のパーセンテージのシリアル化（後述）、 ", "、 2色目の指定色、 2色目のパーセンテージのシリアル化（後述）、 ")" の順になります。

最初のパーセンテージのシリアル化方法：

2番目のパーセンテージのシリアル化方法：

注記: calc()値は 未知値扱いであり、 絶対に50%にはならず、 他の値と合算して100%に達することもありません。

例えば、次の宣言値のシリアル化結果は 
color-mix(in oklab, teal, peru 40%)
文字列 "color-mix(in oklab, teal 60%, peru)" となります。

次の宣言値のシリアル化結果は

color-mix(in oklab, teal 50%, peru 50%)
文字列 "color-mix(in oklab, teal, peru)" となります。

次の宣言値のシリアル化結果は

color-mix(in oklab, teal 70%, peru 70%)
文字列 "color-mix(in oklab, teal 70%, peru 70%)" となります。なぜなら、これらが50%ずつに正規化されることは パーセンテージの正規化後に初めて分かるためです。

color-mix()関数の 結果のシリアル化は、混色内でcurrentColorキーワードが使われているかで変わります。 使われている場合、宣言値としてシリアル化されます。 これにより、colorプロパティが異なる値を持つ 子要素でも正しい合成色が使えます。 それ以外は <color>となり、 CSS Color 4 §  15. Serializing <color> Valuesに定義された形式になります。 書式は、"in"で指定されたカラースペースにより異なります：

mixing color space form
srgb color(srgb r g b)
srgb-linear color(srgb-linear r g b)
display-p3 color(display-p3 r g b)
a98-rgb color(a98-rgb r g b)
prophoto-rgb color(prophoto-rgb r g b)
rec2020 color(rec2020 r g b)
hsl color(srgb r g b)
hwb color(srgb r g b)
xyz-d65 color(xyz-d65 x y z)
xyz-d50 color(xyz-d50 x y z)
xyz color(xyz-d65 x y z) ¹
lab lab(l a b)
lch lch(l c h)
oklab oklab(l a b)
oklch oklch(l c h)
¹
xyzは xyz-d65のエイリアスであるため
Tests

ラウンドトリップの最小精度は CSS Color 4 §  15. Serializing <color> Valuesで規定されるものと同じです。

この色混合の結果は 
color-mix(in lch, peru 40%, palegoldenrod)
シリアル化結果は "lch(79.7256 40.448 84.771)" となります。一方、 
color-mix(in srgb, peru 40%, palegoldenrod)
の結果は "color(srgb 0.8816 0.7545 0.4988)" としてシリアル化されます。

11.2. 元色のシリアル化

他のカラ―関数の中で 元色として コンポーネントに使われる色の宣言値の シリアル化方法は以下の通りです：

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

注: モダン構文・レガシー構文問わず同じシリアル化です。

  1. hwb(), lab(), lch(), oklab(), oklch()の場合：

  1. color()の場合：

11.3. 相対カラ―関数のシリアル化

相対カラ―の宣言値のシリアル化は次の通り：

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

  1. hwb(), lab(), lch(), oklab(), oklch()の場合：

  1. color()の場合：

例：次の宣言値のシリアル化は 
OkLcH(from peru  l    c  h)

→ 文字列 "oklch(from peru l c h)"

例：次の宣言値のシリアル化は 
rgb(from red calc(r / 2) g calc(30%));

→ 文字列 "rgb(from red calc(0.5 * r) g calc(30%))" 計算値のシリアル化は "color(srgb 0.5 0 0.3)"

例：次の宣言値のシリアル化は 
hsl(from hsl(none 10% 50%) h s l);

→ 文字列 "hsl(from hsl(none 10% 50%) h s l)" 計算値は "color(srgb 0.55 0.45 0.45)"

例：次の宣言値のシリアル化は 
hsl(from hsl(127.9 302% 25.33%) h s l);

→ 文字列 "hsl(from hsl(127.9 302% 25.33%) h s l)" 計算値のシリアル化は "color(srgb -0.511666 1.018266 -0.310225)"

次のHTML（colorプロパティ設定有り）に対し： 
<div id="example" 
  style="background-color: rgb(from currentcolor r g calc(b / 2)); 
  color: blue;">
</div>

background-colorの宣言値のシリアル化は "rgb(from currentcolor r g calc(b / 2))" 計算値のシリアル化は "color(srgb 0 0 0.5)"

相対カラー関数のシリアル化結果は currentColorが元色かによって異なります。 そうなら宣言値としてシリアル化し、このおかげで color値の違う子でも正しい値が使えます。 それ以外は解決値（<color>） （CSS Color 4 §  15. Serializing <color> Values準拠）となります。

書式は相対カラーの色空間によります：

mixing color space form
srgb color(srgb r g b)
srgb-linear color(srgb-linear r g b)
display-p3 color(display-p3 r g b)
a98-rgb color(a98-rgb r g b)
prophoto-rgb color(prophoto-rgb r g b)
rec2020 color(rec2020 r g b)
hsl color(srgb r g b)
hwb color(srgb r g b)
xyz-d65 color(xyz-d65 x y z)
xyz-d50 color(xyz-d50 x y z)
xyz color(xyz-d65 x y z)
lab lab(l a b)
lch lch(l c h)
oklab oklab(l a b)
oklch oklch(l c h)
Tests

ラウンドトリップの最小精度は CSS Color 4 § 15.5 color() 関数の値のシリアル化

次をシリアル化した結果は 
lch(from peru calc(l * 0.8) calc(c * 0.7) calc(h + 180))
下記の文字列となります： "lch(49.80224 37.80819 243.6803)"

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%);
    }

→ 文字列 "color(--swop5c 0 0.7 0.2 0)"

11.5. device-cmyk値のシリアル化

device-cmyk()値の シリアル化形式は 計算値にもとづき、 関数名は小文字でdevice-cmyk()形式を使います。

各成分値は10進数で <number>としてシリアル化します。 コンポーネント間は ASCIIのスペース" "で区切ります。

各成分値の末尾の小数点以下が全てゼロの場合はそれを省略し、 小数点以下全ゼロなら小数点自体も省略します。

この色のシリアル化値：

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

→ 文字列 "device-cmyk(0 0.81 0.81 0.3)"

device-cmyk()成分値の保持精度（有効桁数）は この仕様では定義されませんが、 8ビット精度でラウンドトリップ可能な 少なくとも2桁（末尾ゼロ除く）の小数が必要です。 +∞方向に丸め、切り捨て不可。

アルファ値が1の場合は明示的にシリアル化せず、 1でない場合は明示的にシリアル化し、 その場合" / " （スペース・スラッシュ・スペース） で黒（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 属性を取得した場合、 関連付けられた規則で定義されたカラープロファイルの name のシリアル化を含む CSSOMString オブジェクトを返さなければなりません。
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) {
  // naively convert an array of CMYK values
  // to 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. 2026年1月13日ワーキングドラフト以降

18.2. 2025年3月18日ワーキングドラフト以降

18.3. 2024年2月29日ワーキングドラフト以降

18.4. 2022年6月28日ワーキングドラフト以降

18.5. 2022年4月28日ワーキングドラフト以降

18.6. 2021年12月15日ワーキングドラフト以降

18.7. 2021年6月1日ワーキングドラフト以降

18.8. 2020年6月10日FPWD以降

18.9. CSS Color 4からの変更点

CSS Color 4と比べて大きな変更点は、 CSSの色が sRGBやdisplay-p3などのプリセットRGB空間だけに制限されなくなったことです。

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

  1. color() 関数が@color-profile 規則により拡張され、校正済みCMYKなどプロファイル管理のデバイス依存色対応可能に。
  2. device-cmyk() 関数追加により、出力デバイス依存CMYK色（未キャリブレーション）を指定可能

これに加え、新しいcolor-mix() 関数で、指定カラースペースで2色を混ぜて新しい色を作れます。

適合性

文書の慣例

適合性要件は、記述的な主張と RFC 2119 用語の組み合わせで表現されています。規範部分にあるキーワード “MUST”、 “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, および “OPTIONAL” は RFC 2119 の説明に従って解釈されます。 ただし、可読性のために、これらの語は本仕様では必ずしも全て大文字で表記されるわけではありません。

本仕様の全テキストは、非規範として明示された節、例、および注を除いて規範的です。 [RFC2119]

本仕様の例は “for example” の語で導入されるか、class="example" で規範文から分離されます。 次のように：

これは説明的な例の例です。

説明的注は “Note” の語で始まり、class="note" で規範文から分離されます。次のように：

注：これは説明的な注です。

助言は注意を喚起するためにスタイルされた規範的な節であり、<strong class="advisement"> で 他の規範文から分離されます。次のように： UA は代替手段を提供しなければなりません。

Tests

本仕様の内容に関連するテストは、このような “Tests” ブロックで文書化されることがあります。 そのようなブロックはすべて非規範です。

適合クラス

本仕様への適合は、次の三つの適合クラスについて定義されます：

スタイルシート
CSS スタイルシート。
レンダラー
UA で、スタイルシートの意味を解釈してそれを用いる文書をレンダリングするもの。
作成ツール
UA で、スタイルシートを書くもの。

スタイルシートは、本モジュールで定義された構文を使うすべての文が、 汎用の CSS 文法および本モジュールで定義された各機能の個別文法に従って有効である場合に 本仕様に適合していると見なされます。

レンダラーは、適切な仕様によって定義されたとおりにスタイルシートを解釈することに加え、 本仕様で定義されたすべての機能を正しくパースし文書をそれに従ってレンダリングすることを サポートしている場合に本仕様に適合していると見なされます。ただし、デバイスの制限により UA が文書を正しくレンダリングできないことは、UA を非適合にしません。 （例えば、モノクロモニタで色をレンダリングすることを要求されるわけではありません。）

作成ツールは、汎用の CSS 文法および本モジュールの各機能の個別文法に従って 構文的に正しいスタイルシートを書く場合に本仕様に適合していると見なされます。また本モジュールで 説明されるスタイルシートのその他のすべての適合要件も満たす必要があります。

部分的実装

著者がフォールバック値を割り当てるためにフォワード互換のパース規則を利用できるようにするため、 CSS レンダラーは、使用可能なレベルのサポートがない at-rule、プロパティ、プロパティ値、キーワード、 およびその他の構文構造を無効として扱い（必要に応じて 無視） なければなりません。特に、ユーザーエージェントは、サポートされていないコンポーネント値を選択的に無視し、 単一の複数値プロパティ宣言内でサポートされる値だけを尊重してはなりません：いずれかの値が無効とみなされる場合 （サポートされない値は無効であるべきです）、CSS は宣言全体が無視されることを要求します。

不安定機能および独自機能の実装

将来の安定した CSS 機能との衝突を避けるために、 CSSWG は ベストプラクティス に従うことを 不安定機能や CSS への独自拡張の実装に対して推奨します。

非実験的実装

仕様が Candidate Recommendation ステージに達すると、 非実験的な実装が可能になり、実装者は仕様に従って正しく実装されていることを示せる CR レベルの機能について プレフィックスのない実装をリリースするべきです。

CSS の実装間の相互運用性を確立および維持するために、CSS ワーキンググループは非実験的な CSS レンダラーがプレフィックスのない実装をリリースする前に、実装レポート（必要ならばその実装レポートに使用した テストケース）を W3C に提出することを要請します。W3C に提出されたテストケースは CSS ワーキンググループによる レビューと訂正の対象となります。

テストケースおよび実装レポートの提出に関する詳細は CSS ワーキンググループのウェブサイト https://www.w3.org/Style/CSS/Test/ を参照してください。 質問は public-css-testsuite@w3.org メーリングリスト宛に送ってください。

索引

本仕様で定義された用語

参照で定義された用語

参考文献

規範的参考文献

[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS カスケーディングおよび継承 Level 5．2022年1月13日．CR．URL: https://www.w3.org/TR/css-cascade-5/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou. CSS カラーモジュール Level 4．2026年2月27日．CRD．URL: https://www.w3.org/TR/css-color-4/
[CSS-COLOR-ADJUST-1]
Elika Etemad; 他. CSS カラー調整モジュール Level 1．2025年12月16日．CR．URL: https://www.w3.org/TR/css-color-adjust-1/
[CSS-IMAGES-3]
Tab Atkins Jr.; Elika Etemad; Lea Verou. CSS 画像モジュール Level 3．2023年12月18日．CRD．URL: https://www.w3.org/TR/css-images-3/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS 構文モジュール Level 3．2021年12月24日．CRD．URL: https://www.w3.org/TR/css-syntax-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS 値と単位モジュール Level 4．2024年3月12日．WD．URL: https://www.w3.org/TR/css-values-4/
[CSS-VALUES-5]
Tab Atkins Jr.; Elika Etemad; Miriam Suzanne. CSS 値と単位モジュール Level 5．2024年11月11日．WD．URL: https://www.w3.org/TR/css-values-5/
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez. CSS オブジェクトモデル（CSSOM）．2021年8月26日．WD．URL: https://www.w3.org/TR/cssom-1/
[FETCH]
Anne van Kesteren. Fetch 標準．リビングスタンダード．URL: https://fetch.spec.whatwg.org/
[ICC]
ICC.1:2022 (プロファイルバージョン4.4.0.0)．2022年5月．URL: http://www.color.org/specification/ICC.1-2022-05.pdf
[INFRA]
Anne van Kesteren; Domenic Denicola. インフラ 標準．リビングスタンダード．URL: https://infra.spec.whatwg.org/
[RFC2119]
S. Bradner. RFCで要求レベルを示すキーワード．1997年3月．Best Current Practice．URL: https://datatracker.ietf.org/doc/html/rfc2119
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL 標準．リビングスタンダード．URL: https://webidl.spec.whatwg.org/

参考資料（説明的）

[FOGRA39]
ISO 12647-2:2004 / Amd 1, Offset commercial and specialty printing according to ISO 12647-2, paper type 1 or 2 (gloss or matte coated offset, 115 g/m²), screen frequency 60/cm. 2006. URL: https://www.color.org/chardata/FOGRA39.xalter
[FOGRA51]
ISO 12647-2:2013, Process control for the production of half-tone colour separations, proof and production printsPart 2: Offset lithographic processes, PS 1, premium coated, 115 g/m², moderate substrate fluorescence. 2015. URL: https://registry.color.org/cmyk-registry/fogra51
[FOGRA55]
CMYKOGV-based gamut exchange space. 2021. URL: https://fogra.org/en/research/prepress-technology/multiprimary-printing-13003

プロパティ索引

定義されたプロパティはありません。

@color-profile ディスクリプタ

Name Value Initial
components <ident># n/a
rendering-intent relative-colorimetric | absolute-colorimetric | perceptual | saturation relative-colorimetric
src <url> n/a

IDL 索引

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