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; }   /* 色キーワード  */
em { color:  rgb(0 255 0); } /* RGB 範囲 0-255   */
em { color:  rgb(0% 100% 0%); } /* RGB 範囲 0%-100% */
em { color:  color(sRGB 0 1 0); } /* sRGB 範囲 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>

特に指定がない限り、 色の<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つ以上の欠落色成分が存在することがあります。

この仕様では、 一部の色（例えば白）の色相補間によって 自動的に発生します。 他の仕様で成分が自動的に欠落する追加の状況を定義することもできます。

また、色関数の成分に noneキーワードを指定することで、 明示的に指定することもできます。 すべての色関数 （レガシーカラー構文を使用するものは除く） で、任意の成分をnoneとして指定可能です。

この指定は慎重に行うべきであり、 特定の効果が必要な場合のみに使用してください。

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

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

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

4.4.1. 「無効」な色成分

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

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

無効成分が手動で指定された場合は、通常通り動作します。 無効だからといって、特別な効果はありません。

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

円筒極座標色空間へ色空間変換を行う場合、 ユーザーエージェントは、色相成分が クロマ（またはhslの彩度など色度の指標）が その色空間で指定されたイプシロン（ε）未満であれば、 無効として扱うべきです。 例えば、グレーをoklch()に変換した場合、 数値誤差により、クロマが正確に0%ではなく極めて小さい値になることがありますが、 その場合も色相成分は無効となります。

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>キーワードはライトモードやダークモードの変更にも対応します。

ただし、強制カラーモードでは、 ページ上のほとんどの色が制限されたユーザー選択パレットに強制されます。 <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

特別にマークされたテキストの背景（HTMLmark要素など）。

MarkText

特別にマークされたテキストの文字色（HTMLmark要素など）。

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>には§ 21 プライバシーの考慮や§ 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%（完全に黒）までです。

これらの範囲外の値は 無効ではありません; 色相角が[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の問題をある程度緩和します。 実装例は § 19.1 Δ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 ですが、 サンプルは § 19.2 Δ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は本仕様レベルで新しく導入されたため、 Web互換性の問題はありません。 そのため、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が欠落している場合、a = b = 0
2. それ以外の場合、
   1. a = C cos(H)
   2. b = C sin(H)
3. 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 | 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と 同じですが、伝達関数が 線形ライト（ガンマ符号化がありません）である点だけが異なります。

特性は以下の通りです: