JavaScript Screen colorDepth Property

What You’ll Learn

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

Introduction

Color depth describes how many bits are used to store each pixel’s color. A higher depth can represent more colors. Historically, web apps sometimes served a simpler palette on very low-color displays.

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

console.log(window.screen.colorDepth);

Understanding the Property

MDN: the Screen.colorDepth read-only property returns the color depth of the screen. Per the CSSOM, some implementations return 24 for compatibility reasons.

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

📝 Syntax

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

Value

A number representing the screen’s color depth.

🎨 Common Depth Values (Beginner Guide)

Your browser may still print 24 even on a deeper display because of the CSSOM compatibility behavior MDN mentions.

🔄 colorDepth and pixelDepth

screen.pixelDepth is a closely related Screen property. On modern browsers it often equals colorDepth. When you log diagnostics, print both so learners can see they usually match.

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

Examples Gallery

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

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

24
number

// Check the color depth of the screen
if (window.screen.colorDepth < 8) {
  console.log("Use low-color version of page");
} else {
  console.log("Use regular, colorful page");
}

Use regular, colorful page

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

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.colorDepth;
console.log(bits);
console.log(labelDepth(bits));

24
true color (or reported as 24)

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

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

🚀 Common Use Cases

• Teaching what color depth means in the browser.
• Legacy-style low-color fallbacks (rare on modern devices).
• Diagnostics panels that dump Screen metrics.
• Comparing colorDepth with pixelDepth 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 colorDepth.
• Some implementations return 24 for CSSOM compatibility.
• Related: availWidth, availHeight, Window hub, JavaScript hub.

💡 Best Practices