Javascript Reference - Screen colorDepth Property

The colorDepth property returns the bit depth of the color palette for displaying images in bits per pixel.

Browser Support

The colorDepth property is supported in all major browsers.


`Screen colorDepth`	Yes	Yes	Yes	Yes	Yes

Syntax

screen.colorDepth

Return Value

Type	Description
Number	The bit depth of the color palette for displaying images in bits per pixel. Possible values: 1 bit per pixel 4 bits per pixel 8 bits per pixel 15 bits per pixel 16 bits per pixel 24 bits per pixel 32 bits per pixel 48 bits per pixel

Example

A demonstration of all screen properties.


<!DOCTYPE html>
<html>
<body>
<div id="demo"></div>
<!--from   w  ww .  jav  a2  s. co  m-->
<script>
var txt;
txt = "<p>Total width/height: " + screen.width + "*" + screen.height + "</p>";
txt+= "<p>Available width/height: " + screen.availWidth + "*" + screen.availHeight + "</p>";
txt+= "<p>Color depth: " + screen.colorDepth + "</p>";
txt+= "<p>Color resolution: " + screen.pixelDepth + "</p>";

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the bit depth of the color palette.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<!--   w w  w  .  ja  v a 2  s .co m-->
<p id="demo"></p>

<script>
function myFunction() {
    var x = "Color Depth: " + screen.colorDepth + " bits per pixel";
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows: