CSS Media Features - color-index

CSS media feature color-index is used to detect the number of colors that a device's display can represent. It is particularly useful for distinguishing devices with limited color capabilities, such as monochrome (black and white) displays, from devices that can render a larger range of colors.

You can also use the min-color-index and max-color-index variants to query the minimum and maximum number of colors that the device can display.

Possible Values

  • <integer> − It representing the number of colors that the output device can display.

Syntax

color-index: <integer>;

CSS color-index - <integer> Value

The following example demonstrates that the color-index media feature, the element will have a red text color by default.

The devices that have a color lookup table with at least 8 entries, the text background becomes violet.
<html>
<head>
<style>
   p {
      color: red
   }
   @media (color-index >= 8) {
      p {
         background-color: violet;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature color-index</p>
</body>
</html>

CSS color-index - max-color-index Property

The following example demonstrates that the max-color-index: 1500 media feature, the element will have a red text color by default.

Th device that has a color index greater than 15,000, the text color of the element will be blue and background color becomes violet.
<html>
<head>
<style>
   p {
      color: red
   }
   @media (max-color-index: 15000) {
      p {
         background-color: violet;
         color: blue;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature max-color-index</p>
</body>
</html>

CSS color-index - min-color-index Property

The following example demonstrates that the min-color-index: 256 media feature, the element will have a red text color by default.

The device that has a color index less than 256, the text color of the element will be blue and background color becomes violet.
<html>
<head>
<style>
   p {
      color: red
   }
   @media (min-color-index: 256) {
      p {
         background-color: violet;
         color: blue;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature min-color-index</p>
</body>
</html>
Advertisements