JavaScript Screen pixelDepth Property

What You’ll Learn

Screen.pixelDepth is a read-only instance property that returns the bit depth of the screen. Learn what the number means, why many browsers report 24 for CSSOM compatibility, how it relates to colorDepth, and the MDN color-choice pattern—with five examples and try-it labs.

Introduction

Bit depth describes how many bits are used per pixel for color. A higher depth can represent more colors. Historically, pages sometimes chose a simpler text or background color on low-depth displays.

Today you usually see 24. MDN notes that, per the CSSOM, some implementations return 24 for compatibility even when the hardware differs.

console.log(window.screen.pixelDepth);

Understanding the Property

MDN: Screen.pixelDepth returns the bit depth of the screen. Per the CSSOM, some implementations return 24 for compatibility reasons.

• Instance — on window.screen.
• Read-only — you cannot assign to pixelDepth.
• Number — typically bits per pixel (for example 24).
• Compatibility — browsers may normalize the reported value to 24.

📝 Syntax

const depth = window.screen.pixelDepth;
// same as:
const depth2 = screen.pixelDepth;

Value

A number representing the screen’s bit depth.

🔄 pixelDepth vs colorDepth

Both properties describe how colorful the screen can be. On modern browsers they usually report the same number. When you build a diagnostics panel, log both so learners can see they match.

console.log(screen.pixelDepth, screen.colorDepth);
console.log(screen.pixelDepth === screen.colorDepth);

🎨 MDN Color-Choice Pattern

MDN’s example picks a richer color when bit depth is greater than 8, otherwise a simpler color. Here is a beginner-safe version that sets text color on the page body:

// If there is not adequate bit depth, choose a simpler color
document.body.style.color =
  window.screen.pixelDepth > 8 ? "#FAEBD7" : "white";

With a typical report of 24, the antique-white branch (#FAEBD7 runs. On a rare low-depth display, the code would choose white.

🔢 Common Depth Values (Beginner Guide)

Examples Gallery

Examples follow MDN Screen.pixelDepth. Your machine will usually print 24.

console.log(window.screen.pixelDepth);
console.log(typeof screen.pixelDepth);

24
number

const color =
  window.screen.pixelDepth > 8 ? "#FAEBD7" : "white";

console.log(screen.pixelDepth);
console.log(color);

24
#FAEBD7

console.log(screen.pixelDepth);
console.log(screen.colorDepth);
console.log(screen.pixelDepth === screen.colorDepth);

24
24
true

function labelDepth(bits) {
  if (bits < 8) return "very low color";
  if (bits < 16) return "256-color class";
  if (bits < 24) return "high color";
  return "true color (or reported as 24)";
}

const bits = screen.pixelDepth;
console.log(bits);
console.log(labelDepth(bits));

24
true color (or reported as 24)

console.log({
  pixelDepth: screen.pixelDepth,
  colorDepth: screen.colorDepth,
  width: screen.width,
  height: screen.height,
  availWidth: screen.availWidth,
  availHeight: screen.availHeight
});

{
  "pixelDepth": 24,
  "colorDepth": 24,
  "width": 1920,
  "height": 1080,
  "availWidth": 1920,
  "availHeight": 1040
}

🚀 Common Use Cases

• Teaching what bit depth means in the browser.
• Legacy-style color fallbacks when depth is very low (rare today).
• Diagnostics panels that dump Screen metrics.
• Comparing pixelDepth with colorDepth in QA notes.
• Understanding why many engines always report 24.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Read-only — do not assign to pixelDepth.
• Some implementations return 24 for CSSOM compatibility.
• Related: colorDepth, orientation, Window hub, JavaScript hub.

💡 Best Practices