`color-index` CSS media feature

Baseline Widely available

This feature is well established and works across many devices and browser versions. It's been available across browsers since July 2015.

The color-index CSS media feature can be used to test the number of entries in the output device's color lookup table.

Syntax

The color-index feature is specified as an <integer> value representing the number of entries in the output device's color lookup table. (This value is zero if the device does not use such a table.) It is a range feature, meaning that you can also use the prefixed min-color-index and max-color-index variants to query minimum and maximum values, respectively.

Examples

Basic example

HTML

<p>This is a test.</p>

CSS

p {
  color: black;
}

@media (color-index) {
  p {
    color: red;
  }
}

@media (min-color-index: 15000) {
  p {
    color: #1475ef;
  }
}

Result

Custom stylesheet

This HTML will apply a special stylesheet for devices that have at least 256 colors.

<link rel="stylesheet" href="https://cdn.example.com/base.css" />
<link
  rel="stylesheet"
  media="(color-index >= 256)"
  href="https://cdn.example.com/color-stylesheet.css" />

Specifications

Specification
Media Queries Level 4 # color-index

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`color-index`	29	79	No	16	8	29	No	16	8	2.0	4.4	8