The color-index media feature tests how many entries are in the output device’s color lookup table (palette). If the device does not use a lookup table, the value is 0.
It is a range feature: use (color-index), (color-index: <integer>), (min-color-index: <integer>), and (max-color-index: <integer>). This is different from color (bits per component) and color-gamut (gamut width).
Not Baseline — missing or incomplete in some widely used browsers. Most modern true-color screens report 0, so queries rarely match phones and desktops. Use it as progressive simplification for indexed-color hardware.
@media (color-index) | (color-index: <integer>) | (min-color-index: <integer>) | (max-color-index: <integer>) { … }Example: @media (min-color-index: 256) { … }. The integer is palette entries.
| Query | Description | Try it |
|---|---|---|
(color-index) | Matches indexed-color devices (palette size > 0) | Try it |
(min-color-index: 256) | At least 256 palette entries | Try it |
(max-color-index: 256) | At most 256 palette entries | Try it |
(color-index: 0) | No lookup table (typical true-color displays) | Try it |
(color-index: 8) | Exact palette size of 8 entries | Try it |
color-indexKeep full-color styles as the default; simplify only when an indexed palette is detected.
@media (color-index) or (max-color-index: …) to simplify colors on limited palettes.color / monochrome when you also care about bit depth or grayscale.| Piece | Required? | Role |
|---|---|---|
| Base true-color styles | Yes | What most visitors see |
@media (color-index…) | Optional | Simplifies for indexed palettes |
| Integer palette size | For min/max/exact | Number of lookup-table entries |
| Browser support check | Recommended | Feature has limited availability |
This page checks your browser with matchMedia. On a typical phone or laptop you will often see no match for (color-index) and a match for (color-index: 0).
Each snippet focuses on color-index. On most modern screens these indexed rules will not apply — that is expected. Use Try It Yourself for a live editor.
Change text color when a color lookup table exists.
<style>
p {
color: black;
}
@media (color-index) {
p {
color: crimson;
}
}
</style>
<p>Crimson only on indexed-color devices.</p>(color-index). Matches when palette size > 0.min-color-index: 256Require at least 256 palette entries before enabling a richer accent.
<style>
p {
color: #334155;
}
@media (min-color-index: 256) {
p {
color: #1475ef;
}
}
</style>
<p>Blue when the palette has 256+ entries.</p>min-color-index: 256. Classic “at least 8-bit palette” threshold.color-index: 0Style true-color devices that report no lookup table.
<style>
p {
padding: 8px;
background: #f1f5f9;
}
@media (color-index: 0) {
p {
background: #dbeafe;
border: 1px solid #2563eb;
}
}
</style>
<p>Blue panel on non-indexed (true-color) devices.</p>(color-index: 0) means no lookup table.Most confusion comes from expecting phones to report a palette size.
Support is incomplete across major browsers. Never make critical layout depend only on color-index.
True-color devices often report 0 (no lookup table). That does not mean “no color” — use color for that.
color = bits per RGB channel. color-index = palette entries. Do not mix the integers.
Useful for learning and specialized hardware. For everyday sites, prefer contrast, color-gamut, and solid defaults.
color-index is a browser CSS media feature. Node.js, Deno, and Bun do not evaluate it.
Implemented in some engines, missing or incomplete in others. Even where supported, modern true-color devices often report 0.
Bottom line: Treat as progressive simplification only. Keep full-color defaults. This is not a JavaScript runtime API.
min- / max-color-index for thresholds like 256.One line: color-index asks “how big is the palette?” — usually zero on modern screens, handy for niche indexed displays.
Learn how to style for browser, standalone, and related display modes.
5 people found this page helpful