|

CSS 33 💻 color gamut, color index media features

Bykronos

These two advanced media features let you adapt styles based on the color capabilities of the display — from the range of colors it can reproduce to the size of its color lookup table.

Overview of Features

FeatureDescriptionValues
color-gamutApproximate color gamut of the displaysrgb, p3, rec2020
color-indexNumber of entries in the color lookup tableInteger (e.g., 1, 8, 256)

1. color-gamut

The color-gamut media feature queries the approximate range of colors (gamut) that the output device can display.

@media (color-gamut: p3) {
    .display-p3 {
        background-color: oklch(69% 0.27 140);
    }
}

Values

ValueDescription
srgbStandard sRGB color space (most common)
p3DCI-P3 or Adobe RGB (1988) — wider than sRGB
rec2020Rec. 2020 — widest color space
display-p3Alias for p3

Color Space Comparison

┌─────────────────────────────────────────────────────┐
│                    rec2020                          │
│  ┌─────────────────────────────────────────────┐    │
│  │                   p3                        │    │
│  │  ┌───────────────────────────────────────┐  │    │
│  │  │                srgb                   │  │    │
│  │  │  (Standard — most devices)            │  │    │
│  │  └───────────────────────────────────────┘  │    │
│  └─────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────┘

Key Points:

  • srgb — Standard for most monitors, phones, and the web
  • p3 — Wider gamut found on modern Apple devices and high-end displays
  • rec2020 — Widest gamut, used in HDR and professional video
  • A device that supports p3 also supports srgb (it’s a superset)
  • A device that supports rec2020 also supports p3 and srgb

Important: color-gamut tells you what the display can reproduce, not what it’s currently set to. You still need to use wide-gamut color values (like oklch(), color(display-p3 ...)) for the wider gamut to be visible.

2. color-index

The color-index media feature queries the number of entries in the output device’s color lookup table (CLUT). This is primarily relevant for devices with indexed color, like older displays or certain embedded systems.

@media (min-color-index: 1) {
    body {
        background-color: lightgray;
    }
}

Syntax

color-index: <integer>
color-index: >= 8
min-color-index: 1
max-color-index: 8

Variations

FeatureDescriptionExample
color-indexExact number of entries@media (color-index: 256)
min-color-indexMinimum entries@media (min-color-index: 1)
max-color-indexMaximum entries@media (max-color-index: 8)

Key Points:

  • color-index: 0 means the device does not use a color lookup table
  • Most modern devices use direct color (not indexed), so color-index: 0
  • Indexed color was common in older systems (e.g., 256-color VGA)
  • min-color-index is equivalent to color-index >= value
  • max-color-index is equivalent to color-index <= value

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>color-gamut and color-index Media Features</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            padding: 20px;
            background: #f8f9fa;
            max-width: 1200px;
            margin: 0 auto;
            transition: background 0.3s;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        h3 {
            color: #333;
            margin-top: 20px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
            transition: background 0.3s;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .note {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 5px;
        }

        .highlight {
            background: #ffc107;
            color: #333;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }

        /* ====== COLOR GAMUT DEMO ====== */
        .color-box {
            width: 200px;
            height: 200px;
            display: inline-block;
            margin: 10px;
            border-radius: 12px;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            position: relative;
            overflow: hidden;
        }

        .color-box::after {
            content: attr(data-label);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.6);
            color: white;
            padding: 8px;
            text-align: center;
            font-size: 0.85rem;
            font-weight: bold;
            backdrop-filter: blur(4px);
        }

        /* Default: srgb */
        .color-box {
            background-color: rgb(85, 85, 85);
        }

        /* sRGB gamut */
        @media (color-gamut: srgb) {
            .srgb {
                background-color: rgb(85, 85, 85);
            }
        }

        /* P3 gamut */
        @media (color-gamut: p3) {
            .display-p3 {
                background-color: oklch(69% 0.27 140);
            }
        }

        /* Rec. 2020 gamut */
        @media (color-gamut: rec2020) {
            .rec2020 {
                background-color: rgb(15, 15, 15);
            }
        }

        /* ====== COLOR INDEX DEMO ====== */
        @media (min-color-index: 1) {
            body {
                background-color: lightgray;
            }
            .content {
                max-width: 80%;
                margin: auto;
                padding: 20px;
                border: 1px solid #ccc;
                box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
            }
        }

        @media (max-color-index: 8) {
            body {
                background-color: lightblue;
            }
            .content {
                max-width: 60%;
                margin: auto;
                padding: 10px;
                border: 1px solid #aaa;
                box-shadow: none;
            }
        }

        /* ====== DETECTION CARDS ====== */
        .detection-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .detection-card {
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border: 2px solid #ddd;
            background: #f8f9fa;
            transition: all 0.3s;
        }

        .detection-card .label {
            font-size: 0.85rem;
            color: #666;
            display: block;
            margin-bottom: 5px;
        }

        .detection-card .value {
            font-size: 1.1rem;
            font-weight: bold;
            color: #007bff;
        }

        /* Gamut cards */
        .gamut-card.srgb {
            background: #cce5ff;
            border-color: #007bff;
        }
        .gamut-card.srgb .value { color: #007bff; }

        .gamut-card.p3 {
            background: #d4edda;
            border-color: #28a745;
        }
        .gamut-card.p3 .value { color: #28a745; }

        .gamut-card.rec2020 {
            background: #fff3cd;
            border-color: #ffc107;
        }
        .gamut-card.rec2020 .value { color: #856404; }

        /* Color index cards */
        .index-card {
            background: #e9ecef;
            border-color: #6c757d;
        }
        .index-card .value { color: #6c757d; }

        /* ====== LIVE INDICATOR ====== */
        .live-indicator {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #007bff;
            color: white;
            padding: 12px 20px;
            border-radius: 50px;
            font-weight: bold;
            font-size: 0.85rem;
            box-shadow: 0 4px 15px rgba(0,123,255,0.4);
            z-index: 1000;
            transition: all 0.3s;
        }

        /* ====== PRACTICAL EXAMPLE ====== */
        .hero-image {
            width: 100%;
            height: 300px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            margin: 20px 0;
            transition: all 0.3s;
            /* Default: sRGB */
            background: linear-gradient(135deg, #007bff, #6c5ce7);
        }

        /* Enhanced for P3 displays */
        @media (color-gamut: p3) {
            .hero-image {
                background: linear-gradient(135deg, oklch(69% 0.27 240), oklch(69% 0.27 300));
            }
        }

        /* Enhanced for Rec. 2020 displays */
        @media (color-gamut: rec2020) {
            .hero-image {
                background: linear-gradient(135deg, oklch(69% 0.27 30), oklch(69% 0.27 120), oklch(69% 0.27 240));
            }
        }

        /* ====== CONTENT BOX ====== */
        .content {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            transition: all 0.3s;
        }
    </style>
</head>
<body>

    <h1>color-gamut and color-index Media Features</h1>

    <!-- ====== 1. COLOR-GAMUT DEMO ====== -->
    <section>
        <h2>1. color-gamut</h2>
        <p>Queries the <strong>approximate color gamut</strong> of the display.</p>

        <div style="text-align: center;">
            <div class="color-box srgb" data-label="sRGB (Standard)"></div>
            <div class="color-box display-p3" data-label="Display P3 (Wide)"></div>
            <div class="color-box rec2020" data-label="Rec. 2020 (Widest)"></div>
        </div>

        <p class="note" style="text-align: center;">Each box uses a color from its respective gamut. On a standard sRGB display, they'll all look similar. On a wide-gamut display, the P3 and Rec. 2020 colors will appear more vibrant.</p>

        <div class="code-block">
            /* Default: sRGB */
            .color-box {
                background-color: rgb(85, 85, 85);
            }

            /* sRGB gamut */
            @media (color-gamut: srgb) {
                .srgb {
                    background-color: rgb(85, 85, 85);
                }
            }

            /* P3 gamut (DCI-P3 / Adobe RGB) */
            @media (color-gamut: p3) {
                .display-p3 {
                    background-color: oklch(69% 0.27 140);
                }
            }

            /* Rec. 2020 gamut (widest) */
            @media (color-gamut: rec2020) {
                .rec2020 {
                    background-color: rgb(15, 15, 15);
                }
            }
        </div>
    </section>

    <!-- ====== 2. COLOR-INDEX DEMO ====== -->
    <section>
        <h2>2. color-index</h2>
        <p>Queries the <strong>number of entries</strong> in the output device's color lookup table.</p>

        <div class="content">
            <h3>Welcome to Our Website!</h3>
            <p>This is a simple example of using the <code>color-index</code> media feature in CSS.</p>
            <p>The styles on this page adapt based on your device's color index capability.</p>
        </div>

        <div class="code-block">
            /* At least 1 color index */
            @media (min-color-index: 1) {
                body {
                    background-color: lightgray;
                }
                .content {
                    max-width: 80%;
                    padding: 20px;
                    border: 1px solid #ccc;
                    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
                }
            }

            /* At most 8 color indices */
            @media (max-color-index: 8) {
                body {
                    background-color: lightblue;
                }
                .content {
                    max-width: 60%;
                    padding: 10px;
                    border: 1px solid #aaa;
                    box-shadow: none;
                }
            }
        </div>
    </section>

    <!-- ====== 3. DETECTION SUMMARY ====== -->
    <section>
        <h2>3. Your Display's Capabilities</h2>
        <p>Below is a live detection of your display's color capabilities.</p>

        <div class="detection-grid">
            <div class="detection-card" id="gamut-srgb">
                <span class="label">color-gamut: srgb</span>
                <span class="value" id="gamut-srgb-value">Detecting...</span>
            </div>
            <div class="detection-card" id="gamut-p3">
                <span class="label">color-gamut: p3</span>
                <span class="value" id="gamut-p3-value">Detecting...</span>
            </div>
            <div class="detection-card" id="gamut-rec2020">
                <span class="label">color-gamut: rec2020</span>
                <span class="value" id="gamut-rec2020-value">Detecting...</span>
            </div>
            <div class="detection-card" id="index-any">
                <span class="label">color-index</span>
                <span class="value" id="index-any-value">Detecting...</span>
            </div>
            <div class="detection-card" id="index-min">
                <span class="label">min-color-index: 1</span>
                <span class="value" id="index-min-value">Detecting...</span>
            </div>
            <div class="detection-card" id="index-max">
                <span class="label">max-color-index: 8</span>
                <span class="value" id="index-max-value">Detecting...</span>
            </div>
        </div>

        <div class="code-block">
            /* Detect sRGB */
            @media (color-gamut: srgb) { /* Standard color gamut */ }

            /* Detect P3 */
            @media (color-gamut: p3) { /* Wide color gamut */ }

            /* Detect Rec. 2020 */
            @media (color-gamut: rec2020) { /* Widest color gamut */ }

            /* Detect color index */
            @media (min-color-index: 1) { /* At least 1 color index */ }
            @media (max-color-index: 8) { /* At most 8 color indices */ }
        </div>
    </section>

    <!-- ====== 4. PRACTICAL EXAMPLE ====== -->
    <section>
        <h2>4. Practical Example: Enhanced Hero Image</h2>
        <p>This hero image uses wider-gamut colors on displays that support them.</p>

        <div class="hero-image">
            🎨 Enhanced for Wide-Gamut Displays
        </div>

        <div class="code-block">
            /* Default: sRGB gradient */
            .hero-image {
                background: linear-gradient(135deg, #007bff, #6c5ce7);
            }

            /* Enhanced for P3 displays */
            @media (color-gamut: p3) {
                .hero-image {
                    background: linear-gradient(135deg, oklch(69% 0.27 240), oklch(69% 0.27 300));
                }
            }

            /* Enhanced for Rec. 2020 displays */
            @media (color-gamut: rec2020) {
                .hero-image {
                    background: linear-gradient(135deg, oklch(69% 0.27 30), oklch(69% 0.27 120), oklch(69% 0.27 240));
                }
            }
        </div>
    </section>

    <!-- ====== 5. REFERENCE TABLES ====== -->
    <section>
        <h2>5. Reference Tables</h2>

        <h3>color-gamut Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Typical Devices</th>
            </tr>
            <tr>
                <td><code>srgb</code></td>
                <td>Standard sRGB color space</td>
                <td>Most monitors, phones, laptops</td>
            </tr>
            <tr>
                <td><code>p3</code></td>
                <td>DCI-P3 or Adobe RGB (1988)</td>
                <td>Modern Apple devices, high-end displays</td>
            </tr>
            <tr>
                <td><code>rec2020</code></td>
                <td>Rec. 2020 color space</td>
                <td>HDR displays, professional video</td>
            </tr>
            <tr>
                <td><code>display-p3</code></td>
                <td>Alias for <code>p3</code></td>
                <td>Same as <code>p3</code></td>
            </tr>
        </table>

        <h3>color-index Values</h3>
        <table class="reference-table">
            <tr>
                <th>Feature</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>color-index</code></td>
                <td>Exact number of entries</td>
                <td><code>@media (color-index: 256)</code></td>
            </tr>
            <tr>
                <td><code>min-color-index</code></td>
                <td>Minimum entries</td>
                <td><code>@media (min-color-index: 1)</code></td>
            </tr>
            <tr>
                <td><code>max-color-index</code></td>
                <td>Maximum entries</td>
                <td><code>@media (max-color-index: 8)</code></td>
            </tr>
        </table>

        <h3>Color Space Comparison</h3>
        <table class="reference-table">
            <tr>
                <th>Color Space</th>
                <th>Coverage</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><code>sRGB</code></td>
                <td>~35% of visible colors</td>
                <td>Standard for web and most devices</td>
            </tr>
            <tr>
                <td><code>DCI-P3</code></td>
                <td>~45% of visible colors</td>
                <td>Wider than sRGB, used in cinema and modern displays</td>
            </tr>
            <tr>
                <td><code>Rec. 2020</code></td>
                <td>~75% of visible colors</td>
                <td>Widest standard, used in HDR and 8K video</td>
            </tr>
        </table>
    </section>

    <!-- ====== 6. BEST PRACTICES ====== -->
    <section>
        <h2>6. Best Practices</h2>

        <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
            <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
            <ul>
                <li>Use <code>color-gamut</code> to provide enhanced colors on capable displays</li>
                <li>Always provide an sRGB fallback for devices that don't support wider gamuts</li>
                <li>Use modern color functions like <code>oklch()</code> and <code>color(display-p3 ...)</code></li>
                <li>Use <code>color-index</code> only for legacy or specialized devices</li>
                <li>Test on both standard and wide-gamut displays</li>
                <li>Remember that wider gamut ≠ better design — use it purposefully</li>
            </ul>
        </div>

        <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
            <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
            <ul>
                <li>Don't assume all displays support wide gamuts</li>
                <li>Don't use <code>color-index</code> for modern devices (most use direct color)</li>
                <li>Don't forget to provide sRGB fallbacks</li>
                <li>Don't use wide-gamut colors without testing on standard displays</li>
                <li>Don't rely on color-gamut for critical functionality</li>
            </ul>
        </div>
    </section>

    <!-- ====== LIVE INDICATOR ====== -->
    <div class="live-indicator" id="live-indicator">Detecting...</div>

    <!-- ====== SCRIPT FOR DETECTION ====== -->
    <script>
        function updateIndicators() {
            // Gamut detection
            const srgbCard = document.getElementById('gamut-srgb');
            const p3Card = document.getElementById('gamut-p3');
            const rec2020Card = document.getElementById('gamut-rec2020');
            const indicator = document.getElementById('live-indicator');

            let gamutName = 'Unknown';

            if (window.matchMedia('(color-gamut: rec2020)').matches) {
                srgbCard.className = 'detection-card gamut-card rec2020';
                srgbCard.querySelector('.value').textContent = 'Supported ✅';
                p3Card.className = 'detection-card gamut-card rec2020';
                p3Card.querySelector('.value').textContent = 'Supported ✅';
                rec2020Card.className = 'detection-card gamut-card rec2020';
                rec2020Card.querySelector('.value').textContent = 'Supported ✅';
                gamutName = 'Rec. 2020';
            } else if (window.matchMedia('(color-gamut: p3)').matches) {
                srgbCard.className = 'detection-card gamut-card p3';
                srgbCard.querySelector('.value').textContent = 'Supported ✅';
                p3Card.className = 'detection-card gamut-card p3';
                p3Card.querySelector('.value').textContent = 'Supported ✅';
                rec2020Card.querySelector('.value').textContent = 'Not supported ❌';
                gamutName = 'Display P3';
            } else if (window.matchMedia('(color-gamut: srgb)').matches) {
                srgbCard.className = 'detection-card gamut-card srgb';
                srgbCard.querySelector('.value').textContent = 'Supported ✅';
                p3Card.querySelector('.value').textContent = 'Not supported ❌';
                rec2020Card.querySelector('.value').textContent = 'Not supported ❌';
                gamutName = 'sRGB';
            } else {
                srgbCard.querySelector('.value').textContent = 'Not supported ❌';
                p3Card.querySelector('.value').textContent = 'Not supported ❌';
                rec2020Card.querySelector('.value').textContent = 'Not supported ❌';
            }

            // Color index detection
            const indexAnyCard = document.getElementById('index-any');
            const indexMinCard = document.getElementById('index-min');
            const indexMaxCard = document.getElementById('index-max');

            if (window.matchMedia('(color-index: 0)').matches) {
                indexAnyCard.querySelector('.value').textContent = 'Direct color (0)';
            } else if (window.matchMedia('(min-color-index: 1)').matches) {
                indexAnyCard.querySelector('.value').textContent = 'Indexed color ✅';
            } else {
                indexAnyCard.querySelector('.value').textContent = 'Unknown';
            }

            if (window.matchMedia('(min-color-index: 1)').matches) {
                indexMinCard.className = 'detection-card index-card';
                indexMinCard.querySelector('.value').textContent = '≥ 1 ✅';
            } else {
                indexMinCard.querySelector('.value').textContent = 'Not detected';
            }

            if (window.matchMedia('(max-color-index: 8)').matches) {
                indexMaxCard.className = 'detection-card index-card';
                indexMaxCard.querySelector('.value').textContent = '≤ 8 ✅';
            } else {
                indexMaxCard.querySelector('.value').textContent = 'Not detected';
            }

            // Update live indicator
            indicator.textContent = '🎨 ' + gamutName;
            indicator.style.background = gamutName === 'Rec. 2020' ? '#6c5ce7' :
                                         gamutName === 'Display P3' ? '#28a745' :
                                         gamutName === 'sRGB' ? '#007bff' : '#6c757d';
        }

        window.addEventListener('load', updateIndicators);
        updateIndicators();
    </script>

</body>
</html>

Quick Reference

FeatureDescriptionValues
color-gamutApproximate color gamut of displaysrgb, p3, rec2020
color-indexColor lookup table entriesInteger

color-gamut Values

ValueDescriptionTypical Devices
srgbStandard sRGBMost monitors, phones
p3DCI-P3 or Adobe RGBModern Apple devices, high-end displays
rec2020Rec. 2020HDR displays, professional video
display-p3Alias for p3Same as p3

color-index Variations

FeatureDescriptionExample
color-indexExact entries@media (color-index: 256)
min-color-indexMinimum entries@media (min-color-index: 1)
max-color-indexMaximum entries@media (max-color-index: 8)

Color Space Comparison

Color SpaceCoverageDescription
sRGB~35% of visible colorsStandard for web
DCI-P3~45% of visible colorsWider, used in cinema
Rec. 2020~75% of visible colorsWidest, used in HDR

Best Practices

✅ Do This:

/* Provide sRGB fallback first */
.hero {
    background: linear-gradient(135deg, #007bff, #6c5ce7);
}

/* Enhance for P3 displays */
@media (color-gamut: p3) {
    .hero {
        background: linear-gradient(135deg, oklch(69% 0.27 240), oklch(69% 0.27 300));
    }
}

/* Further enhance for Rec. 2020 displays */
@media (color-gamut: rec2020) {
    .hero {
        background: linear-gradient(135deg, oklch(69% 0.27 30), oklch(69% 0.27 120), oklch(69% 0.27 240));
    }
}

/* Handle indexed color devices */
@media (max-color-index: 8) {
    .image {
        /* Reduce color complexity */
    }
}

❌ Don’t Do This:

/* Don't use wide-gamut colors without fallbacks */
.hero {
    background: oklch(69% 0.27 240); /* May look wrong on sRGB */
}

/* Don't assume all devices support wide gamuts */
@media (color-gamut: p3) {
    /* This is fine, but always provide sRGB fallback */
}

/* Don't use color-index for modern devices */
@media (color-index: 256) {
    /* Most modern devices use direct color, not indexed */
}

Pro Tip: color-gamut is your key to vibrant, modern web design. Always provide an sRGB fallback first, then enhance for P3 and Rec. 2020 displays using modern color functions like oklch() or color(display-p3 ...). color-index is mostly relevant for legacy or specialized devices — modern devices use direct color rather than indexed color. Remember: wider gamut is about quality, not quantity — use it to make your colors more vivid and lifelike, not to change your design completely!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!