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 メディアクエリです。

対応ブラウザ

  • 98
  • 98
  • 100
  • 13.1

ソース

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

color-gamut メディアクエリを使用して、おおよそまたはそれ以上のサポートを照会できます。

対応ブラウザ

  • 58
  • 79
  • 110
  • 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() 関数を呼び出して、評価用のメディアクエリを渡すことができます。

対応ブラウザ

  • 9
  • 12
  • 6
  • 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 クエリを使用して照会できます。

対応ブラウザ

  • 28
  • 12
  • 22
  • 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 など）間で色を変換できています。[スタイル] ペインの正方形の色見本の shift + click。この変換を行います。新しいカラーツールでは、変換が循環するのではなく、作成者が目的の変換を確認して選択できるダイアログが表示されます。

変換するときは、スペースに合わせてコンバージョンがクリップされているかどうかを把握することが重要です。DevTools に、このクリップについて警告する、変換後の色の警告アイコンが追加されました。

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

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

次のステップ

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

ガイドの他のカラーリソースを確認する。