第969回：「Display P3」 とは

従来のsRBGを包含し、より鮮やかな色を加えたアップル定義の色空間

　「色空間」とは、ある特定の色を数値などのパラメーターで表し、定量的に表現できる範囲を意味する言葉です。

　代表的な色空間としては、「sRGB」や「Adobe RGB」が挙げられます。そして、アップル（Apple）の定義する色空間が今回紹介する「Display P3」です。

　「Display P3」は、sRGBが表現する色全てを含んでおり、かつ、表現できる色合いが約25％、広くなっています。

Display P3が表現できる色空間。sRBGを完全に包含する形で、表現できる色合いが約25%ほど広がっている（WWDC2016でアップルが公開した資料動画から抜粋）

　特に、緑・赤系統にsRGBにはない鮮やかな色が含まれ、これらを表現することができるようになりました。

　さらに詳しくいうと、Display P3は、色域はデジタルシネマ向けのDCI-P3をベースとしており、ガンマとホワイトポイントはsRGBと同様になっています。

　これは、DCI-P3がシネマ向けでiPhoneやMacなどのディスプレイで表示される明るさとはマッチしないこと、Display P3をsRGBの拡張として実装することで、従来のsRGBで構築されたアプリケーションでの表示との互換性を崩さないことを重視してのことと考えられます。

iPhone、iPad Pro、MacなどのSafariが対応コンテンツ表示に対応

　アップルが作成し、Webkitに色空間として含んだだけあって、Apple製品では比較的古い製品でも対応しています。

たとえば、　iPhoneでは「iOS 11以降のSafari」を搭載している機種が、「Display P3」に対応しています。

　Macでは「macOS Mojave およびそれ以降の Safari」がやはりDisplay P3に対応しています。

　Webサイトなどを構築する際に使われるCSSでは、Display P3は「color(display-p3 x y z)」という構文で使われます。

　ちなみにCSS内でDisplay P3をサポートする場合/しない場合に色を変えるには「@supports」を使用することで対応可能です。@supportsはIE以外のモダンブラウザがサポートしている「機能としてサポートしていればその行を有効にする」というスイッチです。

------
/* sRGB カラー（デフォルト） */
:root {
    --bright-green: rgb(0, 255, 0);
}

/* Display P3 color がサポートされていたとき */
@supports (color: color(display-p3 1 1 1)) {
    :root {
        --bright-green: color(display-p3 0 1 0);
    }
}
------

　たとえば緑色を表現する際、使用する要素に対して「color: var(--bright-green);」を宣言すれば、iPhoneではよりビビッドな緑色でその要素を表示できます。

　アップルでは、2016年発売のiPhone 7以降、iPad Pro/Air（第3世代以降）/mini（第5世代以降）などがDisplay P3対応ディスプレイを搭載しているとしています。

　メーカー仕様では明示されていませんが、AndroidでもDisplay P3に対応できるディスプレイを搭載しているスマートフォンがあるようです。