Color Index

What is Color Index

The color-index CSS media feature tests whether the output device uses a color lookup table and, if so, how many entries that table contains. This specialized media query enables developers to create adaptive experiences based on device color display capabilities.

A color lookup table (CLUT) is a data structure that maps numeric color indices to actual color values. Devices with limited color capabilities maintain predefined palettes of colors they can render. The color-index feature reports the size of this lookup table, allowing developers to adapt designs accordingly.

Historically, this feature was crucial when devices varied dramatically in color support--early mobile phones might support only 256 colors while desktop monitors supported thousands. Today, most modern displays support millions of colors, making color-index less essential for typical web development. However, understanding this feature remains valuable for legacy support scenarios and specialized display systems. Our web development services can help you navigate these considerations for projects requiring broad device compatibility.

Color Lookup Tables Explained

A color lookup table is essentially a mapping system that translates numeric color values into actual colors displayed on screen. When a device supports a limited number of colors, it maintains a predefined palette where each entry represents a specific color that can be rendered. When CSS specifies a color like rgb(255, 0, 0), the device finds the closest match in its lookup table or uses dithering to approximate the color.

Modern displays with 24-bit color depth can display approximately 16.7 million different colors, which exceeds any practical lookup table size. Many modern systems don't use traditional lookup tables at all, instead calculating color values directly from RGB components.

Syntax and Values

The color-index feature accepts integer values representing the number of entries in a device's color lookup table. The syntax follows standard CSS media query conventions with exact matching and range query variants.

Basic Syntax Variations

/* Boolean test - true if device has any color lookup table */
@media (color-index) { }

/* Exact value - matches only specific table size */
@media (color-index: 256) { }

/* Range queries - Media Queries Level 4 */
@media (min-color-index: 256) { }
@media (max-color-index: 256) { }

Understanding the Values

• Zero value: Devices without a color lookup table return 0
• 256 colors: Common for older 8-bit color displays
• 65536 colors: 16-bit color depth devices
• 16777216 colors: True color (24-bit) displays

The boolean form (color-index) is true for devices with a color lookup table containing one or more entries. The exact value form (color-index: N) matches only when the lookup table has exactly N entries. The range forms (min-color-index: N) and (max-color-index: N) provide greater flexibility for matching ranges of color depth capabilities.

Combining with Other Media Features

The color-index feature can be combined with other media features using logical operators to create more specific targeting conditions. This approach aligns with responsive design best practices for creating adaptive layouts:

@media (color-index) and (min-width: 768px) { }
@media (color-index: 256) and (max-width: 480px) { }

Practical Examples

Implementing color-index involves creating conditional styles that adapt based on detected color capabilities. These examples demonstrate common implementation patterns following progressive enhancement principles. For more on building adaptive web experiences, explore our web development expertise.

Basic Conditional Styling

/* Default styles for all devices */
body {
 background-color: #ffffff;
 color: #333333;
}

/* Enhanced styles for color-capable devices */
@media (color-index) {
 body {
 background-color: #f0f8ff;
 color: #1a365d;
 }
}

/* Simplified styles for limited-color devices */
@media (max-color-index: 256) {
 body {
 background-color: #fffff0;
 color: #333333;
 }
}

Targeting Specific Color Depths

/* High-color devices (millions of colors) */
@media (min-color-index: 16777216) {
 .photo-gallery {
 image-rendering: high-quality;
 }
}

/* Medium-color devices */
@media (min-color-index: 65536) and (max-color-index: 16777215) {
 .photo-gallery {
 image-rendering: auto;
 }
}

/* Low-color devices (256 colors or less) */
@media (max-color-index: 256) {
 .photo-gallery {
 image-rendering: pixelated;
 }
}

Legacy Browser Fallbacks

/* Modern full-color experience */
.product-card {
 background: linear-gradient(to bottom, #4a90d9, #2c5aa0);
 border: 1px solid #1e3d6b;
}

/* Fallback for limited-color devices */
@media (max-color-index: 256) {
 .product-card {
 background-color: #4a90d9;
 border: 1px solid #000000;
 }
}

Using with CSS Custom Properties

Combining color-index with CSS custom properties allows for centralized color management:

:root {
 --primary-color: #0066cc;
 --background-color: #ffffff;
}

@media (color-index) {
 :root {
 --primary-color: hsl(210, 100%, 45%);
 --background-color: hsl(0, 0%, 100%);
 }
}

Browser Compatibility

Understanding browser support is crucial when using color-index in production websites.

Current Support Status

Progressive Enhancement Strategy

Given inconsistent support, the recommended approach follows progressive enhancement principles:

/* Base styles - work everywhere */
.gradient-header {
 background-color: #4a90d9;
}

/* Enhanced styles - only apply if color-index is supported */
@media (color-index) {
 .gradient-header {
 background: linear-gradient(135deg, #4a90d9, #2c5aa0);
 }
}

This pattern ensures users on unsupported browsers receive a functional experience while supporting browsers enjoy enhanced styling. The enhancement is truly additive rather than essential.

Related CSS Features

Several CSS features address color and display characteristics that may be more relevant than color-index for modern projects:

Color-Related Media Features

• color-gamut: Tests the approximate color range (srgb, p3, rec2020)
• dynamic-range-limit: Detects display brightness and HDR capabilities
• prefers-color-scheme: Responds to user preference for light or dark themes

Modern Color Features

• color(): Function for specifying colors in various color spaces
• lab() and lch(): Perceptually uniform color spaces
• color-mix(): Runtime color mixing
• color-contrast(): Automatic contrast optimization

Related Development Topics

• CSS Media Queries Overview
• Responsive Design Best Practices
• CSS Custom Properties