CSS color Media Feature

Definition and Usage

The color media feature tests how many bits per color component (red, green, blue) the output device supports. Use it inside @media to enhance styles on color screens and keep simple fallbacks for monochrome output.

It is a range feature: you can use (color), (color: <integer>), (min-color: <integer>), and (max-color: <integer>). A value of 0 means the device is not a color device. This is not the same as the color property.

CSS Syntax

Example: @media (min-color: 8) { … }. The integer is bits per component.

Feature Values

How to Use color

Write safe base styles first, then layer color enhancements with @media.

1. Style for the simplest case (readable without relying on rich color).
2. Add @media (color) for color-capable screens.
3. Optionally raise the bar with (min-color: 8) for richer accents or gradients.
4. For grayscale-focused fallbacks, also learn monochrome; for gamut width, use color-gamut.

Live Preview

This page reads your browser’s matchMedia results for common color queries. The sample box also uses real @media rules.

CSS Examples

Each snippet focuses on the color media feature. On a typical color screen, the color rules will apply. Use Try It Yourself for a live editor.

<style>
  p {
    color: black;
  }

  @media (color) {
    p {
      color: crimson;
    }
  }
</style>

<p>This text turns crimson on color devices.</p>

<style>
  p {
    color: #334155;
  }

  @media (min-color: 8) {
    p {
      color: #16a34a;
    }
  }
</style>

<p>Green on typical true-color displays.</p>

<style>
  p {
    color: #0f172a;
    background: #f8fafc;
    padding: 8px;
  }

  @media not (color) {
    p {
      color: #000;
      background: #fff;
      border: 2px solid #000;
    }
  }
</style>

<p>High-contrast fallback for non-color devices.</p>

Key Takeaways