2026年7月17日

CSSでDisplay P3の広色域カラーを使う方法｜WordPressでの書き方とフォールバック

テーマ・デザイン

最近のスマートフォンやノートパソコンの多くは、従来のWebの標準色域であるsRGBより広い「Display P3」の色を表示できます。CSSでは color(display-p3 …) を使うと、sRGBでは出せない鮮やかな赤や緑を指定できます。

この記事では、CSSでの書き方、P3に対応していない環境へのフォールバック、WordPressのテーマに組み込むときの注意、写真をP3のまま表示するときの注意を説明します。

Display P3とsRGBの違い

色域は、その画面や色の決まりで表現できる色の範囲です。Display P3 はsRGBより範囲が広く、特に鮮やかな赤・オレンジ・緑で差が出ます。一方、くすんだ色や淡い色はsRGBでも表現できるので、P3にしても見た目はほとんど変わりません。

P3の色が実際に鮮やかに見えるのは、P3を表示できる画面で、P3に対応したブラウザを使っている場合だけです。それ以外の環境では、ブラウザがsRGBで表示できる近い色に置き換えます。

CSSでの書き方

color() 関数に色空間名 display-p3 と、赤・緑・青の値を0〜1の数値で書きます。スラッシュの後ろは透明度です。

.p3-sample {
  color: color(display-p3 1 0 0);              /* P3のいちばん鮮やかな赤 */
  background: color(display-p3 0 0.8 0.4 / 0.2); /* 透明度20%の緑 */
}

color(display-p3 1 0 0) はsRGBの #ff0000 より鮮やかな赤です。数値が同じでも、rgb() と color(display-p3 …) では指す色が違う点に注意してください。

color() は Safari 15、Chrome・Edge 111、Firefox 113 以降で使えます（2026年11月時点）。

oklch()でもP3の色を指定できる

oklch() は色域に縛られない書き方なので、彩度（2番目の値）を大きくすれば、P3の範囲の色も指定できます。明るさや色相を揃えた配色を作りたい場合は、oklch() で書くほうが調整しやすいこともあります。詳しくは関連記事を参照してください。

フォールバックの書き方

通常のプロパティは重ねて書く

sRGBの色を先に書き、P3の色を後に書きます。color() を解釈できないブラウザは2行目を無視するので、1行目のsRGBの色が使われます。

.button-primary {
  background-color: #e8590c;
  background-color: color(display-p3 0.93 0.33 0.02);
}

対応ブラウザでP3を表示できない画面の場合は、ブラウザが2行目の色をsRGBの範囲に収めて表示します。

CSS変数に入れるときは条件で切り替える

CSS変数（カスタムプロパティ）は、どんな値でもいったん受け入れます。そのため、上のような重ね書きをCSS変数で行うと、未対応のブラウザでも2行目が採用され、使う側のプロパティで無効になって色が付かなくなります。CSS変数に入れる場合は、@supports か @media (color-gamut: p3) で切り替えます。

:root {
  --accent: #e8590c; /* すべての環境で使われる色 */
}

/* ブラウザがcolor()に対応し、画面がP3を表示できるときだけ差し替える */
@supports (color: color(display-p3 0 0 0)) {
  @media (color-gamut: p3) {
    :root {
      --accent: color(display-p3 0.93 0.33 0.02);
    }
  }
}

.button-primary {
  background-color: var(--accent);
}

@media (color-gamut: p3) は、画面がおおむねP3の範囲を表示できるときに一致します。(color-gamut: srgb) はほぼすべての画面で一致するので、P3の判定には使えません。この切り替えはCSSだけでできるので、JavaScriptは必要ありません。

WordPressのテーマに組み込む

theme.jsonのパレットはsRGBのままにする

theme.json の settings.color.palette に登録した色は、--wp--preset--color--{slug} というCSS変数として出力され、ブロックエディターの色選択にも表示されます。エディターの色選択はHEXなどの通常の色を前提にしているため、パレットにはsRGBの色を置いておくのが無難です。P3の色は、テーマ独自のCSS変数として上の例のように定義し、ボタンや見出しなど使う場所をCSSで指定します。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "accent", "color": "#e8590c", "name": "Accent" }
      ]
    }
  }
}

/* テーマのCSS：P3対応環境ではアクセント色のボタンをより鮮やかにする */
@supports (color: color(display-p3 0 0 0)) {
  @media (color-gamut: p3) {
    .has-accent-background-color {
      background-color: color(display-p3 0.93 0.33 0.02) !important;
    }
  }
}

WordPressはパレットの色を背景色に使ったブロックに .has-{slug}-background-color というクラスを付け、その色を !important 付きで出力します。上書きする側にも !important が必要になるのはこのためです。

CSSの置き場所

CSSは子テーマのスタイルシートか、「外観 > カスタマイズ > 追加CSS」（クラシックテーマ）、「外観 > エディター > スタイル」の「追加CSS」（ブロックテーマ）に書きます。親テーマの style.css を直接編集すると、テーマの更新で消えます。

P3の写真を使うときの注意

CSSの色とは別に、写真もP3のまま表示できます。iPhoneなどで撮影した写真や、写真編集ソフトでDisplay P3として書き出した画像には、色の基準を示すICCプロファイルが埋め込まれています。ブラウザはこれを読んでP3の色として表示します。

注意が必要なのは、WordPressがアップロード時に作る縮小画像（サムネイルや中サイズ）です。

画像処理に Imagick が使われている場合、WordPressは縮小画像からメタデータを削る際にICCプロファイルを残します（コアの WP_Image_Editor_Imagick::strip_meta() で、icc と icm は削除しない対象になっている）
GD が使われている場合、縮小画像を作り直す時点でICCプロファイルが引き継がれないため、P3の写真の縮小画像はsRGBとして解釈され、元画像より色がくすんだり、ずれたりすることがあります

どちらが使われているかは、「ツール > サイトヘルス > 情報」の「メディア処理」の項目で、使われている画像エディター（WP_Image_Editor_Imagick または WP_Image_Editor_GD）として確認できます。GDしか使えないサーバーで色の正確さが重要な場合は、アップロード前にsRGBへ変換しておくと、どの環境でも同じ色で表示されます。

確認のしかた

P3を表示できる画面（多くのMacや iPhone など）で、Safari や Chrome を使って表示を確かめる
sRGBの画面でも、フォールバックの色が意図どおりかを確かめる
開発者ツールの「Computed（計算済み）」で、color(display-p3 …) が採用されているかを確認する
P3とsRGBの差が出るのは鮮やかな色だけなので、差を確かめたいときは color(display-p3 1 0 0) と #ff0000 を並べて比べる

まとめ

color(display-p3 r g b) で、sRGBより鮮やかな色を指定できる。値は0〜1の数値
通常のプロパティはsRGBの色を先に書いて重ねる。CSS変数に入れるときは @supports と @media (color-gamut: p3) で切り替える
P3の判定に (color-gamut: srgb) は使えない。JavaScriptも不要
theme.jsonのパレットはsRGBのままにし、P3の色はテーマのCSSで上書きする
P3の写真は、画像処理がGDだと縮小画像で色がずれることがある。サイトヘルスで画像エディターを確認する