CSSカラー・モジュール レベル4

1. はじめに

このセクションは規範的ではありません。

このモジュールは、要素のテキスト内容の前景色と不透明度を指定するためのCSSプロパティを説明します。 また、CSSの<color>値型についても詳細に説明します。

このモジュールは、CSS1、CSS2、 およびCSS Color 3に既に存在する色関連のプロパティと値を定義するだけでなく、 新しいプロパティと値も定義します。

特に、sRGB以外の色空間での色指定を可能にします。 以前は、ディスプレイデバイスが対応していても、sRGBガマット外のより飽和した色はCSSで使用できませんでした。

ドラフト実装レポートが利用可能です。

1.1. 値の定義

本仕様は CSSプロパティ定義の慣習（[CSS2] を参照）に従い、値の定義構文（[CSS-VALUES-3] 参照）を用いています。 本仕様で定義されていない値型は CSS Values & Units [CSS-VALUES-3] で定義されています。 他のCSSモジュールと組み合わせることで、これらの値型の定義が拡張される場合があります。

プロパティ固有の値に加えて、 この仕様で定義されているすべてのプロパティは、 プロパティ値としてCSS全体のキーワードも受け入れます。 可読性を考慮し、それらは明示的に繰り返されていません。

2. 色彩の用語

色は、人間の視覚による光または光で照らされた物体の知覚を数値的または文字列的に表現したものです。 人間の色知覚の客観的な研究は、色彩計測と呼ばれます。

物理的な物体の色は、 各可視波長でどれだけの光を反射するか、 およびそれを照らす光の実際の色 （再び、各波長でどれだけの光があるか）に依存します。 これは分光光度計で測定されます。

光を放つもの（コンピュータ画面上の色を含む）の色は、 各可視波長でどれだけの光を放つかに依存します。 これは分光放射計で測定されます。

もし2つの物体が異なるスペクトルを持っていても、 それでも同じ物理的な感覚を生じる場合、 それらは同じ色を持つと言います。 スペクトルをCIE XYZ（三つの数値）に変換することで、 2つの色が同じかどうかを計算できます。

色空間は、 基礎となる色彩計測モデルに基づいて色を組織化したもので、 その色空間内の任意の色に対して明確で客観的に測定可能な意味を持たせるものです。 これにより、同じ色が複数の色空間で表現されたり、 一つの色空間から別の色空間へ変換されたりしても、 見た目が同じであることが可能になります。

 color(sRGB 0.41587 0.503670 0.36664);
 color(display-p3 0.43313 0.50108 0.37950);
 color(a98-rgb 0.44091 0.49971 0.37408);
 color(prophoto-rgb 0.36589 0.41717 0.31333);
 color(rec2020 0.42210 0.47580 0.35605);

加法的色空間とは、 座標系が光の強度において線形であることを意味します。 CIE XYZ色空間は加法的色空間です。 XYZのY成分は輝度で、単位面積あたりの光の強度、 つまり「どれだけ明るいか」です。輝度はカンデラ毎平方メートル (cd/m²)で測定され、ニットとも呼ばれます。

加法的色空間では、正確に予測できる色混合の計算を行うことができます。 ほとんどのRGB空間は加法的ではありません。 これは、成分がガンマエンコードされているためです。 このガンマエンコードを解消することで、線形光値が生成されます。

色度とは、 明度成分を取り除いた色の測定値です。 上記の同一の光の例では、 1つの光におけるu',v'色度は (0.2537, 0.5268) であり、 両方の光で色度は同じです （色は同じで、ただ明るさが増加しているだけです）。

色度は加法的であるため、 混合の色度を正確に予測することができます （ただし、結果として得られる明度は除きます）。 二次元であるため、色度は色度図で簡単に表現でき、 色混合の色度を予測することができます。 任意の2つの色を混合すると、結果の色は 図上でそれらを結ぶ直線上に位置します。 3つの色は平面を形成し、結果の色は 図上でそれらが形成する三角形内に位置します。

したがって、線形化されると、RGB色空間は加法的であり、 そのガマットは 赤、緑、青の原色の色度、 および白色点 （3つの原色がすべて最大強度で形成する色）の色度によって定義されます。

ほとんどの色空間は、いくつかの昼光を模した 白色点のいずれかを使用します。 これらは、対応する黒体放射体の相関色温度（CCT）[Understanding_CCT] によって命名されています。 例えば、D65は相関色温度 6500ケルビンに対応する昼光白色点です （実際には6504、 プランク定数の値が色が最初に定義された時から変更されたためです）。

累積的な往復誤差を避けるためには、 計算のすべての箇所で 同一の色度値が一貫して使用されることが重要です。 したがって、最大限の互換性のために、 この仕様では以下の2つの標準的な昼光を模した 白色点が定義されています：

測定された物理的特性 （使用する原色の色度 や、特定の入力セットに応じて生成される色など）が 色空間または 色を生成するデバイスに既知の場合、 それは特性化されたと言います。

さらに、デバイスが白色点、グレーの中立性、トーン応答の予測可能性と一貫性などの キャリブレーション目標を満たすように調整された場合、 それはキャリブレーションされたと言います。

実際の物理デバイスはまだ人間の目が見ることのできるすべての色を生成することはできません。 特定のデバイスが生成できる色の範囲はガマット （ガンマと混同しないでください）と呼ばれます。 ガマットが限られているデバイスでは、 虹に見られるような非常に飽和した色を生成できません。

異なる色空間のガマットは、 表現できる色の体積（立方Lab単位）を比較することで評価できます。 以下の表は、CSSで利用可能な事前定義された色空間を調査しています。

CSSにおける色は、以下で説明する各構文形式に従い、 無効な色 または有効な色のいずれかです。

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

色は有効な色である場合でも、 出力デバイス（画面、プロジェクター、またはプリンター）で生成可能な範囲外にあることがあります。

その場合、それはガマット外と呼ばれます。

各有効な色は、特定の出力デバイス（画面やプリンター）に対して ガマット内であるか、 ガマット外であるかのいずれかです。

 color(prophoto-rgb 0.88 0.45 0.10)

 color(display-p3 1.0844 0.43 0.1)

3. CSSにおける色の適用

3.1. アクセシビリティと色を用いた情報伝達

色は文書に重要な情報を付加し、読みやすくすることができますが、 それ自体のみで重要な情報を伝える手段であってはなりません。 作成者は、文書で色を使用する際にW3Cのウェブコンテンツアクセシビリティガイドライン [WCAG21] を考慮する必要があります。

1.4.1 色の使用: 色は情報を伝達する唯一の視覚的手段として、 行動を示す、応答を促す、または視覚的要素を区別するために使用されません

3.2. 前景色: color プロパティ

このプロパティは要素の主要な前景色を指定します。 これはそのテキスト内容の塗りつぶし色として使用されるだけでなく、 currentcolorが解決される際の使用値も指定します。 これにより、この前景色への間接的な参照が可能となり、 border-colorやtext-emphasis-colorのような 他のさまざまな色プロパティの初期値にも影響を与えます。

<color>

指定された<color>に主要な前景色を設定します。

em { color:  lime; }   /* color keyword  */
em { color:  rgb(0 255 0); } /* RGB range 0-255   */
em { color:  rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color:  color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */

テキストに適用された場合、このプロパティ（アルファ成分を含む）は、 「色付きグリフ」（一部のフォントの絵文字など）には影響を与えません。 それらは組み込みパレットによって着色されています。 しかし、一部のカラーフォントは文脈的な「前景色」を参照することが可能です。 例えば、OpenTypeのCOLRテーブル内のパレットエントリ0xFFFFや、 SVG-in-OpenTypeのcontext-fill値によって設定される場合です。 そのような場合、このプロパティによって前景色が設定され、 currentcolorの値を設定する場合と同じです。

3.3. 透明性: opacity プロパティ

Opacityは後処理操作として考えることができます。 概念的には、要素（その子孫を含む）がRGBAのオフスクリーン画像にレンダリングされた後、 opacityの設定によって、そのオフスクリーンレンダリングが現在の合成レンダリングへどのようにブレンドされるかが指定されます。 詳細は単純アルファ合成を参照してください。

<opacity-value>

要素に適用される不透明度です。 得られる不透明度は、特定の色ではなく、要素全体に適用されます。

[0,1]の範囲外のopacity値は無効ではなく、指定値として保持されますが、 算出値では[0,1]の範囲にクランプされます。

CSSにおけるopacityは、<opacity-value> 構文で表現されます。例えばopacityプロパティで使用されます。

<opacity-value> = <number> | <percentage>

<number>として表現された場合、 有用な値の範囲は0（完全な透明）から1（完全な不透明）です。 また、<percentage>として記述することもできます。 これは、算出値として同等の<number>（0%は0、100%は1）に変換されます。

opacityプロパティは、指定された不透明度を要素全体に適用します。 内容も含めて、各子孫に個別に適用するのではありません。 つまり、例えば、不透明な子要素が要素の背景の一部を隠していても、opacityが1未満でもそのまま隠し続けますが、 要素と子要素全体が下層のページを透かして表示します。

また、要素内のすべての文字に対応するグリフも全体として扱われます。 重なり合った部分があっても、不透明度は増加しません。

各グリフごとに個別の不透明度が必要な場合は、 opacityプロパティを設定するのではなく、 アルファ値を含む色値を使用することで実現できます。

ボックスのopacityが1未満の場合、 その子要素のためのスタッキングコンテキストを形成します。 （これにより、その内容がZ軸で外側のコンテンツと混在するのを防ぎます。）

さらに、ボックスにz-index プロパティが適用されている場合、 auto値はその要素に対して0として扱われます。 それ以外は、親のスタッキングコンテキスト内で積層レベル0の配置要素と同じレイヤーに描画されます （z-index:0の配置済み要素として扱われるかのように）。

スタッキングコンテキストについての詳細は、section 9.9およびAppendix Eを参照してください。[CSS2]

これらのz-orderに関する規則はSVG要素には適用されません。 SVGは独自のレンダリングモデル（[SVG11]、第3章）を持っています。

opacityプロパティの値は ヒットテストには影響しません。

3.4. タグ付き画像の色空間

タグ付き画像とは、画像フォーマットによって明示的にカラープロファイルが割り当てられている画像のことです。 これは通常、International Color Consortium（ICC）プロファイル [ICC] を含めることで行われます。

例えば、JPEG [JPEG]、PNG [PNG]、TIFF [TIFF] のいずれもICCプロファイルを埋め込む手段を定めています。

画像フォーマットは、簡潔さのために他の同等の方法を使う場合もあります。

例えばPNGでは、sRGBチャンク により、sRGBカラースペースであることを明示的にタグ付けする方法が規定されていますが、 sRGB ICCプロファイル自体は含まれていません。

同様に、PNGはよりコンパクトな方法として （cICPチャンク）を規定しており、 ICCプロファイルを含めずにDisplay P3やBT.2100 HLGなど さまざまなSDRまたはHDR色空間のいずれかであることを明示的にタグ付けできます。

タグ付きRGB画像や、YCbCrのようなRGBの変換を利用したタグ付き画像は、 カラープロファイルや他の識別情報が有効であれば、指定された色空間として扱わなければなりません。

例えば、Display P3モニターを搭載したシステム上のブラウザーが、 ITU Rec BT.2020 [Rec.2020] 色空間としてタグ付けされたJPEG画像を表示する場合、 色をITU Rec BT.2020からDisplay P3に変換して正しく表示しなければなりません。 ITU Rec BT.2020の値をDisplay P3の値として扱ってはならず、そうすると色が正しく表示されません。

カラープロファイルや他の識別情報が無効な場合、画像はタグなし画像として記載された方法で扱われます。

3.5. タグなし色の色空間

互換性のため、HTMLで指定された色や、 タグなし画像は 特に指定がない限りsRGB色空間（[SRGB]）として扱わなければなりません。

タグなし画像とは、 画像フォーマットによって明示的にカラープロファイルが割り当てられていない画像のことです。

この規則はタグなし動画には適用されません。タグなし動画はITUで定義された色空間にあると推定すべきです。

• 720p未満では、Recommendation ITU-R BT.601 [ITU-R-BT.601]

• 720pでは、SMPTE ST 296（709と同じ色度）[SMPTE296]

• 1080pでは、Recommendation ITU-R BT.709 [ITU-R-BT.709]

• 4k（UHDTV）以上では、SDR動画の場合はITU-R BT.2020 [Rec.2020]

4. 色の表現: <color> 型

CSSの色は、色空間の軸を表す色成分のリストとして表現されます。 これらは「チャンネル」と呼ばれることもあり、 色空間内の各軸を表します。 各成分には最小値と最大値があり、 その間の任意の値をとることができます。 さらに、すべての色には どれだけ透明かを示すアルファ成分が付属しており、 これによって色を通してどれだけ背景が見えるかが決まります。

CSSでは色値を指定するための構文が複数あります:

• RGBおよびアルファ成分を16進数表記で表すsRGBの16進カラー表記

• 様々な色空間や座標系で色を表現できるカラー関数

• 定数として定義された色名キーワード

• 変数として利用する<system-color>キーワードや、currentColorキーワード

カラー関数は、 CSSの関数型表記を使って、各成分座標を指定することで 様々な色空間の色を表現します。 そのうちのいくつかは円筒極座標の色モデルを使い、 色相角<hue>、 明度（黒〜白）を示す中心軸、 彩度またはクロマ（色がニュートラルグレーからどれだけ離れているか）を示す半径で色を指定します。 その他は直交座標の色モデルを使い、 3本の直交成分軸で色を指定します。

カラー関数で Level 4で利用できるものは次の通りです:

• rgb()および rgba() のエイリアスは、 （16進色表記と同様に） 赤・緑・青・アルファ成分によってsRGB色を直接指定します。

• hsl()および hsla() のエイリアスは、 HSL円筒座標モデルを用いて、 色相・彩度・明度でsRGB色を指定します。

• hwb() は、 HWB円筒座標モデルを用いて、 色相・白度・黒度でsRGB色を指定します。

• lab() は、CIE明度とa軸・b軸色相座標 （赤／緑成分および黄／青成分）によって CIE LAB直交座標モデルを使用してCIELAB色を指定します。

• lch()は、 CIE明度・彩度・色相によって CIE LCH円筒座標モデルを使ってCIELAB色を指定します。

• oklab() は、Oklab明度とa軸・b軸色相座標 （赤／緑成分および黄／青成分）によって Oklab直交座標モデルを利用してOklab色を指定します。

• oklch() は、Oklab明度・彩度・色相によって OkLCh円筒座標モデルでOklab色を指定します。

• color() は、 下記を含む様々な色空間で色を指定できます： sRGB、 線形ライトsRGB、 Display P3、 線形ライトDisplay P3、 A98 RGB、 ProPhoto RGB、 ITU-R BT.2020-2、 および CIE XYZ。

他の仕様で参照しやすいよう、 不透明な黒は rgb(0 0 0 / 100%)の色として定義します。 透明な黒は 同じ色ですが、完全に透明です—すなわちrgb(0 0 0 / 0%)です。

4.1. <color>構文

CSSの色は<color>型で表現されます:

<color> = <color-base> | currentColor | <system-color>

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

絶対色とは、算出値が絶対的な色度解釈を持つ<color>です。 これは、値が以下ではないことを意味します:

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

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

sRGBに解決される色は次の通りです:

• 16進カラー

• rgb()とrgba()値

• hsl()とhsla()値

• hwb()値

• 色名カラー

レガシーカラー構文をサポートする関数は次の通りです:

• rgb()とrgba()

• hsl()とhsla()

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

4.1.1. モダン（空白区切り）カラー関数構文

この仕様で初めて定義されたすべての絶対色 関数型はモダンカラー構文を使用します。 これは以下を意味します:

• 色成分は空白で区切られる

• オプションのアルファ値はスラッシュ（"/"）で区切られる

• シリアライズ時の最小精度（color値のシリアライズ時）が定められており、 8ビット／成分以上の場合もある

• none値が許可されており、成分欠落を表現できる

• <percentage>と<number>を自由に混在指定できる

rgb(100% 0% 0% / 50%)

4.1.2. レガシー（カンマ区切り）カラー関数構文

Web互換性のため、 rgb()、rgba()、hsl()、hsla()の構文 （従来仕様で定義されたもの）は 次のような違いがあるレガシーカラー構文もサポートします:

• 色成分がカンマ区切り（空白が前後にあってもよい）

• 非不透明形式では別の表記（例えばhsla()はhsl()とは別）で、 アルファ値もカンマ区切り（空白が前後にあってもよい）

• 最小精度は低く、8ビット／成分

• none値は許可されない

• 色成分はすべて<percentage>またはすべて<number>で指定しなければならず、混在不可

rgba(100%, 0%, 0%, 0.5)

この仕様または後続レベルで導入されたカラー関数 について、Web互換性の問題がない場合は レガシーカラー構文は無効です。

4.2. 色の透明度の表現: <alpha-value>構文

<alpha-value> = <number> | <percentage>

注: この構文は、従来の色 構文ではそのまま使用されます。 現代の色 構文では、 アルファ成分が 値 none も取れるように拡張されます。

特に指定がない限り、 色の<alpha-value>成分は省略時に100%となります。 [0,1]の範囲外の値は無効ではありませんが、パース時にその範囲へクランプされます。

4.3. 円筒座標系の色相の表現: <hue>構文

色相は色環の角度で表現されます （虹を輪にねじったものと考え、紫色が赤とすみれの間に追加されます）。

<hue> = <number> | <angle>

この値は度数で指定されることが非常に多いため、 引数を数値で指定することもでき、 これは度数として解釈され 標準単位となります。

この数値は [0,360) の範囲に正規化されます。

注: 特定の色相に対応する角度や間隔は 色空間によって異なります。 例えば、sRGB色空間を使うHSLやHWBでは sRGBの緑は120度です。 LCHではsRGBの緑は134.39度、 display-p3の緑は136.01度、 a98-rgbの緑は145.97度、 prophoto-rgbの緑は141.04度です （これらはすべて異なるグリーンの色調になるためです）。

<hue> 成分は無効成分となる最も一般的な成分です。 中心の無彩色軸に十分近い色は 無効な色相成分になります。

4.4. 「欠落」した色成分とnoneキーワード

特定の場合には、 色に1つ以上の 欠落している 色成分が存在することがあります。

この仕様では、 一部の色（whiteなど）について、色相ベースの補間により これは自動的に発生します。 他の仕様では、成分が自動的に欠落する 追加の状況を定義できます。

色関数内の成分に対して、キーワード none を指定することによって、明示的に指定することもできます。 すべての色関数では、 （従来の色構文を使用するものを除き） その任意の成分を none として指定できます。

これは慎重に行うべきであり、 そうすることによる特定の効果が望まれる場合にのみ行うべきです。

欠落成分の扱いについて 2色を組み合わせる場合（色補間など）は § 13.3 欠落成分での補間を参照してください。

その他の目的では、欠落成分はその成分に適した単位のゼロ値として扱われます: 0、0%、または0deg。 これには色を直接レンダリングする場合、 別の色空間に変換する場合、 色成分値で演算する場合などが含まれます。

欠落成分を持つ色をシリアライズしたり著者に直接提示する場合、 レガシーカラー構文ではゼロ値として表現され、 それ以外ではnoneキーワードとして表現されます。

4.4.1. 「無効」な色成分

個々の色構文は、場合によっては、 その構文の特定の成分が無効色成分になることを指定できます。 これは、その成分の値がレンダリングされる色に影響しないことを示します。 どんな値を指定しても、画面上に表示される色は同じになります。

例えば、hsl()では、彩度成分が0%のとき色相成分は無効となります。 0%の彩度はグレースケール色を示し、 色相はまったく持たないため、 0degでも180degでも、他のどんな角度でも 結果は全く同じになります。

影響を持たない成分が手動で指定された場合は、通常通り動作します。 影響を持たない成分であること自体に、特別な効果はありません。

しかし、色空間変換によって自動的に色が生成された場合は、 結果の無効成分は変換処理で得られた値ではなく、 欠落として設定しなければなりません。

円筒極座標色空間への色空間変換を行う際、 ユーザーエージェントは、色相成分を無力として扱わなければならない。 これは、彩度（または、hsl における彩度など、色鮮やかさを表すその他の尺度） が、その色空間に指定されたイプシロン（ε）以下である場合である。 例えば、灰色を oklch() に変換すると、 数値誤差により、 彩度が正確に 0% ではなく極めて小さい値になる場合がある。 その結果、色相成分は無力となる。

無力な色相成分を欠落成分に変更する場合、 浮動小数点ノイズの増幅を避けるため、クロマ（または、hsl における彩度など、色鮮やかさを表すその他の尺度。類似成分を参照）はゼロに設定されます。 負の値はゼロにクランプされません。 この値がゼロより大きく、かつ ε 以下である場合にのみ、ゼロに設定されます。 hwb では、代わりに 次の手順に従います。

1. W + B が ε 以上で、かつ W + B が 100 未満の場合
  1.1. W と B が欠落していない場合
    1.1.1. B を 100 - W に設定する
  1.2. それ以外で W が欠落していない場合
    1.2.1. W を 100 に設定する
  1.3. それ以外で B が欠落していない場合
    1.3.1. B を 100 に設定する

4.5. <color>値の構文解析

注: このアルゴリズムは CSSスタイルシートやCSSOMインターフェースで指定された CSSの<color>値を構文解析することを意図したものではなく、 HTML属性やCanvasインターフェースなど 他の場所で使われることを目的としています。

5. sRGBカラー

sRGB色空間のCSSカラーは、 sRGB色空間内の1点を示す値（赤、緑、青の三つ組）で表現されます[SRGB]。 これは国際的に認められたデバイス非依存の色空間であり、 コンピュータ画面に色を表示するためだけでなく、 プリンタなど他の種類のデバイスの色指定にも有用です。

CSSでは、sRGB以外の色空間も § 10 定義済み色空間で説明されている通り利用可能です。

CSSはsRGBカラーを直接指定するために、16進カラー、rgb()/rgba()のカラー関数、hsl()/hsla()カラー関数、hwb()カラー関数、色名カラー、 およびtransparentキーワードなど複数の方法を提供します。

5.1. RGB関数: rgb() と rgba()

rgb() と rgba() 関数は r, g, b（赤、緑、青）の成分を直接指定することでsRGBカラーを定義します。 その構文は以下の通りです：

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

最初の3つの引数は、それぞれ色のr, g, b（赤、緑、青）成分を指定します。0%はsRGB色域における最小値、 100%は最大値を表します。

色成分のパーセンテージ基準範囲は、 多くのグラフィックエンジンが内部的に色成分を1バイト整数（0〜255）で保存していたという歴史的事実に由来します。 実装はできる限り著者や計算された成分の精度を維持すべきです。 それができない場合は、+∞方向に丸めるべきです。

最後の引数<alpha-value>は色のアルファを指定します。 省略された場合は100%がデフォルトです。

これらの範囲外の値は無効ではありませんが、 パース時にここで定義された範囲にクランプされます。

歴史的理由により、rgb() および rgba() はレガシーカラー構文もサポートしています。

5.2. RGB16進数表記: #RRGGBB

CSSの16進カラー表記は、sRGBカラーの成分を16進数で指定することができ、 これはコンピューターコードで色を書く方法とよく似ています。 また、同じ色をrgb()表記で書くよりも短くなります。

<hex-color>の構文は、値が3、4、6、または8桁の16進数で構成される<hash-token>トークンです。 つまり、16進カラーはハッシュ記号「#」に続いて、0〜9またはa〜fの桁がいくつか並びます （文字の大文字小文字は区別しません。#00ff00は#00FF00と同じ色を表します）。

指定された16進数の桁数によって、16進数表記をRGBカラーにデコードする方法が決まります：

6桁

最初の2桁を16進数として解釈し、赤成分を指定します。 00は最小値、 ff（10進で255）は最大値です。 次の2桁が緑、最後の2桁が青成分です。 アルファ成分は完全不透明です。

つまり、 #00ff00は rgb(0 255 0)（ライムグリーン）と同じ色です。

8桁

最初の6桁は6桁表記と同じように解釈されます。 最後の2桁を16進数として解釈し、色のアルファ成分を指定します。 00は完全な透明色、 ffは完全な不透明色です。

つまり、 #0000ffccは rgb(0 0 100% / 80%)（少し透明な青）と同じ色です。

3桁

6桁表記の短縮形です。 最初の1桁が赤成分を16進数として指定し、 0は最小値、 fは最大値です。 次の2桁が緑、青成分です。 アルファ成分は完全不透明です。

この構文は「すべての桁を重複させて6桁表記にする」と説明されることが多いです。 例えば、 #123は #112233と同じ色です。 この方法は6桁表記よりも「解像度」が低く、 3桁の16進数では4096色しか表現できませんが、 6桁では約1700万色表現可能です。

4桁

8桁表記の短縮形で、 3桁表記と同様に「展開」されます。 最初の1桁が赤成分を16進数として指定し、 0は最小値、 fは最大値です。 次の3桁が緑、青、アルファ成分になります。

6. カラーキーワード

さまざまな数値構文による<color>指定に加え、 CSSでは用途や利点ごとに複数のカラーキーワードセットが定義されています。

6.1. 名前付きカラー

CSSは多数の名前付きカラーを定義しており、 よく使われる色を簡単に書けて読みやすくなっています。 <named-color>は<ident>として記述され、 <color>が使える場所ならどこでも利用できます。 CSSで定義される<ident>はすべて ASCII大文字小文字を区別しません。

名前はsRGBの色に解決されます。

CSSの名前付きカラーのうち16色はVGAパレット由来で、HTMLにも採用されました： aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。 その他の多くはUnix系システムのコンソール色指定に使われたX11カラ―システム由来で、 SVGにも採用されています。

注:これらの色名は良いからではなく、 長年広く使われ実装されてきた現実を標準化で反映するためにここで標準化されています。 実際、名前だけではどんな色か想像しづらい場合も多く（下記リスト参照）、 名前の分布はsRGB色空間全体に均等ではなく、 名前の内部整合性もありません （ darkgrayは grayより明るく、 lightpinkは pinkより暗い）、 一部の名前（ indianredなど）は 不快とされることもあります。 したがって、これらの使用は推奨されません。

（特別な色値transparentとcurrentcolorは それぞれ独自の節で定義されています。）

次の表は、すべての不透明な名前付きカラーについて、 他の色構文での同等の数値指定を示します。

注: このカラーリストと定義は SVG 1.1で定義された名前付きカラーのリストの上位集合です。

注: X11カラ―システムの歴史は興味深く、 Alex Sextonによる "Peachpuffs and Lemonchiffons" 講演で見事にまとめられています。

6.2. システムカラー

一般に、<system-color>キーワードは ユーザー、ブラウザー、またはOSによって選択されたデフォルトの色を反映します。 そのため、通常はブラウザーのデフォルトスタイルシートで使用されます。

可読性を維持するため、 <system-color> キーワードも 要素のカラースキームに応答します。

しかし、強制カラーモードでは ページ上のほとんどの色は制限された、ユーザー選択のパレットに強制されます。 詳しくはCSS Color Adjustment 1 § 5.2 強制カラーモード用カラーパレットを参照してください。 <system-color>キーワードは これらユーザー選択色を公開するため、 他のページ部品もこの制限下パレットと統合できます。

forced-colors メディア特性がactiveの場合、 著者は可能な限り <system-color>キーワードを CSS Color Adjustment 1 § 3.1 強制カラーモードの影響を受けるプロパティに載っていない プロパティの色値として使うべきです。 そうすることでページ全体の可読性と一貫性を確保し、 ユーザー強制色とページ独自色のちぐはぐな混在を回避できます。

<system-color>キーワードの値が （OSやユーザー選択によるデフォルトではなく）ブラウザーによって提供される場合、 ブラウザーは一致する前景／背景ペアが WCAG AAコントラストの最低基準を満たすように配慮すべきです。 ただし、ユーザーの好み（高コントラストや低コントラストの指定）は ブラウザーの設定・ユーザースタイルシート・OSのデフォルト変更を問わず この要件より優先されなければなりません。

著者がこれらのキーワードをいつでも使用しても問題ありませんが、 対応する背景-前景ペアで 適切なコントラストとなるよう注意すべきです。 非対応ペア間（例: Canvas と ButtonText）の コントラスト関係が常に保証されるわけではありません。

<system-color>キーワードは以下の通り定義されます：

AccentColor

 アクセント付きUIコントロールの背景。

AccentColorText

 アクセント付きUIコントロールのテキスト。

ActiveText

 アクティブなリンクテキスト。明色系背景では従来は赤。

ButtonBorder

 プッシュボタンのベース枠線色。

ButtonFace

 プッシュボタンの表面背景色。

ButtonText

 プッシュボタン上のテキスト。

Canvas

 アプリケーションコンテンツや文書の背景。

CanvasText

 アプリケーションコンテンツや文書内のテキスト。

Field

 入力フィールドの背景。

FieldText

 入力フィールド内のテキスト。

GrayText

 無効化テキスト。（多くの場合グレーだが必ずしもそうではない）

Highlight

 選択されたテキストなどの背景（例: ::selection）。

HighlightText

 選択されたテキストの文字色。

LinkText

 非アクティブ・未訪問リンクのテキスト。明色系背景では従来は青色。

Mark

 特別にマークされたテキストの背景 （例：HTMLの mark 要素）。

MarkText

 特別にマークされたテキスト （例：HTMLの mark 要素）。

SelectedItem

 選択中のアイテム（例: 選択されたチェックボックス等）の背景。

SelectedItemText

 選択中アイテムのテキスト。

VisitedText

 訪問済みリンクのテキスト。明色系背景では従来は紫色。

注: 他のキーワード同様、 これらの名前はASCII大文字小文字を区別しません。 可読性のためここでは混在した大文字小文字で表示しています。

特定のシステムUI概念が存在しないシステムでは、 指定値は最も関連性の高いシステムカラー値にマッピングされるべきです。 次のシステムカラー組み合わせは 可読な背景－前景色を形成すると期待されます:

• Canvas背景＋CanvasText、LinkText、VisitedText、ActiveText前景。

• Canvas背景＋ButtonBorderボーダーと隣接する色Canvas

• ButtonFace背景＋ButtonText前景。

• Field背景＋FieldText前景。

• Mark背景＋MarkText前景

• ButtonFaceまたはField背景＋ButtonBorderボーダーと隣接する色Canvas'

• Highlight背景＋HighlightText前景。

• SelectedItem背景＋SelectedItemText前景。

• AccentColor背景＋AccentColorText前景。

さらに、GrayTextは どの背景でも読めることが期待されますが、 コントラスト評価は低い場合もあります。

ウィジェットのアクセント色のスタイリングとの一貫性を保つために、 AccentColorはaccent-colorから値を取得します。 ただし、強制色モード（Forced Colors Mode）が有効の場合は除きます。 AccentColorTextは AccentColorに対するコントラストのある前景色から値を取得します。 これはウィジェットのアクセント色スタイリングについて説明されている通りです。

CSSの過去バージョンでは追加の<system-color>が定義されていましたが、 すでに廃止されています。 詳細は付録A: 廃止CSSシステムカラーを参照してください。

注: <system-color>には§ 22 プライバシーの考慮や§ 20 セキュリティの考慮で説明されているように 一部プライバシー・セキュリティリスクがあります。

ユーザーエージェントは、 指紋取得などのプライバシー・セキュリティリスクを軽減するために、 システムカラーの使用値として固定値を返し、 ユーザーによるカスタマイズやテーマ選択を反映しないことを選択することができます。

6.3. transparentキーワード

transparentキーワードは透明な黒を指定します。 <named-color>型の一種です。

6.4. currentcolorキーワード

currentcolorキーワードは、同じ要素上のcolorプロパティの値を表します。 <named-color>とは異なり、sRGBに限定されません。 値は任意の<color>型となりえます。 使用値は色値の解決により決定されます。

.foo {
  color:  red;
  background-color:  currentcolor;
}

.foo {
  color:  red;
  background-color:  red;
}

<p><em>Some <strong>really</strong> emphasized text.</em>
<style>
p { color: black; }
em { text-emphasis: dot; }
strong { color: red; }
</style>

注: CSSの複数語からなるキーワードは通常、語句の間をハイフンで区切ります。 currentcolorはそうなっていません。理由は（深呼吸してください）、 もともとSVGでプロパティ値 "current-color"（一般的なCSSの綴り）として導入されたためです。 それが（他の全てのプロパティや値とともに） プレゼンテーション属性・属性値（およびプロパティ）にもなり、 XSLTでの生成を容易にする設計となりました。 その後、すべてのプレゼンテーション属性がハイフン区切りからキャメルケースに変更されましたが、 DOMではハイフンが「マイナス」を意味し問題となっていたためです。 しかし、これだとCSSの慣習に従わなくなったので、 すでにCSSの一部だったプロパティと値はハイフン区切りに戻されました！ currentcolorはその時点ではCSSの一部ではなかったため、 キャメルケースのまま残りました。 その後、CSSがcurrentcolorを採用し、 キーワードの大文字小文字が重要ではなくなりました。 CSSキーワードはASCII大文字小文字非区別だからです。

7. HSLカラー: hsl() と hsla()関数

RGB方式による色指定は、 機械やグラフィックライブラリには便利ですが、 人間が直感的に理解するのは非常に難しいとよく言われます。 例えば、RGBの色をどう変更すれば同じ色相のより明るいバリエーションになるのかを 判断するのは容易ではありません。

他にもいくつかの色体系が考案されています。 そのひとつがHSL [HSL]色体系です。 これはより直感的に使える一方で、 RGB色にも容易に変換できます。

HSLカラーは 色相・彩度・明度の3つ組で指定します。 hsl()およびhsla()関数の構文は次の通りです：

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

最初の引数は色相角度を指定します。

HSL（およびHWB）では、0degはsRGB主赤色を表します （360deg、720deg等も同様）、 他の色相は円周上に配置されるので 120degはsRGB主緑、240degはsRGB主青などを表します。

次の2つの引数は、彩度と明度です。 彩度については、100%または100が完全に鮮やかな明るい色、 0%または0が完全に無彩色のグレーです。 明度については、50%または50が「標準」色、 100%または100が白、0%または0が黒です。

歴史的理由により、 彩度が0%未満の場合はパース時に0%へクランプされ、 sRGB色に変換されます。

最後の引数は色のアルファ成分を指定します。 rgb()関数の第4引数と同様に解釈されます。 省略時は100%がデフォルトです。

HSLカラーはsRGBに解決されます。

HSLカラーの彩度が0%または0なら、 色相成分は無効です。

HSLの利点はRGBよりも直感的であることです。 欲しい色を推測して微調整できます。

hsl(120deg 100% 50%) ライムグリーン
hsl(120deg 100% 25%) ダークグリーン
hsl(120deg 100% 75%) ライトグリーン
hsl(120deg 75% 85%)  パステルグリーン

HSLの欠点はOKLChと比べて 色相操作で見た目の明度が変化すること、 色相が均等に分布していないことです。

HSLでは色相を固定して彩度・明度だけ変化させることで セットの色を作りやすく、 sRGB成分値を操作するよりも簡単です。 ただし、明度はガンマ補正後の赤・緑・青成分の平均値なので、 色相全体で見た目の明度と一致しません。

HSLの色相角は知覚的に均一ではなく、 一部の領域では色が密集し、 他の領域では広く分布します。

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

7.1. HSLカラーからsRGBへの変換

HSLカラーをsRGBに変換することは数学的に簡単です。 こちらは変換アルゴリズムのJavaScriptによるサンプル実装です。 配列で赤・緑・青成分（sRGBガマット内の場合は[0, 1]範囲）を返します。

このコードは、パース時に負の彩度のクランプ処理が既に適用されていることを前提とします。

/**
 * @param {number} hue - 色相（度数 0..360）
 * @param {number} sat - 彩度（基準範囲 [0,100]）
 * @param {number} light - 明度（基準範囲 [0,100]）
 * @return {number[]} sRGB成分の配列。ガマット内は[0..1]
 */
function hslToRgb(hue, sat, light) {

    sat /= 100;
    light /= 100;

    function f(n) {
        let k = (n + hue/30) % 12;
        let a = sat * Math.min(light, 1 - light);
        return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
    }

    return [f(0), f(8), f(4)];
}

7.2. sRGBカラーからHSLへの変換

逆方向の変換も同様に行います。

sRGBガマット外の色では中間値に負の彩度が生じる場合があるため、 その処理に注意します。

/**
 * @param {number} red - 赤成分 0..1
 * @param {number} green - 緑成分 0..1
 * @param {number} blue - 青成分 0..1
 * @return {number[]} HSL値の配列: 色相は度数0..360、彩度と明度は参照範囲[0,100]
 */
function rgbToHsl (red, green, blue) {
    let max = Math.max(red, green, blue);
    let min = Math.min(red, green, blue);
    let [hue, sat, light] = [NaN, 0, (min + max)/2];
    let d = max - min;
    let epsilon = 1 / 100000;   // このコードでは最大彩度は1

    if (d !== 0) {
        sat = (light === 0 || light === 1)
            ? 0
            : (max - light) / Math.min(light, 1 - light);

        switch (max) {
            case red:   hue = (green - blue) / d + (green < blue ? 6 : 0); break;
            case green: hue = (blue - red) / d + 2; break;
            case blue:  hue = (red - green) / d + 4;
        }

        hue = hue * 60;
    }

    // ガマット外の色は負の彩度になる場合がある
    // その場合、色相を180度回転し、正の彩度を使う
    // 詳細：https://github.com/w3c/csswg-drafts/issues/9222
    if (sat < 0) {
        hue += 180;
        sat = Math.abs(sat);
    }

    if (hue >= 360) {
        hue -= 360;
    }

    if (sat <= epsilon) {
        hue = NaN;
    }

    return [hue, sat * 100, light * 100];
}

7.3. HSL色の例

このセクションは規範的ではありません。

以下の表は、さまざまなHSL色の幅広いバリエーションを示しています。 各表は1つの色相を表しており、 30°ごとに選択されています。 これは一般的な「コア」色相を示すためです： 赤、 黄、 緑、 シアン、 青、 マゼンタ、 そしてこれらの間に位置する6つの中間色です。

各表では、X軸は彩度を、 Y軸は明度を表しています。

8. HWB色: hwb() 関数

HWB（Hue-Whiteness-Blacknessの略）[HWB] は、sRGB色を指定するもうひとつの方法であり、 HSLに似ていますが、しばしば人間にとってさらに扱いやすいものです。 最初に色相を指定し、 その基本色相に白さと黒さの度合いを混ぜることで色を表します。

多くのカラーピッカーはHWBカラーモデルを基にしており、 その直感的な使いやすさが理由です。

HWB色はsRGBに解決されます。

hwb() 関数の構文は次の通りです:

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

最初の引数は色相を指定し、 hsl()と同じ定義です; つまり同じ欠点（色相の均一性など）を持ちます。

2番目の引数は、混ぜる白の量をパーセンテージで指定します。0%（白なし）から100%（完全に白）までです。 同様に、3番目の引数は混ぜる黒の量を指定し、 0%（黒なし）から100%（完全に黒）までです。

注: hwb() はアブニー効果を考慮していません [Abney] これは、単色光源に白色光を加えたときに生じる 知覚上の色相のずれです。

これらの範囲外の値は 無効ではありません; 色相角が[0,360)の範囲外ならその範囲に正規化され、 白と黒の値の合計が100%以上の場合は 以下に記載するように無彩色が生成されます。

得られる色は、選択した色相の絵の具、白の絵の具、黒の絵の具を混ぜた混合物と概念的に考えることができます。 各割合はパーセンテージで決まります。

white+blackの合計が100%以上の場合、 それは無彩色（グレーの一種）を定義します。 sRGBに変換した場合、R・G・Bの値はすべて同じになり、 値は white / (white + black) となります。

無彩色のHWB色は、選択した色相の情報を持ちません。 この場合、色相成分は無効です。

4番目の引数は色のアルファ成分を指定します。 rgb()関数の4番目の引数と同じ解釈です。 省略した場合は 100% になります。

このレベルの仕様で新たに導入された hwb には、 Web 互換性の問題がないため、 hwb() は、すべての引数をカンマで区切る 旧来の色構文を サポートしません。 hwb() 内でカンマを使用するとエラーになります。

8.1. HWB色をsRGBに変換する

HWB色をsRGBに変換するのは簡単で、 HSLをRGBに変換する方法と関連しています。 以下のJavascriptによるアルゴリズム実装は まず白と黒の成分を正規化し、 その合計が100%を超えないようにします。

/**
 * @param {number} hue -  色相（度数 0..360）
 * @param {number} white -  白さ（参照範囲 [0,100]）
 * @param {number} black -  黒さ（参照範囲 [0,100]）
 * @return {number[]} RGB成分の配列（0..1）
 */
function hwbToRgb(hue, white, black) {
    white /= 100;
    black /= 100;
    if (white + black >= 1) {
        let gray = white / (white + black);
        return [gray, gray, gray];
    }
    let rgb = hslToRgb(hue, 100, 50);
    for (let i = 0; i < 3; i++) {
        rgb[i] *= (1 - white - black);
        rgb[i] += white;
    }
    return rgb;
}

8.2. sRGB色をHWBに変換する

逆方向の変換も同様に進みます。

/**
 * @param {number} red - 赤成分（0..1）
 * @param {number} green - 緑成分（0..1）
 * @param {number} blue - 青成分（0..1）
 * @return {number} 色相（度数 0..360）
 */
function rgbToHue(red, green, blue) {
    // rgbToHslと似ていますが、彩度と明度は計算せず、
    // 負の彩度になる可能性は無視します。
    let max = Math.max(red, green, blue);
    let min = Math.min(red, green, blue);
    let hue = NaN;
    let d = max - min;

    if (d !== 0) {
        switch (max) {
            case red:   hue = (green - blue) / d + (green < blue ? 6 : 0); break;
            case green: hue = (blue - red) / d + 2; break;
            case blue:  hue = (red - green) / d + 4;
        }

        hue *= 60;
    }

    if (hue >= 360) {
        hue -= 360;
    }

    return hue;
}

/**
 * @param {number} red - 赤成分（0..1）
 * @param {number} green - 緑成分（0..1）
 * @param {number} blue - 青成分（0..1）
 * @return {number[]} HWB値の配列: 色相（度数 0..360）、白さと黒さ（参照範囲 [0,100]）
 */
function rgbToHwb(red, green, blue) {
    let epsilon = 1 / 100000;  // 100倍を考慮
    var hue = rgbToHue(red, green, blue);
    var white = Math.min(red, green, blue);
    var black = 1 - Math.max(red, green, blue);
    if (white + black >= 1 - epsilon) {
        hue = NaN;
    }
    return([hue, white*100, black*100]);
}

8.3. HWB色の例

このセクションは規定ではありません。

9. デバイス非依存色：CIE Lab と LCH、Oklab と OkLCh

9.1. CIE LabとLCH

このセクションは規定ではありません。

色の物理測定値は、通常CIE L*a*b* [CIELAB] 色空間で表されます。 これは1976年にCIEによって作成され、一般的にLabと呼ばれています。 デバイス間の色変換でもLabが中間ステップとして使われることがあります。 人の視覚実験に基づいて派生したLabは、人間が見える色の全範囲を表現しています。

Labは、中央に明度（L）軸を持つ直交座標系です。 この値は通常単位なしの数値として記述されますが、 CSSの互換性のためにパーセンテージとして記述することもできます。 100%はL値が100を意味し、1.0ではありません。 L=0%または0は完全な黒（光がまったくない）、 L=100%または100は拡散白です。

便利なことに、L=50%または50は設計上中間のグレーであり、 Lの等間隔の増分は視覚的にも均等です。 Lab色空間は知覚的に均一を意図しています。

a軸とb軸は色相を表します。 a軸の正の値は紫がかった赤、 負の値は補色である緑を示します。 同様に、b軸の正の値は黄色、 負の値は補色の青／バイオレットを示します。 脱彩色の色はaとbの値が小さくL軸に近く、 彩度の高い色はL軸から遠くにあります。

光源はD50ホワイトであり、色温度5000Kの標準化された昼光スペクトルです。 完全拡散反射体で反射されたものとして定義され、晴天の日の太陽光の色に近似します。 D50はICC色変換におけるプロファイル接続空間のホワイトポイントでもあり、 Lab編集を提供する画像編集ソフトのホワイトポイント、 物理測定機器（分光光度計や分光放射計）がLabで測色値を報告するときも使われる値です。

他のホワイトポイントで指定された色からの変換は色順応変換と呼ばれます。 これは新しい照明条件に人の視覚が順応する変化をモデル化します。 線形Bradfordアルゴリズム [ICC]（元のBradfordアルゴリズム[Bradford-CAT]の単純化版）は 業界標準の色順応変換であり、単なる行列乗算なので計算は容易です。

CIE LCHはLabと同じL軸を持ちますが、 極座標C（彩度）とH（色相）を使い、 極円筒座標系となっています。 CはL軸からの幾何学的距離、 Hは正のa軸から正のb軸方向への角度です。

注意: LabやLCHのL軸は、HSLのL軸と混同しないでください。 例えば、HSLではsRGBの青（#00F）と黄色（#FF0）は同じL値（50%）ですが、視覚的には青の方がずっと暗いです。 Labではより明確です： sRGB青は lab(29.567% 68.298 -112.0294)、 sRGB黄色は lab(97.607% -15.753 93.388) です。 LabやLCHでL値が同じ2色は、視覚的な明度が同じです。 HSLや関連する極座標RGBモデルは、 LabのLCHが提供した使いやすさをRGBに持ち込むために開発されましたが、 精度は大きく劣ります。

CIE LabやLCHは広く使われていますが、 いくつかの問題が知られています。特に：

色相の線形性

青領域（LCH色相270°から330°）で、視覚的色相がLCHの予測から外れます。 同じ色相でChromaのみ異なる青をプロットすると、 本来ニュートラル軸から直線になるはずが、 曲線になります。 言い換えると、 彩度の高い青のChromaを徐々に減らしていくと、 目立って紫がかってきます。

色相の均一性

LCHの色相は概ね均等間隔ですが （HSLやHWBより遥かに良い）、 完全な均一性ではありません。

高Chroma差の過大予測

Chromaが高い色では Chromaの変化は中間色と比べて 視覚的に目立ちません。

これらの欠点は、たとえば 均等間隔グラデーションの作成や 色空間間のガマットマッピング、 2色間の視覚的差分計算などに影響します。

これへの対処として、 2色間の視覚的差分（ΔE）算出式は より正確に進化してきました （計算も複雑化しています）。 現在の業界標準式は ΔE2000で、 LabやLCHの問題をある程度緩和します。 実装例は § 20.2 ΔE2000 に示されています。

ただし、色相の曲がりには対応できません。

9.2. Oklab および OkLCh

このセクションは規定ではありません。

最近、Oklabという 改良型Lab類似空間が開発されました [Oklab]。 極座標形はOKLChと呼ばれます。 大規模な視覚的類似色データセットの数値最適化によって作られ、 従来のCIE LCHに比べ 色相の線形性、 色相の均一性、 彩度の均一性が改善されています。

CIE Labと同様、中央に明度L軸があり 通常は[0,1]範囲の単位なし数値で記述されますが、 CSS互換のためパーセンテージ記述も可能です。100%はL値1.0を意味します。 L=0%または0.0は完全な黒、L=100%または1.0は拡散白です。

注意: CIE Labが拡散白への順応を仮定するのに対し、 Oklabは定義される色への順応を仮定し、 スケール不変性を持たせることを意図しています。

CIE Labと同様、a軸とb軸が色相を伝えます。 a軸正は紫がかった赤、 負は補色の緑です。 b軸正は黄色、 負は補色の青／バイオレットです。

光源はD65で、 ほとんどのRGB色空間と同じホワイトポイントです。

OKLChはOklabと同じL軸を持ち、 極座標C（彩度）とH（色相）で表します。

注意: CIE LCHではChromaが200以上になることもありますが、 OKLChのChromaは0.5程度までです。 CIE LCHとOKLChの色相角は大まかに似ていますが、 完全一致ではありません。

OklabはCIE Labより知覚的均一性が高いため、 色差は3次元空間の単純な距離（2乗和の平方根）になります。 実装は trivial ですが、 サンプルは § 20.3 ΔEOK に示されています。

9.3. LabおよびLCHの指定：lab() および lch() 関数表記

CSSではLabおよびLCHで色を直接表現できます。

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

Labでは、 最初の引数はCIE明度Lを指定します。 これは0%または0から 100%または100までの数値です。 0%または0未満の値は解析時に0%に丸められます。 100%または100より大きい値は解析時に100%に丸められます。

第2および第3引数は、Lab色空間における「a」軸および「b」軸に沿った距離です。 詳細は前節で説明しています。 これらの値は符号付き （プラスとマイナスの両方が可能）であり、 理論上は無限ですが （実際には実世界の色では±160を超えることはありません）。

4番目の<alpha-value>成分はオプションです。 スラッシュで区切られ、アルファ成分を表します。

Lab色の明度（clampされた後）が0%または100%の場合、 ディスプレイのガマットマッピングのため、 それぞれ黒または白として表示されます。

 lab(29.2345% 39.3825 20.0664);
 lab(52.2345 40.1645 59.9971);
 lab(60.2345 -5.3654 58.956);
 lab(62.2345% -34.9638 47.7721);
 lab(67.5345 -8.6911 -41.6019);
 lab(29.69% 44.888% -29.04%)

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

CIE LCHでは最初の引数がCIE明度Lを指定し、 lab() の明度引数と同じ解釈です。

2番目の引数はクロマC （「色の量」を大まかに表す）。 最小値は0で、 最大値は理論上は制限されません （実用上は230を超えません）。 負の値は解析時に0に丸められます。

3番目の引数は色相角Hです。 <hue>引数やhsl()と類似の解釈ですが、 CIE LCHは知覚的均一性で均等になるため RGBの色相角とは一致しません。 0degは正のa軸（赤紫方向）で、 360degや720degも同じ方向です。 90degは正のb軸（マスタードイエロー方向）、 180degは負のa軸（シアン方向）、 270degは負のb軸（空色方向）です。

4番目の引数として、スラッシュで区切られたオプションの<alpha-value>成分があります。 これはアルファ成分を表します。

LCH色のクロマが0%の場合、 色相成分は無効です。 LCH色の明度（丸め後）が0%または100%の場合、 ディスプレイへのガマットマッピングにより、それぞれ黒または白で表示されます。

 lch(29.2345% 44.2 27);
 lch(52.2345% 72.2 56.2);
 lch(60.2345 59.2 95.2);
 lch(62.2345% 59.2 126.2);
 lch(67.5345% 42.5 258.2);
 lch(29.69% 45.553% 327.1)

labやlchは勧告案の新機能であり、Web互換性の問題はありません。 したがってlab()やlch()は、引数をカンマ区切りするレガシーカラー構文をサポートしません。 これらの関数内でカンマを使用するとエラーとなります。

9.4. Oklab と OkLCh の指定： oklab() および oklch() 関数表記

CSSではOklabおよびOKLChで色を直接表現できます。

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

Oklabでは、最初の引数がOklabの明度を指定します。 これは0%または0から 100%または1.0までの数値です。

0%または0.0未満の値は解析時に0%に丸められます。 100%または1.0より大きい値は解析時に100%に丸められます。

2番目と3番目の引数はOklab色空間の「a」「b」軸方向の距離です（前節参照）。 これらは符号付き（正・負どちらも可）で、理論上は制限されません （実際は±0.5を超えません）。

4番目の引数として、スラッシュで区切られたオプションの<alpha-value>成分があります。 これはアルファ成分を表します。

Oklab色の明度が0%または0、 100%または1.0の場合、 ディスプレイへのガマットマッピングにより、それぞれ黒または白で表示されます。

 oklab(40.101% 0.1147 0.0453);
 oklab(59.686% 0.1009 0.1192);
 oklab(0.65125 -0.0320 0.1274);
 oklab(66.016% -0.1084 0.1114);
 oklab(72.322% -0.0465 -0.1150);
 oklab(42.1% 41% -25%)

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

OkLChでは 第1引数はOkLChの明度Lを指定し、 oklab()の明度引数と同じように解釈されます。

第2引数は彩度Cです。 その有効な最小値は0であり、 最大値は理論上は制限されませんが （実際には0.5を超えることはありません）。 指定値が負の場合、パース時に0まで丸められます（clampされます）。

第3引数は色相角Hです。 <hue>引数として hsl()や lch()と 似たように解釈されますが、色相と角度のマッピング方法は同じではありません。 0degは正の「a」軸（赤紫寄りの赤方向）を指します （360degや720degなども同様）。 90degは正の「b」軸（マスタードイエロー方向）を指し、 180degは負の「a」軸（グリーン寄りのシアン方向）を指し、 270degは負の「b」軸（空色方向）を指します。

4番目の<alpha-value>成分はオプションです。 スラッシュで区切り、アルファ成分を表します。

OkLCh色の彩度が0%または0の場合、 色相成分は非効果成分（powerless）となります。 OkLCh色の明度が0%または0、 もしくは100%または1.0の場合、 ディスプレイのガマットマッピングによってそれぞれ黒または白として表示されます。

 oklch(40.101% 0.12332 21.555);
 oklch(59.686% 0.15619 49.7694);
 oklch(0.65125 0.13138 104.097);
 oklch(0.66016 0.15546 134.231);
 oklch(72.322% 0.12403 247.996);
 oklch(42.1% 48.25% 328.4)

この仕様レベルで新たに導入された oklab または oklch にはウェブ互換性の問題がないため、 oklab() および oklch() は、 すべての引数をコンマで区切る 従来の色構文を サポートしません。 これらの関数内でコンマを使用するとエラーになります。

9.5. LabまたはOklab色をLCHまたはOkLCh色へ変換

極座標形式への変換は簡単です：

1. C = sqrt(a^2 + b^2)
2. if (C > epsilon) H = atan2(b, a) else Hは欠落
3. Lはそのまま

aとbが極端に小さい値の場合（クロマがほぼゼロ）、 視覚的な色はニュートラル軸上のまま変化しませんが、 その値をわずかに変更すると報告される色相角は激しく揺れたり ほぼランダムになります。 CSSではこの場合、色相はpowerless（無効）とみなされ、 LCHまたはOkLChへ変換するときはmissing（欠落）として扱われます。 CSS以外のコンテキストではNaNなどの「欠落値」として反映される場合があります。

9.6. LCHまたはOkLCh色をLabまたはOklab色へ変換

直交座標形式への変換は簡単です：

1. Hが欠落している場合、H = 0
   1. a = C cos(H)
   2. b = C sin(H)
2. Lはそのまま

10. 定義済み色空間

CSSは複数の定義済み色空間を提供しています。 例えば、display-p3 [Display-P3]は勧告案の広色域モニターで典型的な広色域空間であり、 prophoto-rgbは写真家に広く使われています。 また、rec2020 [Rec.2020]は放送業界標準の超広色域空間で、ほぼすべての現実世界の可視色を表現できます。

10.1. 定義済み色の指定：color() 関数

color() 関数は、 特定の色空間（他の色関数は暗黙のsRGB色空間）で色を指定できます。 構文は以下の通りです：

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

color関数は、明示的にリストされた色空間で色のパラメータを指定します。

この関数は、下記のような無効色 または有効色を表します。

パラメータの形式は以下の通りです：

• <ident>は 定義済み色空間のいずれか（例：display-p3） 個々の定義済み色空間は、<number>や<percentage> あるいは両方の使用可否を個別に制限する場合があります。

  <ident>が存在しない色空間名（定義済み色空間と一致しない名前）の場合は 無効色を表します。

• 色空間が取る3つのパラメータ値（RGBまたはXYZ値）。

ガマット外色は成分値が 0や0%未満、1や100%超です。 これらは無効ではなく、中間計算のため保持されます。 ただし表示時にはcssガマットマッピングにより色空間（ディスプレイ空間）で 0/0%～1/100%に収まるよう相対色域マッピングで値が調整されます（actual-value時）。

• スラッシュ区切りのオプションの<alpha-value>

color()は 勧告案の新機能であり、Web互換性の問題はありません。 したがってcolor()は、引数をカンマ区切りするレガシーカラー構文をサポートしません。 この関数内でカンマを使うとエラーとなります。

無効色 またはガマット外色は表示できません。

指定した色が表示できる場合 （無効色でもガマット外でもない場合）、 それがcolor()関数のactual valueとなります。

指定した色が 有効色だが表示できない場合、 actual valueは指定色のcssガマットマッピング後の値となります。

色が無効色の場合、 used valueは不透明な黒です。

color(rec2020 0.42053 0.979780 0.00579);

lch(85.9017% 166.116 138.207);

color(display-p3 -0.350289 1.00707 -0.144209);

color(profoto-rgb 0.4835 0.9167 0.2188)

10. 定義済みsRGB色空間：sRGB キーワード

sRGB 定義済み色空間は 以下に定義されており、 レガシーsRGB色（rgb()など）で使われるものと同一です。

srgb

srgb [SRGB] 色空間は3つの数値パラメータを受け取り、 色の赤・緑・青成分を表します。 ガマット内色は3成分とも[0, 1]の範囲です。 ホワイトポイントはD65です。

[SRGB] では「エンコーディング」と「典型」の2つの視聴条件を規定しています。[ICC]は色変換や最適視聴には「エンコーディング」条件の値（下記表）を推奨しています。

sRGBはCSSのデフォルト色空間であり、 レガシー色関数すべてに使われます。

特徴は次の通りです：

	x	y
赤色度	0.640	0.330
緑色度	0.300	0.600
青色度	0.150	0.060
白色度	D65
伝達関数	下記参照
白輝度	80.0 cd/m2
黒輝度	0.20 cd/m2
画像状態	display-referred（ディスプレイ基準）
パーセンテージ	R, G, Bで使用可能
パーセント参照範囲	R,G,B: 0% = 0.0, 100% = 1.0

let sign = c < 0? -1 : 1;
let abs = Math.abs(c);

if (abs <= 0.04045) {
  cl = c / 12.92;
}
else {
  cl = sign * (Math.pow((abs + 0.055) / 1.055, 2.4));
}

cはガンマエンコードされたR, G, B成分です。 clは対応する線形光成分です。

10.3. 定義済み線形光sRGB色空間：srgb-linear キーワード

sRGB-linear 定義済み色空間は srgb と同じですが、 伝達関数が線形光（ガンマエンコードなし）です。

srgb-linear

srgb-linear [SRGB] 色空間は3つの数値パラメータを受け取り、 色の赤・緑・青成分を表します。 ガマット内色は3成分とも[0, 1]の範囲です。 ホワイトポイントはD65です。

特徴は次の通りです：

	x	y
赤色度	0.640	0.330
緑色度	0.300	0.600
青色度	0.150	0.060
白色度	D65
伝達関数	恒等（unity）、下記参照
白輝度	80.0 cd/m2
黒輝度	0.20 cd/m2
画像状態	display-referred（ディスプレイ基準）
パーセンテージ	R, G, Bで使用可能
パーセント参照範囲	R,G,B: 0% = 0.0, 100% = 1.0

cl = c;

cは赤・緑・青成分。 clは対応する線形光成分で、同じ値です。

バンディング（階調の縞模様）を防ぐため、srgb-linearは srgb-linear の方が srgb よりも高い精度が必要です。

例えば、これらは同じ色です

 color(srgb 0.691 0.139 0.259)
 color(srgb-linear 0.435 0.017 0.055)

10.4. 定義済みDisplay P3色空間：display-p3 キーワード

display-p3

display-p3 [Display-P3] 色空間は3つの数値パラメータを受け取り、 色の赤・緑・青成分を表します。 ガマット内色は3成分とも[0, 1]の範囲です。 [DCI-P3]と同じ主色度を使いますが、 ホワイトポイントはD65であり、伝達曲線はsRGBと同じです。

現代のディスプレイ、テレビ、ノートPCやスマートフォンの画面は display-p3のガマットをすべて、またはほぼすべて表示できます。

特徴は次の通りです：

	x	y
赤色度	0.680	0.320
緑色度	0.265	0.690
青色度	0.150	0.060
白色度	D65
伝達関数	srgbと同じ
白輝度	80.0 cd/m2
黒輝度	0.80 cd/m2
画像状態	display-referred（ディスプレイ基準）
パーセンテージ	R, G, Bで使用可能
パーセント参照範囲	R,G,B: 0% = 0.0, 100% = 1.0

10.5. 定義済み線形光 Display P3 色空間: display-p3-linear キーワード

display-p3-linear

display-p3-linear 定義済み色空間は、伝達関数が 線形光である（ガンマ符号化がない）点を除いて、display-p3 と同じです。

これは以下の特性を持ちます:

	x	y
赤の色度	0.680	0.320
緑の色度	0.265	0.690
青の色度	0.150	0.060
白色度	D65
伝達関数	1、以下を参照
白輝度	80.0 cd/m2
黒輝度	0.80 cd/m2
画像状態	ディスプレイ参照
パーセンテージ	R、G、B に許可
パーセント参照範囲	R、G、B について: 0% = 0.0、100% = 1.0

cl = c;

c は赤、緑、青のいずれかの成分です。 cl は対応する線形光成分であり、同一です。

バンディングアーティファクトを避けるため、 より高い精度が必要です 。display-p3-linear には、display-p3 よりも高い精度が必要です。

例えば、これらは同じ色です

 color(display-p3 0.591 0.123 0.264)
 color(display-p3-linear 0.3081 0.014 0.0567)

10.6. 事前定義されたA98 RGB色空間: a98-rgbキーワード

a98-rgb

a98-rgb色空間は3つの数値パラメータを受け取ります。 それぞれ色の赤・緑・青成分を表します。 ガマット内の色は3成分すべてが[0, 1]の範囲です。 伝達曲線はガンマ関数ですが、正確に1/2.2ではありません。

特性は以下の通りです:

	x	y
赤の色度	0.6400	0.3300
緑の色度	0.2100	0.7100
青の色度	0.1500	0.0600
白の色度	D65
伝達関数	256/563
白色輝度	160.0 cd/m2
黒色輝度	0.5557 cd/m2
画像状態	ディスプレイ参照
パーセンテージ	R, G, Bに対し許可
パーセント基準範囲	R, G, Bについて: 0% = 0.0, 100% = 1.0

10.7. 事前定義されたProPhoto RGB色空間: prophoto-rgb キーワード

prophoto-rgb

prophoto-rgb 色空間は3つの数値パラメータを受け取り、 色の赤・緑・青成分を表します。 ガマット内色は3成分とも[0, 1]の範囲です。 伝達曲線は 1/1.8のガンマ関数で、黒付近には小さな線形部分があります。 ホワイトポイントはD50で、CIE Labと同じです。よって、 CIE Labへの変換にクロマティックアダプテーションは不要です。

ProPhoto RGB空間は、物理的に実現不可能な超高彩度の主色を使っています。 これは広い色域と、特にトーン操作時の色相シフトを最小にするために選ばれました。 デジタル写真でアーカイブ用の広色域色空間としてよく用いられます。prophoto-rgb色空間により、CSSで同じRGB値を持つ画像の色に一致する色を指定できます。

ProPhoto RGBは元々Kodakが開発し、 [Wolfe]に記載されています。 ISOで[ROMM],[ROMM-RGB]として標準化されました。

白輝度は範囲で示され、 視聴フレア（黒輝度）はその0.5%～1.0%です。

特徴は次の通りです：

	x	y
赤色度	0.734699	0.265301
緑色度	0.159597	0.840403
青色度	0.036598	0.000105
白色度	D50
伝達関数	下記参照
白輝度	160.0～640.0 cd/m2
黒輝度	本文参照
画像状態	display-referred（ディスプレイ基準）
パーセンテージ	R, G, Bで使用可能
パーセント参照範囲	R,G,B: 0% = 0.0, 100% = 1.0

const E = 16/512;
let sign = c < 0? -1 : 1;
let abs = Math.abs(c);

if (abs <= E) {
  cl =  c / 16;
}
else {
  cl = sign * Math.pow(c, 1.8);
}

cはガンマエンコードされたR, G, B成分です。 clは対応する線形光成分です。

10.8. 定義済みITU-R BT.2020-2色空間：rec2020 キーワード

rec2020

rec2020 [Rec.2020] 色空間は3つの数値パラメータを受け付けます。 それぞれ、色の赤・緑・青成分を表します。 ガマット内の色は３成分すべてが[0, 1]の範囲です （映像用語では「フルレンジ」）。 ITU Reference 2020は 超高精細（UHD）、4Kおよび8Kテレビに使われています。

主色点は物理的に実現可能ですが、 スペクトル軌跡付近に非常に近いため 実現は難しいです。

現時点のディスプレイではrec2020の全ガマットを再現することはできません。 ディスプレイの性能向上に伴い、カバレッジが徐々に広がっていくと予想されます。

特性は以下の通りです:

	x	y
赤の色度	0.708	0.292
緑の色度	0.170	0.797
青の色度	0.131	0.046
白の色度	D65
伝達関数	ガンマ2.40 ([REC_BT.1886]より)
画像状態	ディスプレイ参照
パーセンテージ	R, G, B に対し許可
パーセント基準範囲	R, G, Bについて: 0% = 0.0, 100% = 1.0

10.9. 定義済みCIE XYZ色空間：xyz-d50、xyz-d65、 xyz キーワード

xyz-d50、xyz-d65、xyz

xyz 色空間は3つの数値パラメータを受け取り、 X,Y,Z値を表します。 これはCIE XYZ[COLORIMETRY]色空間を表し、 拡散白が輝度（Y）1.0となるようスケールされます。 必要に応じて、参照白に対してクロマティックアダプテーションされます。

xyz-d50の参照白はD50、 xyz-d65およびxyzの参照白はD65です。

1.0/100%を超える値も許容され、丸めてはなりません。 Yが1.0を超える色は拡散白より明るい色を表します。 0/0%未満の値はまれですが、クロマティックアダプテーションの結果として現れることがあり、同様に丸めてはなりません。

特徴は次の通りです：

パーセンテージ	X,Y,Zで使用可能
パーセント参照範囲	X,Y,Z: 0% = 0.0, 100% = 1.0

これらは完全に同等です：

 #7654CD
 rgb(46.27% 32.94% 80.39%)
 lab(44.36% 36.05 -58.99)
 color(xyz-d50 0.2005 0.14089 0.4472)
 color(xyz-d65 0.21661 0.14602 0.59452)

これらの色は完全に同等で、白を表します：

 #FFFFFF
 color(xyz-d50 0.9643 1 0.8251)
 color(xyz-d65 0.9505 1 1.089)

10.10. 定義済み色空間からLabやOklabへの変換

すべての定義済みRGB色空間について、 Labへの変換には複数ステップが必要ですが、実際は最初以外のステップは線形計算でまとめられます。

1. ガンマ符号化されたRGBから線形ライトRGBへ変換（ガンマ符号化を解除）
2. 線形RGBからCIE XYZへ変換
3. 必要があれば、D65ホワイトポイント （sRGB、display-p3、a98-rgb およびrec2020で使用） をLabに使われるD50ホワイトポイントに変換。 線形Bradford変換を用いる。prophoto-rgbは すでにD50ホワイトポイント。
4. D50適応XYZからLabに変換

Oklabへの変換も似ていますが、 色順応ステップはprophoto-rgbでのみ必要です。

1. ガンマ符号化されたRGBから線形ライトRGBへ変換（ガンマ符号化を解除）
2. 線形RGBからCIE XYZへ変換
3. 必要があれば、D50ホワイトポイント （prophoto-rgbで使用） をOklabで使われているD65ホワイトポイントに変換。 線形Bradford変換を用いる。
4. D65適応XYZからOklabに変換

これら変換のサンプルJavaScriptコードは § 19 色変換のサンプルコードにあります。

10.11. LabやOklabから定義済みRGB色空間への変換

Labからdisplay-p3やrec2020などの定義済み空間への変換も 複数ステップが必要で、実際は最後以外のステップは線形計算でまとめられます。

1. Labを(D50適応済み)XYZへ変換
2. 必要ならLabが使うD50ホワイトポイントを D65ホワイトポイント（sRGBやほとんどのRGB空間で使用）に 線形Bradford変換で合わせる。prophoto-rgbは不要。
3. (D65適応済み)CIE XYZから線形RGBへ変換
4. 線形光RGBからRGBへ変換（ガンマエンコード）

Oklabからの変換も同様ですが、 クロマティックアダプテーションは prophoto-rgbのみ必要です。

1. Oklabを(D65適応済み)XYZへ変換
2. 必要ならOklabが使うD65ホワイトポイントを D50ホワイトポイント（prophoto-rgbで使用）に 線形Bradford変換で合わせる。
3. (D65適応済み)CIE XYZから線形RGBへ変換
4. 線形光RGBからRGBへ変換（ガンマエンコード）

これら変換のサンプルJavaScriptコードは § 19 色変換のサンプルコードにあります。

実装はこの手順以外の方法（ICCプロファイルの相対的色域レンダリングなど）でも、 ソース・宛先ガマット内の色で結果が一致する限り選択可能です。

10.12. 定義済みRGB色空間間の変換

定義済みRGB色空間間の変換も 複数ステップが必要で、 ホワイトポイントが異なる場合のみ必要なステップがあります。 srcからdestに変換する場合：

1. ガンマエンコード済みsrcRGBから線形光srcRGBへ変換（ガンマ解除）
2. 線形srcRGBからCIE XYZへ変換
3. srcとdestでホワイトポイントが異なる場合、 XYZ値をsrcWhiteからdestWhiteへ 線形Bradford変換で合わせる。
4. CIE XYZから線形destRGBへ変換
5. 線形光destRGBからdestRGBへ変換（ガンマエンコード）

これら定義済みRGB色空間の変換サンプルJavaScriptコードは § 19 色変換のサンプルコードにあります。

10.13. シンプルなアルファ合成

描画時、実装は Compositing Level 1 §5.1 シンプルなアルファ合成（[Compositing]）の規則に従ってアルファを扱わなければなりません。

11. 色変換

11.1. 色の変換の概要

色は、 ある色空間から別の色空間へ変換でき、 色域マッピングが行われず、 かつ各色空間が色域外の色を表現できる場合、 （RGB 色空間では、これは伝達関数が拡張範囲全体にわたって定義されていることを意味する） （数値精度と丸め誤差の影響を受けるものの） 2 つの色は同じように見え、同じ色感覚を表す。

歴史的な理由により、解析時には、 一部の従来の色 構文による色はクランプされる。 しかし一般に、そのようなクランプは望ましくない。 これはラウンドトリップを妨げ、 複数回の色変換を通じて誤差が累積するためである。

したがって、色変換の結果はクランプされないため、 色域外の色や、 実際には存在しない色、 たとえばスペクトル軌跡の外側の色、 さらには明度が負の色や 明度が許容される最大値を超える色が生じる場合がある。

11.2. 色を変換するためのアルゴリズム

12. <color>値の比較

二つの<color>値は、下記のアルゴリズムで等しいと判定された場合等価色とみなす。 この比較は例えば style()コンテナクエリ [CSS-CONDITIONAL-5] や CSS Transitions [CSS-TRANSITIONS-1] で色値の変化を判断するのに使われる。

二つの<color>値 C1 と C2 については、 下記アルゴリズムが true を返す場合に限り 等価色とする：

1. C1 と C2 のそれぞれについて、 すべての無力な成分を欠落成分に変換します。
2. C1 と C2 が同じ<color-space>を共有する場合：
   1. アルファチャンネルを含め、 それぞれの成分を1つずつ比較します。 欠落成分は、 別の欠落成分とのみ等しくなります。 2つの数値成分は、その差が小さな 実装定義の ε 以下である場合、 等しいとみなされます。
   2. すべての成分が等しいと比較された場合に限り、 true を返します。
3. それ以外の場合、C1 と C2 は異なる<color-space>にあります。 いずれかの色に少なくとも1つの欠落成分がある場合、 false を返します。
4. それ以外の場合、どちらの色にも欠落成分はありません。 C1 と C2 の両方をoklabに変換し、 変換された色のすべての成分（アルファを含む）が 等しいと比較された場合に限り true を返します。 標準化された Oklab の ε 0.00001 を使用します。

注: 異なる構文形式で表現され、 同じ <color-space> に属する2つの色が、 測色的に同一である場合—例えば、 red と color(srgb 1 0 0)—これらは、このアルゴリズムのステップ2により等価な色である。

注: 異なる <color-space> で表現された2つの色が、 測色的に同一である場合—例えば、 red と color(display-p3 0.91748756 0.20028681 0.13856059)—これらは、このアルゴリズムのステップ4により等価な色である。 これは、同じ oklab 値に変換されるためである。

この比較においてrgb()， rgba()， hsl()， hsla()， hwb()， hexカラー， 名前付き色， システム色は すべてsrgbの <color-space>とみなす。

13. 色補間

色の補間は グラデーション、 合成、 フィルター、 トランジション、 アニメーション、 そして 色混合および色修正関数で発生します。

二つの<color>値の間の補間は、 以下の手順を実行することで行われます：

1. 2つの色について対応する成分 および対応する集合を確認する。 これらは引き 継がれる
2. （変換が必要な場合）無力な成分を欠落値に変更する
3. （必要な場合）両方を所定の色空間に変換する。 この色空間は以下で補間色空間と呼ぶ。
4. （必要な場合）変換された色に引き継がれた値を再挿入する
5. 欠落している成分を、もう一方の色の成分値で埋める
6. （必要な場合）選択された <hue-interpolation-method> に応じて色相を調整する
7. 色成分を事前乗算済み形式に変更する
8. 色の算出値の各成分を個別に線形補間する
9. 事前乗算を元に戻す

currentcolor への、またはそこからの補間が可能です。 この目的で使用される数値は使用値です。

13.1. 成分ごとの線形補間

各色成分が最終結果にどの程度寄与するかを概念化する方法は2つあります。 色量と色進行度です。 どちらも同じ結果を与えます。単に異なる思考モデルです。

色量

合計が100%になるよう正規化された割合の組 Qa と Qb、 および色成分値の組 Ca と Cb が与えられた場合、 補間結果は (Ca × Qa) + ( Cb × Qb) です。

色進行度

割合の進行度 P および開始成分値と終了成分値 Cs と Ce が与えられた場合、 補間結果は (Cs × (1 - P) + Ce × P) です。

したがって、あるモデルから別のモデルへ変換する場合、進行度は2番目の色の量です。

13.2. 補間のための色空間

CSS のさまざまな機能は色の補間に依存しています。

補間するには、色が同じ色空間に存在する（または同じ色空間に変換される）必要があります。

色の混合やその他の方法による結合は、 使用する補間色空間に応じて異なる結果になります。 したがって、補間の用途ごとに異なる色空間がより適切な場合があります。

• 場合によっては、2つの有色光を物理的に混合した結果が望まれる。 その場合、CIE XYZ、display-p3-linear、または srgb-linear 色空間が適している。これは、 これらが光強度に対して線形だからである。

• 色を知覚的に等間隔にする必要がある場合（グラデーションなど）、 Oklab 色空間（および程度は低いが、より古い Lab）は、 知覚的に均一になるよう設計されている。

• 色の混合で灰色がかることを避けたい場合、すなわち遷移全体を通じて彩度を最大化したい場合、 OkLCh（および程度は低いが、より古い LCH）が その用途に適している。

• 最後に、従来の Web コンテンツとの互換性が最も重要な考慮事項となる場合がある。 線形光でも知覚的に均一でもない sRGB 色空間が、ここでは選択肢となる。 たとえ結果が劣る（過度に暗い、または灰色がかった混色になる）としてもである。

これらの機能を総称してホスト構文と呼びます。

ホスト構文が補間色空間を指定できるようにするため、 この仕様では color-interpolation-method 生成規則を公開します。 これはこの仕様自体では使用されず、 他の仕様が使用できるよう公開されているだけです。 例えば、CSS Images 4 § 3.1 線形 グラデーション：linear-gradient() 記法での使用を参照してください。

ホスト構文は、 各場合におけるデフォルトの補間色空間を定義するべきであり、 できれば作者がこのデフォルトを上書きするための構文も提供するべきです。 そのような構文がプロパティ値の一部である場合、 他の仕様から容易に参照できるよう以下で定義する color-interpolation-method 生成規則を使用するべきです。 これにより CSS 全体での一貫性が確保され、 色補間の実行方法に対する今後のカスタマイズも CSS 全体へ自動的に波及できるようになります。

<color-space> = <rectangular-color-space> | <polar-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
<hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue
<color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<rectangular-color-space> および<polar-color-space> の定義に含まれるキーワードは、 それぞれ対応する色空間を参照します。 CSS では、同じ名前の関数構文、 または（そのような関数が存在しない場合）、 color() 関数内の対応する<ident> によって 表されます。

ホスト構文が補間を どの色空間で行うかを定義していない場合、 デフォルトは Oklab です。

<polar-color-space> について、 <hue-interpolation-method> が指定されていない場合、 デフォルトはshorter です。

ただし、ユーザーエージェントは、 従来の sRGB 色形式 （16進色、名前付き色、 rgb()、hsl()、またはhwb() およびアルファを含む同等形式） 間の補間を、ガンマエンコードされた sRGB 空間で処理しなければなりません。 これにより Web 互換性が提供され、 従来の sRGB コンテンツはデフォルトで sRGB 空間内で補間されます。

これはまた、作者が、 sRGB 色同士であっても、 少なくとも一方の色に非従来形式の color(srgb r g b) を使用するか、 または補間色空間を明示的に指定することで、 より良い補間を選択できることも意味します。

補間する色が 補間色空間の色域外にある場合、 その空間に変換されると、 範囲外の値が含まれることになります。

これらはクリップされません。値はそのまま補間されなければなりません。

13.3. 欠落した成分を含む補間

2つの色を 補間色空間に変換する過程で、 欠落 成分は 値 0 に置き換えられる。

したがって、2つの色を補間する最初の段階は、 入力色内の欠落成分を分類し、 それらを 補間色空間の成分と比較することである。 欠落成分である対応する 成分が見つかった場合、 それらは引き継がれ、 変換された色に再挿入される。 これは事前乗算の前、かつ 線形補間が行われる前に行われる。

同様に、元の色における 対応する集合 （以下で定義）のすべての成分が 欠落 成分である場合、 それらはすべて引き 継がれ、 補間色空間の 対応する対応する集合に 再挿入される。

アルファはそれ自体が対応する成分であり （アルファはアルファに対応する）、 欠落アルファは、 他の欠落成分と まったく同じ方法で 引き継がれる。

対応する 成分は次のとおりである。

注: この分類の目的では、 XYZ 空間は超高彩度の RGB 空間とみなされる。 また、彩度は明度に依存するにもかかわらず、 ここではクロマと同じカテゴリに属する。 HWB の白色度および黒色度成分には、 他の色空間に対応するものはない。

さらに、任意の2つの色空間について、 すべての対応する成分を取り除いた後に 残る成分は、 成分の対応する集合を 形成する。

注: 個別の対応する成分が存在しない場合に 残る対応する集合は すべての色成分の完全な集合であるため、 すべての色成分が欠落している色は、 補間色空間でも すべての色成分が欠落する。

 lch(50% 0.02 none)
 color(display-p3 0.7 0.5 none)

 oklch(56.897% 0.0001 0)
 oklch(63.612% 0.1522 78.748)

 oklch(56.897% 0.0001 none)
 oklch(63.612% 0.1522 78.748)

引き継がれた欠落成分を持つ色を、 その成分が欠落していない 別の色と 補間する場合、 欠落成分は もう一方の色の成分値を 持つものとして扱われる。

したがって、 引き継がれる成分の特定は、 無力な 成分の処理よりも前に行わなければならない。 これは、その値がゼロに変換されることを防ぐためである。

 oklch(78.3% 0.108 326.5)
 oklch(39.2% 0.4 none)

 oklch(78.3% 0.108 326.5)
 oklch(39.2% 0.4 326.5)

 oklch(78.3% 0.108 326.5)
 oklch(39.2% 0.4 0)

引き継がれた欠落成分が アルファである場合、その色は、色変換によって得られるはずだった ゼロ値ではなく、この引き継がれた値を使用して事前乗算しなければならない。

 oklch(0.783 0.108 326.5 / 0.5)
 oklch(0.392 0.4 0 / none)

 oklch(78.3% 0.108 326.5 / 0.5)
 oklch(39.2% 0.4 0 / 0.5)

両方の色で所定の成分が欠落している場合、 補間された色でも その成分は欠落する。

13.4. アルファを含む補間

補間する色が完全に不透明でない場合、 最初に次のように事前乗算されます。

• アルファ値がnone の場合、事前乗算された値は事前乗算されていない値です。 それ以外の場合、

• いずれかの成分値がnone の場合、事前乗算された値もnone です。

• 直交直交座標色座標系では、 すべての成分値にアルファ値を乗算します。

• 円筒極座標色座標系では、色相 角には事前乗算しませんが、他の2つの軸には事前乗算します。

事前乗算された色値から色値を得るには、

• 補間されたアルファ値がゼロまたはnone の場合、 事前乗算を解除した値は事前乗算された値です。それ以外の場合、

• いずれかの成分値がnone の場合、 事前乗算を解除した値もnone です。

• それ以外の場合、事前乗算されていた各成分を 補間されたアルファ値で除算します。

linear-gradient(90deg, red, transparent, blue)

極座標色空間と直交座標色空間の両方について、 アルファの事前乗算および事前乗算解除を行うサンプル JavaScript コードが、 § 19 色変換のサンプルコードにあります。

13.5. 色相の補間

色相角を持つ色関数（LCH、HSL、HWB など）には、複数の補間方法があります。 360° を超える弧が望まれることはほとんどないため、 色相角は補間前に調整され、 成分ごとの補間が360°未満、多くの場合180°未満で行われるようにします。

ホスト構文は、色相補間について以下のいずれかのアルゴリズムを指定できます （以下の角度は度単位ですが、指定方法に関係なくロジックは同じです）。 色相補間戦略の指定は、すでに<color-interpolation-method> 構文の一部であり、 <hue-interpolation-method> トークンを介して行われます。

別途指定されない限り、ホスト構文によって特定の色相補間アルゴリズムが選択されていない場合、 デフォルトは shorter です。

注: 念のため、 補間される色が指定された補間色空間にすでに属していない場合、 それらを変換すると、すべての無力な成分が欠落成分になる。

13.5.1. shorter

色相角は、開始色相と終了色相の間にある2つの弧のうち 短い方を通るように補間されます。

角度は θ₂ - θ₁ ∈ [-180, 180] となるよう調整されます。擬似 JavaScript では次のようになります。

if (θ₂ - θ₁ > 180) {
  θ₁ += 360;
}
else if (θ₂ - θ₁ < -180) {
  θ₂ += 360;
}

13.5.2. longer

色相角は、開始色相と終了色相の間にある2つの弧のうち 長い方を通るように補間されます。

角度は θ₂ - θ₁ ∈ {(-360, -180], [180, 360)} となるよう調整されます。擬似 JavaScript では次のようになります。

if (0 < θ₂ - θ₁ < 180) {
  θ₁ += 360;
}
else if (-180 < θ₂ - θ₁ <= 0) {
  θ₂ += 360;
}

13.5.3. increasing

色相角は、 最初の色から2番目の色へ進むにつれて、 角度が常に増加するように補間されます。 角度が360まで増加するとゼロにリセットされ、 その後も増加し続けます。

2つの角度の差に応じて、 これは shorter または longer と同じ見た目になります。 ただし、一方の色相角がアニメーションされ、 色相角の差が180度を通過しても、 補間がもう一方の弧へ切り替わることはありません。

角度は θ₂ - θ₁ ∈ [0, 360) となるよう調整されます。擬似 JavaScript では次のようになります。

if (θ₂ < θ₁) {
  θ₂ += 360;
}

13.5.4. decreasing

色相角は、 最初の色から2番目の色へ進むにつれて、 角度が常に減少するように補間されます。 角度が0まで減少すると360にリセットされ、 その後も減少し続けます。

2つの角度の差に応じて、 これは shorter または longer と同じ見た目になります。 ただし、一方の色相角がアニメーションされ、 色相角の差が180度を通過しても、 補間がもう一方の弧へ切り替わることはありません。

角度は θ₂ - θ₁ ∈ (-360, 0] となるよう調整されます。擬似 JavaScript では次のようになります。

if (θ₁ < θ₂) {
  θ₁ += 360;
}

14. ガマットマッピング

14.1. ガマットマッピング入門

注: このセクションは、 文書の他の箇所で説明されている 個別要件の重要な背景を提供します。

このセクションは規定的ではありません

元の色空間の色を 別の色空間（ガマットがより小さい）に変換すると、 一部の色は変換先のガマット外になります。

色の中間計算では、 このガマット外の値が保持されます。 しかし、変換先がディスプレイ機器 （スクリーンやプリンター等）の場合は ガマット外の値はガマット内の色へ変換しなければなりません。

ガマットマッピングは、 見た目の変化ができるだけ目立たないガマット内色を求める処理です。

ガマット外色の中には 現実世界で再現可能な色（物理的に再現できるもの）もありますが、 他は仮想的な色 （スペクトル軌跡の外に位置し、単一波長が100%以上必要となるため） であり、物理的に現実化することはできません。 そのような色は主に 「この色を100倍彩度高くしろ」などの計算から生じます。

14.1.1. クリッピング

最も簡単で受け入れ難い方法は、 要素値を単純に表示可能な範囲にクリップすることです。

この方法の動機は高速化であるため、 多くの場合、線形ライトへ変換せず ガンマ符号化された値のままクリッピングされます。

この結果、 3つの基本色（RGBディスプレイの場合）の 割合が変わり、 色相がずれます。