JavaScript Screen pixelDepth Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word PIXELDEPTH

Definition

Screen.pixelDepth is a read-only number for the screen’s bit depth (MDN). Read it as window.screen.pixelDepth. Per the CSSOM, some implementations return 24 for compatibility.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use screen.pixelDepth. Start with this line.

JavaScript
screen.pixelDepth
CallWhat it does
screen.pixelDepthPrimary signature.

Built into the browser. Read screen.pixelDepth on window.screen — no import required.

Library declarations
JavaScript
screen.pixelDepth

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*The current value of screen.pixelDepth.

JavaScript Examples

Example 1 — Read pixelDepth

Log the number and confirm its type.

JavaScript
console.log(window.screen.pixelDepth);
console.log(typeof screen.pixelDepth);
Try It Yourself

How It Works

  1. Access via screen. Same object as window.screen.
  2. Read-only property. No parentheses — not a method call.
  3. Type is number. Use it in comparisons directly.
  4. Often 24. CSSOM compatibility reporting (MDN).

Example 2 — Adequate Bit Depth Branch (MDN)

Pick a richer vs simpler color when depth is above 8 bits.

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

console.log(color);
console.log("depth → " + screen.pixelDepth);

// Applied safely to the page (not document.style):
document.body.style.color = color;
Try It Yourself

How It Works

  1. Compare with 8. MDN’s teaching threshold for “adequate” depth.
  2. Truthy path. > 8 → antique white #FAEBD7.
  3. Falsy path. Low depth → plain "white".
  4. Apply carefully. Use document.body.style (or an element) — not document.style.

Example 3 — Compare with colorDepth

Both properties describe color capability; they usually match.

JavaScript
var pixel = screen.pixelDepth;
var color = screen.colorDepth;

console.log("pixelDepth → " + pixel);
console.log("colorDepth → " + color);
console.log("same → " + (pixel === color));
Try It Yourself

How It Works

  1. Read both. Siblings on the same Screen object.
  2. Usually equal on modern browsers (both often 24).
  3. Use for diagnostics — not as a hard hardware fingerprint.
  4. Prefer CSS for most visual adaptation; keep this as a simple check.
Compatibility

Browser Support

Screen.pixelDepth is Baseline Widely available (MDN: since July 2015). Remember: many engines report 24 for CSSOM compatibility rather than exact hardware depth.

✓ Baseline · Widely available

Screen.pixelDepth

Screen bit depth as a number — often 24 for compatibility across modern browsers.

98% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
pixelDepth Excellent

Bottom line: Safe to read everywhere. Do not treat the value as a precise hardware fingerprint — pair with colorDepth only for light diagnostics.

Frequently Asked Questions

A read-only number: the bit depth of the screen. Access it as window.screen.pixelDepth. Many browsers report 24 for CSSOM compatibility.
No. MDN marks Screen.pixelDepth as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
MDN: per the CSSOM, some implementations return 24 for compatibility reasons. Check the compatibility table for engines that differ.
Both describe screen color capability. On most modern browsers they report the same number. Treat them as related diagnostics, not as a guarantee of exact hardware bit depth.
No. It is read-only. You read the number; you do not assign to it.
MDN shows that pattern to pick a richer vs simpler color. Today almost all user screens report at least 24, so the low-depth branch is rare—but it remains a clear teaching example.

Next: width

Learn the Screen property for full display width in CSS pixels.

width tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Screen orientation Property JavaScript Screen width Property