CSS color-index Media Feature

What You’ll Learn

The color-index media feature detects how many colors exist in a device’s palette lookup table. Use it to simplify designs on indexed-color or limited-palette displays.

Introduction

The @media color-index feature targets devices based on the number of entries in their color lookup table — the palette used by indexed-color displays. Instead of mixing millions of RGB values directly, some hardware picks colors from a fixed table of 256 (or fewer) swatches.

Most modern phones, laptops, and monitors report a very high color-index value. This feature is mainly useful for progressive simplification on legacy or specialized hardware, or when you want to understand how CSS models display capabilities.

Definition and Usage

Write integer values inside media queries: @media (min-color-index: 256), @media (max-color-index: 256), or an exact @media (color-index: 256). The boolean form (color-index) matches any indexed-color device.

📝 Syntax

Use positive integers with the color-index media feature:

@media (color-index: 256) {
  /* Exact 256-entry palette */
}

@media (min-color-index: 256) {
  /* At least 256 palette colors */
}

@media (max-color-index: 256) {
  /* At most 256 palette colors */
}

@media (color-index) {
  /* Any indexed-color device */
}

Feature Variants

• color-index — Boolean or exact integer for palette table size.
• min-color-index — Matches when the palette has at least N entries.
• max-color-index — Matches when the palette has at most N entries (limited-color devices).

color-index vs color Media Feature

Basic Example

@media (min-color-index: 256) {
  body {
    background-color: #dbeafe;
  }
  p {
    color: #1e3a8a;
  }
}

@media (max-color-index: 256) {
  body {
    background-color: #e2e8f0;
  }
  p {
    color: #1e293b;
  }
}

Default Value

There is no CSS default. The browser reports the device’s palette capability at runtime.

Syntax Rules

• Values must be non-negative integers (typically 2, 16, 256, etc.).
• Prefer min- and max- ranges over exact palette matches.
• Use max-color-index to simplify UI on limited palettes.
• Distinct from color (bit depth) and color-gamut (gamut width).
• On modern hardware, low palette queries rarely match — treat as progressive enhancement.

Related Topics

• color media feature — bits per color component
• color-gamut — display color range (sRGB, P3)
• color property — set element text color

When to Use color-index

Reach for color-index in specialized scenarios:

• Legacy hardware — Simplify colors on old indexed-color screens.
• Embedded displays — Adapt UI for industrial panels with small palettes.
• Progressive simplification — Reduce gradient complexity on limited palettes.
• Educational demos — Teach how CSS models display color capabilities.
• Pair with color feature — Combine bit-depth and palette queries for fine-grained control.

Examples Gallery

Practice color-index with palette thresholds, simplified UI, and comparisons to the color feature.

@media (min-color-index: 256) {
  body {
    background-color: #dbeafe;
  }
  p {
    color: #1e3a8a;
  }
}

.card {
  padding: 1rem;
  background: linear-gradient(135deg, #dbeafe, #fce7f3);
  border: 1px solid #93c5fd;
  border-radius: 0.5rem;
}

@media (max-color-index: 256) {
  .card {
    background: #e2e8f0;
    border-color: #64748b;
    box-shadow: none;
  }
}

.hero {
  padding: 2rem;
  background: #2563eb;
  color: #fff;
}

@media (color-index) and (max-color-index: 256) {
  .hero {
    background: #334155;
    background-image: none;
  }
}

@media (min-color-index: 4096) {
  .hero {
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
  }
}

/* True-color bit depth */
@media (min-color: 8) {
  .panel {
    background: #eff6ff;
  }
}

/* Indexed palette size */
@media (max-color-index: 256) {
  .panel {
    background: #f1f5f9;
    border: 2px solid #334155;
  }
}

.panel {
  padding: 1rem;
  border-radius: 0.5rem;
}

💬 Usage Tips

• Use max-color-index — Simplify UI when palette size is small; more practical than exact matches.
• Flat over gradients — Limited palettes render flat colors more faithfully than smooth gradients.
• High contrast borders — Add strong borders on low palette devices when subtle shades collapse.
• Modern reality — Most users won’t trigger low palette queries; keep defaults polished.
• Learn the trio — color, color-index, and color-gamut cover different display traits.

⚠️ Common Pitfalls

• Expecting matches on modern phones — Typical devices report huge palette sizes; low-index queries won’t fire.
• Confusing with color — Bit depth ≠ palette table size; read the feature names carefully.
• Exact integer matches — (color-index: 256) is fragile; prefer min/max ranges.
• Over-engineering — Don’t build entire layouts around color-index unless you target legacy hardware.
• Color-only cues — Limited palettes make subtle shade differences harder; use icons and labels.

♿ Accessibility

• Strong contrast — On limited palettes, subtle grays may collapse; use high-contrast pairs.
• Do not rely on fine shades — Status colors may dither; pair with text and icons.
• Readable defaults — Base styles must work even when enhancement queries never match.
• Test simplification — Verify that max-color-index fallbacks remain fully usable.
• Color blindness — Palette limits compound confusion between similar hues.

💡 Best Practices