@media.color

The color CSS media feature can be used to test the number of bits per color component (red, green, blue) of the output device.

Syntax

The color feature is specified as an <integer> value that represents the number of bits per color component (red, green, blue) of the output device. If the device is not a color device, the value is zero. It is a range feature, meaning that you can also use the prefixed min-color and max-color variants to query minimum and maximum values, respectively.

See Applying color to HTML elements using CSS to learn more about using CSS to apply color to HTML.

Example

HTML

<p>This text should be black on non-color devices, red on devices with a low number of colors, and greenish on devices with a high number of colors.</p>

CSS

p {
  color: black;
}

/* Any color device */
@media (color) {
  p {
    color: red;
  }
}

/* Any color device with at least 8 bits per color component */
@media (min-color: 8) {
  p {
    color: #24ba13;
  }
}

Result

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

• Applying color to HTML elements using CSS
• The CSS color property
• The CSS <color> data unit