画面の色深度とピクセル深度の解説
screen.colorDepthとscreen.pixelDepth、ビット深度が色レンダリングに与える意味、HDRおよび広色域ディスプレイ機能の検出方法を理解します。
Touch & Input
詳細な説明
色深度とピクセル深度
screenオブジェクトは色の能力に関連する2つのプロパティを公開しています。
screen.colorDepth
画面上の各ピクセルの色を表現するために使用されるビット数です。一般的な値：
| ビット | 色数 | 名前 |
|---|---|---|
| 8 | 256 | 8ビット |
| 16 | 65,536 | ハイカラー |
| 24 | 16,777,216 | トゥルーカラー |
| 32 | 4,294,967,296 | トゥルーカラー＋アルファ |
広色域ディスプレイの検出
@media (color-gamut: p3) {
.brand-logo {
color: color(display-p3 1 0.2 0.1);
}
}
const isP3 = window.matchMedia('(color-gamut: p3)').matches;
HDRサポートの検出
@media (dynamic-range: high) {
/* HDR対応ディスプレイ */
}
実用的な意味合い
- 色深度24は1チャネルあたり8ビット（RGB）で、1670万色をサポート
- 写真・動画サイトは広色域ディスプレイにより高品質なアセットを提供可能
- ほとんどのWebコンテンツはsRGBで作成され、すべての色深度で正しく表示される
ユースケース
色の正確さが重要なアプリケーション（フォトエディタ、デザインツール）に取り組むデザイナーと開発者は、色を正確にレンダリングし適切なアセットを提供するためにディスプレイの色深度と色域を知る必要があります。