CSS Media Features - Color

CSS media feature color tests the number of bits per color component such as red, green, and blue of the output device.

CSS color media is a range feature, which means that you can also use the prefixed min-color and max-color variants to query minimum and maximum values, respectively.

Possible Values

<integer> − It defines the bit depth used to represent individual colors (such as red, green, and blue) that an output device can display.

Syntax

   @media (color:<integer>) {
      //css style
   }

When representing color components, it uses the smallest number of bits required to represent each color component. A display that uses 5 bits for blue and red and 6 bits for green is considered to have 5 bits per color component. If the display uses indexed colors, then it uses the smallest number of bits used to represent a color in the color table.

CSS color - Basic Example

The following example demonstrates that the CSS color media feature to change the text color of the <p> element to red if the output device can display more than 0 colors −

<html>
<head>
<style>
   div {
      color: blue;
      background-color: yellow;
   }
   @media (color) {
      div {
         color: red;
      }
   }
</style>
</head>
<body>
   <div>
      <h2>CSS Media Query</h2>
      <p>This is an example of CSS media queries with the "color" media feature.</p>
   </div>
</body>
</html>

CSS color - <integer> Value

The following example demonstrates that the color <= 10 media feature, the h2 element will have blue text color by default −

When the number of bits per color component available on the device is less than or equal to 10, it changes the text color to red and the background color to yellow.

<html>
<head>
<style>
   h2 {
      color: blue;
   }
   @media (color <= 10) {
      h2 {
         color: red;
         background-color: yellow;
      }
   }
</style>
</head>
<body>
   <h2>CSS Media Feature Color</h2>
</body>
</html>

CSS color - max-color Property

The following example demonstrates that the max-color: 8 media feature, the h2 element will have pink background and blue text color by default −

When the number of bits per color component available on the device is less than or equal to 8, it changes the text color to green and the background color to yellow.

<html>
<head>
<style>
   h2 {
      background-color: pink;
      color: black;
   }
   @media (max-color: 8) {
      h2 {
         background-color: yellow;
         color: green;
      }
   }
</style>
</head>
<body>
   <h2>CSS Media Feature Color</h2>
</body>
</html>

CSS color- min-color Property

The following example demonstrates that the min-color: 4 media feature, the h2 element will have pink background and blue text color by default −

When the number of bits per color component available on the device is greater than or equal to 4, it change the background color to violet.

<html>
<head>
<style>
   h2 {
      background-color: pink;
      color: black;
   }
   @media (min-color: 4) {
      h2 {
         background-color: violet;
      }
   }
</style>
</head>
<body>
   <h2>CSS Media Feature Color</h2>
</body>
</html>