Screen Color Depth and Pixel Depth Explained

Color Depth and Pixel Depth

The screen object exposes two properties related to color capability:

screen.colorDepth

The number of bits used to represent the color of each pixel on the screen. Common values:

Bits	Colors	Name
8	256	8-bit (indexed color)
16	65,536	High Color
24	16,777,216	True Color
30	1,073,741,824	Deep Color
32	4,294,967,296	True Color + Alpha

Most modern displays report 24 or 32 bits.

screen.pixelDepth

Historically identical to colorDepth but meant to include the alpha channel. In practice, both return the same value in modern browsers. Both are read-only.

console.log('Color depth:', screen.colorDepth); // 24
console.log('Pixel depth:', screen.pixelDepth); // 24

Detecting Wide-Gamut Displays

Some displays support wider color spaces (P3, Rec. 2020). Use the color-gamut media query:

@media (color-gamut: p3) {
  .brand-logo {
    color: color(display-p3 1 0.2 0.1);
  }
}

const isP3 = window.matchMedia('(color-gamut: p3)').matches;
const isSRGB = window.matchMedia('(color-gamut: srgb)').matches;

Detecting HDR Support

@media (dynamic-range: high) {
  /* HDR-capable display */
}

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

Practical Implications

• A color depth of 24 means 8 bits per channel (RGB), supporting 16.7 million colors
• Photo and video sites can serve higher-quality assets to displays with wider color gamuts
• Color-critical applications (design tools, photo editors) should check for P3 support before rendering in that color space
• Most web content is authored in sRGB and displays correctly on all color depths