HD CSS カラーに移行

このドキュメントは、高解像度 CSS カラーガイドの一部です。

Adam Argyle
Adam Argyle
X GitHub

広色域ディスプレイをサポートするようにウェブ プロジェクトの色を更新するには、主に次の 2 つの方法があります。

  1. グレースフル デグラデーション: 新しいカラースペースを使用し、ディスプレイの機能に基づいて表示する色をブラウザとオペレーティング システムに判断させます。

  2. 段階的な拡張: @supports と @media を使用してユーザーのブラウザの機能を評価し、条件が満たされている場合は、広色域の色を提供します。

ブラウザが display-p3 色を認識しない場合:

color: red;
color: color(display-p3 1 0 0);

ブラウザが display-p3 の色を認識している場合:

color: red;
color: color(display-p3 1 0 0);

それぞれにメリットとデメリットがあります。以下に、メリットとデメリットを簡単に示します。

グレースフル デグラデーション

  • メリット
    • 最も簡単なルート。
    • ブラウザは、広色域ディスプレイでない場合は、色域を sRGB にマッピングまたはクランプするため、責任はブラウザにあります。
  • 短所
    • ブラウザが、望ましくない色に色域クランプまたは色域マッピングを行う可能性があります。
    • ブラウザが色のリクエストを認識せず、完全に失敗する可能性があります。ただし、色を 2 回指定して、理解できる以前の色にカスケードがフォールバックするようにすると、この問題を軽減できます。

段階的な拡張

  • メリット
    • 色の忠実度を管理してより詳細に制御。
    • 現在の色に影響を与えない加算的な戦略。
  • 短所
    • 2 つの異なる色の構文を管理する必要があります。
    • 2 つの異なる色域を管理する必要があります。

色域と色空間のサポートを確認する

ブラウザでは、CSS と JavaScript による広色域機能と色構文のサポートを確認できます。ユーザーが設定した色の正確な色域は公開されず、ユーザーのプライバシーが保護されるように一般的な回答が提供されます。ただし、色域のようにユーザーのハードウェアの機能に固有のものではないため、正確な色空間のサポートが可能です。

色域サポートに関するお問い合わせ

次のコード例は、訪問したユーザーのディスプレイの色の範囲を確認します。

CSS から確認する

最も具体的でないサポートに関するお問い合わせは、dynamic-range メディアクエリです。

対応ブラウザ

  • Chrome: 98。
  • エッジ: 98。
  • Firefox: 100.
  • Safari: 13.1。

ソース

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

サポートの概要は、color-gamut メディア クエリで確認できます。

対応ブラウザ

  • Chrome: 58.
  • Edge: 79.
  • Firefox: 110。
  • Safari: 10。

ソース

@media (color-gamut: srgb) {
  /* safe to use srgb colors */
}

@media (color-gamut: p3) {
  /* safe to use p3 colors */
}

@media (color-gamut: rec2020) {
  /* safe to use rec2020 colors */
}

サポートを確認するために、さらに 2 つのメディアクエリがあります。

  1. @media (color)
  2. @media (color-index)

JavaScript から確認する

JavaScript の場合、window.matchMedia() 関数を呼び出して、評価用のメディアクエリを渡すことができます。

対応ブラウザ

  • Chrome: 9.
  • Edge: 12。
  • Firefox: 6.
  • Safari: 5.1.

ソース

const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;

console.log(hasHighDynamicRange); // true || false

const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;

console.log(hasP3Color); // true || false

上記のパターンは、残りのメディアクエリにコピーできます。

色空間のサポートに関するクエリ

次のコードサンプルは、アクセスしたユーザーのブラウザと、使用するカラースペースの選択を確認します。

CSS から確認する

個々の色空間のサポートは、@supports クエリを使用して問い合わせることができます。

対応ブラウザ

  • Chrome: 28.
  • Edge: 12。
  • Firefox: 22.
  • Safari: 9.

ソース

@supports (background: rgb(0 0 0)) {
  /* rgb color space supported */
}


@supports (background: color(display-p3 0 0 0)) {
  /* display-p3 color space supported */
}


@supports (background: oklch(0 0 0)) {
  /* oklch color space supported */
}

JavaScript から確認する

JavaScript の場合は、CSS.supports() 関数を呼び出してプロパティと値のペアを渡し、ブラウザが認識しているかどうかを確認できます。

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

ハードウェアと解析チェックを組み合わせる

各ブラウザにこれらの新しい色機能が実装されるのを待つ間に、ハードウェア機能と色解析機能の両方を確認することをおすすめします。色を徐々に高解像度に補正するときは、この方法をよく使います。

:root {
  --neon-red: rgb(100% 0 0);
  --neon-blue: rgb(0 0 100%);
}

/* is the display HD? */
@media (dynamic-range: high) {

  /* does this browser understand display-p3? */
  @supports (color: color(display-p3 0 0 0)) {

    /* safe to use display-p3 colors */
    --neon-red: color(display-p3 1 0 0);
    --neon-blue: color(display-p3 0 0 1);
  }
}

Chrome DevTools で色をデバッグする

Chrome DevTools が更新され、デベロッパーが HD カラーの作成、変換、デバッグに役立つ新しいツールが追加されました。

カラー選択ツールを更新しました

カラー選択ツールで、新しいカラースペースがすべてサポートされるようになりました。作成者は、通常どおりチャンネル値を操作できます。

Display-P3 色空間のサポートを示す DevTools。

色域の境界

色域境界線も追加され、srgb と display-p3 色域の間に線が引かれます。選択した色がどの色域にあるかを明確にする。

カラー選択ツールに色域線が表示された DevTools。

これにより、クリエイターは HD の色と HD 以外の色を視覚的に区別できます。これは、color() 関数と新しいカラースペースを扱う場合に特に便利です。これらの関数とカラースペースは、HD 以外の色と HD の色の両方を生成できるためです。色がどの色域に属しているかを確認するには、カラー選択ツールを表示して確認します。

色を変換する

DevTools では、長年にわたり、hsl、hwb、rgb、hex などのサポートされている形式間で色を変換してきました。[Styles] ペインの正方形の色見本の shift + click。この変換を実行します。新しいカラーツールは、コンバージョンを切り替えるだけでなく、ダイアログを表示して、作成者が目的のコンバージョンを確認して選択できるようにします。

変換する際は、スペースに合わせて変換が切り詰められたかを確認することが重要です。DevTools では、変換された色に警告アイコンが表示され、このクリッピングを警告します。

色の横に警告アイコンが表示された、DevTools の色域クリッピングのスクリーンショット。

詳しくは、DevTools の CSS デバッグ機能をご覧ください。

次のステップ

より鮮やかで一貫した操作と補間により、全体としてよりカラフルなユーザー エクスペリエンスを提供できます。

ガイドで色リソースの詳細を確認する。