Copyright © 2025 the Contributors to the Design Tokens Resolver Module 2025.10 Specification, published by the Design Tokens Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available.
本書はデザイントークンの色の値および不透明度に関する技術仕様を記述します。
この仕様は Design Tokens Community Group によって公開されました。これは W3C 標準でも、 W3C Standards Track 上の仕様でもありません。 W3C Community Final Specification Agreement (FSA) のもとで他の条件が適用されることにご留意ください。 W3C コミュニティ＆ビジネスグループ についての詳細はこちらをご覧ください。
このセクションでは、この文書が公開された時点での状態について説明します。他の文書が本書を置き換える場合があります。現在の W3C コミュニティグループの報告書および最新版のレポートは https://www.w3.org/community/reports/ の索引から参照できます。
この文書は DTCG によって Candidate Recommendation として、W3C プロセスが定める定義に従い発行されました。本ドラフトへの貢献は Community Contributor License Agreement (CLA) に従い、W3C コミュニティグループプロセス で規定された内容が適用されます。
W3C 勧告ではありませんが、本分類は広範な合意形成を経た上で、この仕様が実装を目的としていることを明確にするものです。
この仕様は安定とみなされます。 以後のアップデートは上位互換仕様で提供されます。
この仕様の議論は GitHub Issues で行うことを推奨します。
非規範的と記されたセクションに加え、本仕様内のすべての作成ガイドライン、図、例、および注記は非規範的です。それ以外の本仕様の内容はすべて規範的です。
この文書内の MAY, MUST, MUST NOT というキーワードは、BCP 14 [RFC2119] [RFC8174] で示されている通り、 ここに示されたようにすべて大文字で出現するときに限り、その説明に従って解釈されます。
カラートークンは、異なるカラースペースで色を表現するために使用できます。トークンで表された色は、変換ツールによって他のカラースペースに変換することができます。
一般的に、このモジュールは概念や用語の参照として CSS Color Module Level 4 を採用しています。CSS Color Module Level 4 は W3C ワーキングドラフトであり、最終仕様ではありません。内容は変更される可能性があり、すべてのブラウザやプラットフォームで実装されているわけではありません。
このセクションでは本仕様で使われている用語の概要と、それが色の科学や色の計測学とどのように関係しているかを高い視点から説明します。
カラースペース
カラースペースとは、色を特定の方法で体系化したもので、物理・デジタルの両方の分野で色を再現するのに役立ちます。これにより、表現・操作可能な色の範囲が定義されます。
カラーモデル
カラーモデルは、特定のカラースペース内の色を数学的に表現したものです。これは、通常、成分を使って色が数値としてどのように表されるかを定義します。
色域（ガンマット）
色域とは、特定のカラースペースで表現できる全色範囲のことです。その空間で再現可能な色の限界を定義します。
成分
成分とは、特定のカラースペース内で色を構成する単一の値を指します。例えば RGB カラースペースでは、成分は赤、緑、青です。
色相（ヒュー）
色相は、色を「赤」「緑」「青」などに分類できる属性です。多くのカラースペースでは、色相はカラーホイール上の角度として表されます。異なるカラースペースではホイール上での色の配置が異なる場合があります。
彩度
彩度は、その色自体の明るさに対する色の鮮やかさです。色のグレー成分の量を示し、完全に彩度の高い色はグレー成分を持たず、彩度が低いほど色はグレーがかります。これは特に クロマ や 明度 と関連し、HSL や HSV モデルで顕著です。色は非常に彩度が高くても、明度によって明るくも暗くも見えます。
明度
明度は、色の明るさの知覚的な度合いです。色がどれだけ明るく暗く見えるかを示します。
クロマ（色度）
クロマとは、同様に照明された白の明るさに対する色の純度や鮮やかさを表します。CIE LCH（明度、クロマ、色相）カラーモデルでは、クロマは明度から独立しており、中性色（グレー）からどれだけ離れているかを示します。
アルファ
アルファは、色の透明度を表す成分です。最小値（通常0）が完全に透明、最大値（通常1）が完全に不透明になります。
色を表します。
カラートークンでは、$type プロパティは MUST 文字列 color に設定されます。
$value プロパティで色の詳細を指定できます。$value オブジェクトは以下のプロパティを持ちます。
colorSpace (必須): カラースペース あるいは カラーモデル を指定する文字列。対応スペースは下の 対応カラースペース セクションを参照。components (必須): 色の 成分 を表す配列。成分数はカラースペースに依存します。配列の各要素は MUST 以下のいずれか:
alpha (任意): 色の アルファ 値を表す数値。値は 0 〜
1（0 は完全に透明、1 は完全に不透明）。省略された場合、アルファ値は 1（完全不透明）であると MUST みなします。
hex (任意): フォールバック色を表す文字列。フォールバック色は提供されるアルファ値との衝突を避けるため MUST 6桁の CSS 16進数表記 で記述されます。一部のカラースペースで色を指定する際、値 0 は曖昧になり得ます。例えば HSL では 色相 が 0 の色は赤ですが、単独の
hsl(0, 0, 50) は赤には表示されず、他色との補間で完全に脱彩した赤として扱われ得ます。したがって特定の色空間では、0
だけでは成分に値が存在しないことを示すには不十分です。
CSS Color
Module Level 4 は成分が欠落または非適用であることを示すため none キーワードを導入しました。例えば HSL では
none を使い角度が無いことを示せます。色相が none の色は角度 0 の色とは異なる表示や 補間結果になる MAY があります。
components 配列内で none キーワードを用いることで、その成分が非適用または未指定であることを示すことが MAY です。
以下は色相を 0 とした例との比較です:
どちらも白に表示されますが、前者は色相が非適用であることをより明示的に示しています。補間や混色で 0 と none
を使う場合、結果が異なる可能性があるため重要です。
colorSpace プロパティに指定可能な値一覧です。components 配列はカラースペースにより異なります。
| カラースペース | キー | 値 | |
|---|---|---|---|
| sRGB | "srgb" |
Red | [0 - 1] |
| Green | [0 - 1] | ||
| Blue | [0 - 1] | ||
| sRGB linear | "srgb-linear" |
Red | [0 - 1] |
| Green | [0 - 1] | ||
| Blue | [0 - 1] | ||
| HSL | "hsl" |
Hue | [0 - 360) |
| Saturation | [0 - 100] | ||
| Lightness | [0 - 100] | ||
| HWB | "hwb" |
Hue | [0 - 360) |
| Whiteness | [0 - 100] | ||
| Blackness | [0 - 100] | ||
| CIELAB | "lab" |
Lightness | [0 - 100] |
| A | [-Infinity - Infinity]* | ||
| B | [-Infinity - Infinity]* | ||
| LCH | "lch" |
Lightness | [0 - 100] |
| Chroma | [0 - Infinity]** | ||
| Hue | [0 - 360) | ||
| OKLAB | "oklab" |
Lightness | [0 - 1] |
| A | [-Infinity - Infinity]† | ||
| B | [-Infinity - Infinity]† | ||
| OKLCH | "oklch" |
Lightness | [0 - 1] |
| Chroma | [0 - Infinity]‡ | ||
| Hue | [0 - 360) | ||
| Display P3 | "display-p3" |
Red | [0 - 1] |
| Green | [0 - 1] | ||
| Blue | [0 - 1] | ||
| A98 RGB | "a98-rgb" |
Red | [0 - 1] |
| Green | [0 - 1] | ||
| Blue | [0 - 1] | ||
| ProPhoto RGB | "prophoto-rgb" |
Red | [0 - 1] |
| Green | [0 - 1] | ||
| Blue | [0 - 1] | ||
| Rec 2020 | "rec2020" |
Red | [0 - 1] |
| Green | [0 - 1] | ||
| Blue | [0 - 1] | ||
| XYZ-D65 | "xyz-d65" |
X | [0 - 1] |
| Y | [0 - 1] | ||
| Z | [0 - 1] | ||
| XYZ-D50 | "xyz-d50" |
X | [0 - 1] |
| Y | [0 - 1] | ||
| Z | [0 - 1] | ||
sRGB は CSS Color Module 4 以前のすべての CSS 色の標準カラースペースでした。Webで最も広く使われ、多くのデザインツールのデフォルトです。
[Red, Green, Blue]
0 〜 1 の数値で赤成分を表します。0 〜 1 の数値で緑成分を表します。0 〜 1 の数値で青成分を表します。sRGB の詳細は Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB を参照。
sRGB linear は sRGB を線形化したもので、線形色空間での表現に一部ツールが使用します。
[Red, Green, Blue]
0 〜 1 の数値。0 〜 1 の数値。0 〜 1 の数値。sRGB linear の詳細は Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB を参照。
HSL は sRGB の極座標変換による カラーモデル で、CSS Color Level 3 からサポートされています。
[Hue, Saturation, Lightness]
HSL の詳細は HSL: light vs saturation を参照。
sRGB の別の極座標変換による カラーモデル。
[Hue, Whiteness, Blackness]
0 以上 360 未満でホイール上角度。0 〜 100 白の割合。0 〜 100 黒の割合。HWB の詳細は HWB — A More Intuitive Hue-Based Color Model を参照。
CIELAB は知覚的に一様となるよう設計されたカラースペースです。
[L, A, B]
0 〜 100 の明度割合。A と B は理論的に無限範囲ですが実際は -160 〜 160 を超えません。
CIELAB の詳細は ISO/CIE 11664-4:2019(E): Colorimetry — Part 4: CIE 1976 L*a*b* colour space を参照。
LCH は CIELAB の円柱表現です。
[L, C, Hue]
0 〜 100 の明度。0 以上 360 未満の色相角。C の最小値 0 は中性色（グレー）を表し、最大値は理論的に無限ですが実際は 230 を超えません。
LCH の詳細は CSS Color Module Level 4 の CIELAB / LCH セクション を参照。
OKLAB は CIELAB より高精度を目指した知覚的に一様な カラースペース です。
[L, A, B]
0 〜 1 の明度。CIELAB 同様 A と B は理論的に無限範囲ですが実際は -0.5 〜 0.5 を超えません。
OKLAB の詳細は OKLAB: A Perceptually Uniform Color Space を参照。
OKLCH は OKLAB の円柱 カラーモデル です。
[L, Chroma, Hue]
0 〜 1 の明度。0 以上 360 未満の色相角。LCH と同様 Chroma の最小値 0 は中性色（グレー）を表し、最大は理論的に無限ですが実際は 0.5 を超えません。
OKLCH の詳細は OKLAB: A Perceptually Uniform Color Space を参照。
Display P3 は広い色 色域 を持つディスプレイ用に設計された カラースペース で、デジタルシネマの P3 スペースを基にしています。
[Red, Green, Blue]
0 〜 1。0 〜 1。0 〜 1。Display P3 の詳細は Display P3 の定義 を参照。
A98 RGB は広色域ディスプレイ向けに設計されたカラースペースで、Adobe RGB を基にしています。
[Red, Green, Blue]
0 〜 1。0 〜 1。0 〜 1。A98 の詳細は Adobe RGB color space の Wikipedia 記事 を参照。
ProPhoto RGB は広色域ディスプレイ向けに設計されたカラースペースで、ProPhoto RGB を基にしています。
[Red, Green, Blue]
0 〜 1。0 〜 1。0 〜 1。ProPhoto RGB の詳細は Design and Optimization of the ProPhoto RGB Color Encodings を参照。
Rec 2020 は広色域ディスプレイ向けに設計されたカラースペースで、Rec 2020 を基にしています。
[Red, Green, Blue]
0 〜 1。0 〜 1。0 〜 1。Rec 2020 の詳細は Recommendation ITU-R BT.2020-2: Parameter values for ultra-high definition television systems for production and international programme exchange を参照。
XYZ-D65 は人間の知覚し得る全色を表現可能とする目的で設計されたカラースペースです。全ての他スペースは XYZ へ相互変換可能な基礎的スペースで、CIE 1931 色空間（D65 光源）に基づきます。デザインツールで一般的ではありませんが変換に有用です。
[X, Y, Z]
0 〜 1。0 〜 1。0 〜 1。XYZ-D65 の詳細は Colorimetry, Fourth Edition. CIE 015:2018 を参照。
XYZ-D50 は XYZ-D65 に類似しますが D50 光源を使用します。
[X, Y, Z]
0 〜 1。0 〜 1。0 〜 1。XYZ-D50 の詳細は Colorimetry, Fourth Edition. CIE 015:2018 を参照。
将来の版では、採用状況およびデザインツールでのサポートに応じて追加のカラースペースがサポートされる可能性があります。
このセクションは規範的ではありません。
ガマットマッピングは、色をある色空間から別の色空間へ変換するプロセスです。
元の色空間がターゲット色空間より広いガマットを持つ場合、ガマットマッピングが必要になります。例えば、広色域色空間（Display-P3など）からより狭いガマットの色空間（sRGBなど）への変換時に発生します。ガマットマッピングによって、すべての色が完全に表現できない場合でも、ターゲット色空間で色が正確に再現されるようにします。
色の変換時、変換ツールはユースケースに最適なガマットマッピングアルゴリズムを使用してもよいです。例えば、色の見た目を維持することが目的なら知覚的なガマットマッピングアルゴリズムが使われます。色値の正確な保持が目的なら、飽和型や相対色度的ガマットマッピングアルゴリズムが使われる場合があります。
トークン作者は、ガマットマッピングアルゴリズムの選択がターゲット色空間での色の見え方に大きく影響することを理解しておくべきです。もし色空間間で変換が必要な場合は、変換ツールの出力を検証し、色が正確かつ一貫して表現されることを確認してください。
このセクションは規範的ではありません。
多くの場合、色を補間（ブレンド）して新しい色を作り出すことがあります。例えば、グラデーションを作る際には、2色以上のキーとなる色の間で色を補間します。
補間はさまざまな色空間内で行うことができ、色空間の選択によって生成される色の見え方が変わります。変換ツールは色空間や求める効果に応じて異なる補間方法を使用してもよいです。作者は、色空間ごとの補間の影響を理解し、デザイン要件を満たしているか補間結果を検証する必要があります。
このセクションは規範的ではありません。
この仕様で継続的に参照するデザイントークンの主なカテゴリは3つあります。
ベーストークンは最も下位レベルのトークンです。
デザイントークンの値は別のトークンへの参照となることがあります。同じ値でも複数の名前やエイリアスを持つ場合もあります。
コンポーネント固有のトークンは、コンポーネントレベルでデザイン意思決定を提供し、トークンアーキテクチャにおける関心事の分離を改善します。
デザイントークン、特にカラータイプトークンの命名にはさまざまなオプションがありますが、記述的・数値的の2つが特によく実装されています。
ベーストークンについては、各バージョンでこのように表現できます：
記述的名称は、草やスイカのような具体的に人が触れるものに関連するため、より感情的で親しみやすいことが多いです。
| 長所 | 短所 |
|---|---|
| 一部の人にとって識別しやすく、ブランドカラーとプロダクトカラーを区別するためにも使える | 色のスケールを判断しにくい（例：どれが明るいか暗いか、どう組み合わせると合うのか等） |
| 名前が非英語話者には伝わりづらい場合あり。多言語チームには適さない場合がある |
数値トークンは、色の変化を明確にするためスケールに従うことが一般的です。例えば、順序スケールを使う場合、color.blue.500がベースカラーとなり、最も明るい値はcolor.blue.100、最も暗い値はcolor.blue.900となり、その間は100ごとに順に並びます。スケーラビリティのため、連番（例：1,2,3,4）は避けましょう。
数値トークン名はさらに細かい区分けも可能です。例えばニュートラルパレット（グレー系）なら、スケールを明るい値で25単位、以降は100単位で増えるようにする場合もあります。
数値トークンは境界スケールでも命名できます。HSLのLightness値のような、カラー自体の値に基づいて識別値を持たせます。
トークン名は、ユーザーがベース名を指定し、ツールが値の違いに応じてスケール番号を付与することでツールによって生成されることもあります。
| 長所 | 短所 |
|---|---|
| 異なるトークン間でカラーコントラストの対応付けが容易。例として、100〜400トークンは500〜900トークンと組み合わせてアクセシビリティのある色の組み合わせが作りやすい。 | 記憶しづらく、トークン間の違いが分かりにくい |
| 境界スケールを使う場合、トークン名で値の特徴を示しやすい |
エイリアストークンについては、意図が近いものをカテゴリ＋プロパティの並びでグループ化することを推奨します。例えば、背景用エイリアストークンはcolor.background.XXXの形で始まることが多いです。
省略形は避け、「bg」ではなく「background」を使うなど、分かりやすさを優先してください。
エイリアストークンの例：
色のエイリアストークンは、以下のようにコンセプトごとにまとめることも可能です：
コンポーネント固有の名称は、属するコンポーネント名から始め、実装の近くに置くべきです。これらはエイリアストークンを参照することが多く、複数コンポーネントで一貫したスタイルを保ちつつ、関心事の分離も維持できます。
この仕様書には、記載されている課題はありません。
Referenced in: