カラーガモットマッピング：カラースペース間の変換

専門的なカメラで活気あふれる日没を写真撮影するとウェブブラウザで開くとき、何かが失われます。カメラのワイドガモットセンサーが記録された深く飽和したオレンジおよびパープルはあらゆるディスプレイで正確に再現することはできません— そしてできるもの上でさえ、カラーはウェブセーフ形式への変換を生き残らないかもしれません。1つのカラースペースに存在するカラーを別のカラー境界内に適応させるプロセスがカラーガモットマッピングと呼ばれています。デジタルカラーパイプライン全体で最も見えないがいでの1つです。デザインから本番への彼のための色正確さについてケアするすべての人に不可欠です。

ガモットマッピングとは

カラーガモットは、特定のデバイス、形式、またはカラースペースが表現できるカラーの完全な範囲です。あらゆるガモットの境界— 内に入るカラーは正確に表現できます；外の色はことはできません。

異なるデバイスおよびカラースペースはガモットが異なります：

あなたはより大きいガモットから小さい1つへカラーを動かすとき、いくつかのカラーは目的のガモット外で落ちるかもしれません。これらはアウトオブガモットカラーと呼ばれています。ガモットマッピングは彼ら何をするかについての決定のプロセスです。

逆— より小さいガモットからより大きい1つへ移動— 一般的にロスレスです。すべてのソースカラー宛先内に適合しています。sRGBファイルはP3モニターで表示します。単純にそのモニターの範囲のサブセットを使用しています。ガモットマッピングは不要です。

アウトオブガモットカラー問題

躍動感のシアンを考えます：#00FFFF(#00FFFF)sRGBで。このカラーはsRGBガモット近くのエッジに座ります。P3表示では、より飽和なシアンが利用可能です— sRGBが完全に表現することはできないカラー。

これで、P3を使用する躍動感な緑を使用するインターフェースを設計することを想像します。概略color(display-p3 0.0 0.9 0.3)— sRGBで#00E84Aより著しく飽和した緑。ユーザーがこれを標準的なsRGBモニターで見ると、ブラウザは決断を必要とします：どのsRGBカラーが再現不可能な緑を表していくべきですか？

これはガモットマッピング、そして異なるアプローチは取引が異なります。

クリッピング対知覚的圧縮

アウトオブガモットカラーを処理するための2つの主要な戦略はクリッピングと知覚的（圧縮）マッピングです。

クリッピング

クリッピングは、最も簡単なアプローチです：ガモット外のカラーはガモット境界の最も近いポイントにスナップされます。0–1スケールで1.5値を取り、単に1に設定することに類似しています。

アウトオブガモット飽和度値を持つカラーのため、クリッピングは飽和度をターゲットガモットが許す最大値に設定し、明度とタイプを変わらないまま残しています。結果：

• ガモット近くのカラー：最小の視覚的な変更
• ガモット遠く外のカラー：重大な色相正確さの喪失、元のものから大幅に異なって見えるカラー

クリッピングの最大の問題は色相シフトです。多くのアウトオブガモットカラー知覚的に色相をシフトさせるクリップ。躍動感な緑は黄綠にクリップすることができます；深いバイオレットは青にクリップすることができます。オリジナル色相が保持されていません。

クリッピングはまたバンディングを作成しています：異なるソースカラーの範囲はすべて同じ最大飽和度の境界ポイントにクリップし、勾配またはスムーズなカラー遷移で視える段階で、連続して見える必要があります。

これらの欠点にもかかわらず、クリッピングは静的イメージおよびCSS用のコンピュータトリビアルのため一般的です。

知覚的レンダリング意図（圧縮）

知覚的レンダリング— 時々圧縮マッピング呼ばれました— 別のアプローチを取ります。アウトオブガモットカラーだけを調整する代わり、全体のガモットは比例的にスケーリングされます。ソースで最も飽和したカラーは、宛先で利用可能な最も飽和したカラーにマップされ、その他はすべてスケール相互関係はすべてのカラー間で保持されますが— 単に圧縮。

あなたが大きな絵（P3ガモット）を小さいキャンバス（sRGBガモット）に切ることの代わりに比例的に削減することに色付きすることを想像します。カラーはオフで切られません；代わりに、カラー間のすべての関係は保持されます— 単に圧縮。

知覚的圧縮の利点： - スムーズな勾配はスムーズなまま（バンディングなし） - カラー間の相対関係が保持されます - 写真と勾配のため、通常はより視覚的に楽しいです

欠点： - ガモット内のカラーもシフト（飽和度でわずかに縮小）、彼らは必要ではなかったが - カラーは、正確に再現されたまま場所でさえ、元のより少ない躍動的に見えるかもしれません

知覚的レンダリング意図は、印刷および専門的な写真ワークフロープロファイルで使用されるデフォルトです。CSS ガモットマッピングアルゴリズムで採択されるアプローチです。

相対的な色度（黒ポイント補正を使用して）

3番目のアプローチ— 相対的な色度— ガモット内のカラーを正確にマップし、アウトオブガモットカラーをクリップしながら、ソースおよび宛先間の白いポイントの違いに対して調整しています。アウトオブガモットカラーをほんのわずかなドキュメントのため良いコンパイルです。ガモット内の正確さがアウトオブガモットのより良いことを保持するとして知覚的。

飽和度のレンダリング意図

主にビジネスグラフィックスで使用される4番目の意図：色相正確さを犠牲にして飽和度を最大化します。棒グラフおよびパイチャート用に使用。ここで躍動感な独特なカラーは正確な色相再現についてより重要です。

CSSガモットマッピング

CSSはCSS色レベル4仕様以降複数のカラースペースをサポートしています。ガモットマッピングはCSS色の解決アルゴリズムに構築されました。

CSS内の広い範囲カラーの指定

/* sRGB（従来） */
color: #22C55E;
color: rgb(34, 197, 94);

/* P3表示（広い範囲） */
color: color(display-p3 0.05 0.8 0.35);

/* Rec。2020（超広い） */
color: color(rec2020 0.1 0.7 0.2);

/* OKLCH（知覚的に均一な、広範囲カラーをアドレス指定できます） */
color: oklch(0.75 0.25 150);  /* 非常に躍動感な緑— sRGBの外。 */

CSSがガモットオーバーフローを処理する方法

CSS色値がディスプレイのガモット外のカラーをアドレス指定するとき、ブラウザはCSS ガモットマッピングアルゴリズム CSS色レベル4で定義されます。アルゴリズムはOKLCH色空間でバイナリ探索を使用して、deltaE 2000（知覚カラー差の度量）距離尺度として使用して最も同じガモット内カラーを見つけます。

結果は、優先順位を付けるガモットマッピングアプローチです： 1. 明度最初の保持（明度の変更は最もスリーアップル） 2. 色相第2保持 3. 削減色度（飽和度）ガモット内に収まるまで

これはシンプルなsRGBクリッピングより大幅な改善です。CSSアルゴリズムは知覚的圧縮に、ガモット遠く外のカラーのための優雅な低下のためにわずかに他なものの優雅な低下より近い結果を生成します。

色ガモットメディアクエリ

CSSはディスプレイが何を支援するかを検出するメディアクエリを提供しています。あなたが異なる機能に異なるカラーを提供することができます：

/* デフォルト：すべてのディスプレイ用のsRGBカラー */
.brand-color {
  color: #22C55E;
}

/* 強化：対応ディスプレイ用の多くの躍動感なP3カラー */
@media (color-gamut: p3) {
  .brand-color {
    color: color(display-p3 0.05 0.8 0.35);
  }
}

/* 超広い：Rec。2020 のディスプレイの最大躍動感 */
@media (color-gamut: rec2020) {
  .brand-color {
    color: color(rec2020 0.1 0.7 0.2);
  }
}

color-gamutのための3つの値： - srgb — ディスプレイはsRGBガモット（ほとんど一般的）をカバーしています - p3 — ディスプレイはP3ガモットをカバーしています（モダンMac、iPhone、高端Android） - rec2020 — ディスプレイはRec。2020ガモット（専門的およびHDRディスプレイ）をカバーしています

OKLCHおよび広い範囲

OKLCHは広い範囲デザイン作業用に特に適しています。高いクロマ値は自然にsRGB外のカラーをアドレス指定し、P3またはそれ超えるのにランディングしています。クロマ値0.37を超える（ほとんどの色相のため）OKLCHがsRGBガモット外のアドレス指定されます。P3内に着地します。

/* sRGBで：躍動感な緑 */
color: oklch(0.75 0.22 145);

/* sRGBの外、P3で：より躍動感な緑 */
color: oklch(0.75 0.35 145);

/* sRGBの遠い外：ブラウザは下にガモットマップしますでしょう */
color: oklch(0.75 0.5 145);

OKLCHカラーがガモット外のとき、CSSは自動的にガモットマッピングアルゴリズムを適用しています。あなたはこれを手動で処理する必要がありません— ブラウザはそれを解決しています。

カラーコンバーターを使用してカラーをカラースペース間で変換し、sRGB、P3表示、およびOKLCH表現間で移動するとき値がどのようにシフトするかを確認します。

デザイナーのための実用的な解決策

ガモットマッピングを理解することが、スクリーン色の仕事にアプローチをします。

1。ターゲットガモット内の設計

あなたの製品が混合ディスプレイのデバイスでウェブユーザーを主にターゲットにしている場合、sRGBで設計します。あなたのオーディエンスはおもにモダンAppleハードウェア（Mac、iPhone）上であることを知っている場合、P3表示でのデザインとsRGBフォールバックの提供を検討します。

2。あなたの躍動感なカラーのガモット状態を知ります。

Figma（Appleハードウェア上のP3を使用）のようなツールで「作業する」多くの躍動感なカラーは、ウェブユース用にsRGBにエクスポートされるとき異なって見えるかもしれません。常に最終的なカラーをCSS値で検証してください。Figmaレンダリングだけでなく、明示的に定義しています。

いくつかの非常に躍動感な緑、シアン、マゼンタP3表示にはsRGB同等がありません。ブランドカラーがcolor(display-p3 0.0 0.9 0.3)— より躍動感な緑より有効なsRGB— あなたはsRGBフォールバックとして使用することを決定する必要があります。またはsRGBユーザーは少ないバージョンが表示されることを受け入れます。

3。ガモット全体の勾配トランジションをテストする

2つの広い範囲のカラー間の勾配はsRGBモニターで表示しているかもしれません。バンディングのため、中間のカラーがP3で看に見えたが、同じsRGB値にマップすべてすべての違い（色クリッピング勾配の中央）です。勾配バンディングが見える場合、試みてください：

• 両方のエンドポイントのクロマをsRGB安全レベルに削減
• 勾配中にトランジションを広がるのに、中間の勾配ストップを追加
• OKLCHを通して勾配をルートして知覚的に均一なスペーシング

4。正しいエクスポート形式を使用する

広い範囲のカラーを含むイメージのため： - JPEGs：カラープロファイルを埋め込む（P3またはAdobe RGB）— ブラウザはそれをカラー管理のために使用します - PNGs：同じ— プロファイルを埋め込む - WebP：ICCプロファイルをサポート；正確なカラーのため埋め込む - SVG：カラーはCSS内で指定されています— 広い範囲用にcolor()関数を使用

埋め込まれたプロファイルなしの画像はsRGBとして想定され、ガモット変換なしで表示されるでしょう。プロファイルなしの広い範囲画像はP3 ディスプレイで意図より、洗い出されます。

5。安全な広い範囲アプローチ

複数のガモット目標を管理することの複雑性なしでより豊かなカラーを望むデザイナー、OKLCHはマデラル色相（0.18–0.25）のほとんどのsRGB内にとどまり、そのレンジ内の普通的なRGBカラーより少し多くの躍動感な結果を提供しています。CSSガモットマッピングはすべてのエッジケースを自動的に処理しています。

/* 躍動感ですが、ほぼsRGB安全なブルー */
--color-primary: oklch(0.55 0.22 255);
--color-primary-hover: oklch(0.60 0.22 255);

重要なポイント

• カラーガモットは、デバイスまたはカラースペース表現できるカラーの範囲です。sRGBは標準的なウェブ；P3表示は~26%より大きく、モダンおよびハイエンドデバイス上で利用可能です。
• アウトオブガモットカラーは、ターゲットガモットの外で落ちるカラーです。これらのことはデバイスで正確に再現することはできません— 何か起こらなければなりません。
• クリッピングは、ガモット境界にアウトオブガモットカラーをスナップしています— 高速ですが、色相シフトとバンディングを引き起こすことができます。知覚的圧縮はガモット全体を比例的にスケーリングしています— 遅いが、カラー関係と勾配を保持しています。
• CSS色レベル4ガモットマッピングアルゴリズムを定義しています OKLCHとdeltaE 2000を使用して明度とタイプを保持しながらクロマを削減することを知的に計算します— ナイーブなsRGBクリッピング優越です。
• color-gamutメディアクエリによって、あなたはより躍動感なcolor(display-p3)カラーを対応ディスプレイに提供しながら、他のsRGBフォールバックを保持しています。
• 広い範囲デザインのギャッシュ：Appleハードウェアでの FigmaレンダリングがデフォルトP3— 色がFigmaで躍動感に見える場合、ウェブ使用のためのsRGBとしてエクスポートされるとき、少なくサチュレートである場合があります。常にCSSの値を明示的に確認してください。
• カラーコンバーターを使用してカラーをsRGB、P3表示、およびOKLCHをまたがって検査し、そのガモット状態を理解し、最も近いガモット内同等を見つけるために。