JavaScript Screen colorDepth Property

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

Definition

screen.colorDepth is a read-only number for the screen’s color depth (MDN). Read it as window.screen.colorDepth. Many engines report 24 for CSSOM compatibility.

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

Syntax

Use screen.colorDepth. Start with this line.

JavaScript
screen.colorDepth
CallWhat it does
screen.colorDepthPrimary signature.

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

Library declarations
JavaScript
screen.colorDepth

Parameters

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

Return Value

Return ValueDescription
*The current value of screen.colorDepth.

JavaScript Examples

Example 1 — Read colorDepth

Log the number and confirm its type.

JavaScript
console.log(window.screen.colorDepth);
console.log(typeof screen.colorDepth);
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 — Low-Color Branch (MDN)

Choose a simpler UI when depth is below 8 bits.

JavaScript
if (window.screen.colorDepth < 8) {
  console.log("Use low-color version of page");
} else {
  console.log("Use regular, colorful page");
}
Try It Yourself

How It Works

  1. Compare with 8 — MDN’s teaching threshold for low color.
  2. True branch loads a simpler palette or assets.
  3. False branch is the normal path on modern devices.
  4. Do not over-trust — reported depth may not equal real hardware bits.

Example 3 — Compare with pixelDepth

Both properties describe color capability; they usually match.

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

console.log("colorDepth → " + color);
console.log("pixelDepth → " + pixel);
console.log("same → " + (color === pixel));
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 media for most visual adaptation; keep this as a simple check.
Compatibility

Browser Support

screen.colorDepth is Baseline Widely available (since July 2015). Supported across major browsers. Remember: many engines report 24 for CSSOM compatibility rather than exact hardware depth.

✓ Baseline Widely available

Screen.colorDepth

Read-only number — screen color depth in bits (often 24).

Yes Baseline
Google Chrome Yes (Baseline)
Yes
Microsoft Edge Yes (Baseline)
Yes
Apple Safari Yes (Baseline)
Yes
Opera Yes (Chromium-based)
Yes
Mozilla Firefox Yes (Baseline)
Yes
Internet Explorer Supported in IE era Screen API
Yes
colorDepth Widely

Bottom line: Read window.screen.colorDepth, treat 24 as common, compare with pixelDepth if needed. See the MDN colorDepth reference.

Frequently Asked Questions

A read-only number representing the color depth of the screen (typically bits per pixel). Access it as window.screen.colorDepth (MDN).
No. MDN marks Screen.colorDepth 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 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 for a low-color fallback. Today almost all user screens report at least 24, so the low-color branch is rare — but it remains a clear teaching example.

Next: height

Continue with the Screen height property in the tutorial series.

height →

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)

22 people found this page helpful

JavaScript Screen availWidth Property JavaScript Screen height Property