The monochrome media feature reports the number of bits per pixel in the output device’s monochrome frame buffer.
If the device is not monochrome, the value is 0 (typical color screens). A positive integer means a grayscale display. It is a range feature, so you can also use min-monochrome and max-monochrome. Pair it with color when you need to distinguish color vs grayscale capability.
Not deprecated. Standard-track Media Queries Level 4 feature. Real monochrome hardware is rare — treat positive matches as progressive enhancement.
@media (monochrome: <integer>) { … }Also: @media (monochrome) { … } · @media (min-monochrome: 2) { … } · @media (max-monochrome: 8) { … }
monochromeStyle for color by default, then simplify when a monochrome buffer is reported.
@media (monochrome) for grayscale-friendly contrast.(monochrome: 0) when you need an explicit color-device branch.min-monochrome / max-monochrome for bit depth.| Piece | Required? | Role |
|---|---|---|
@media | Yes | Wraps the media feature |
| Integer / boolean | Yes | Bits per pixel, or truthy when > 0 |
| Default styles | Yes | Most devices are color (0) |
min- / max- | Optional | Range checks on bit depth |
What matchMedia reports on this device. Color screens usually match (monochrome: 0) only.
Each snippet focuses on monochrome. On most color devices only the : 0 branch matches. Use Try It Yourself for a live editor.
Boolean form: match when bits per pixel > 0.
p {
display: none;
}
@media (monochrome) {
p {
display: block;
color: #333;
}
}@media (monochrome) means value > 0.display: none.Target typical color screens with monochrome: 0.
p {
color: #64748b;
}
@media (monochrome: 0) {
p {
color: #dc2626;
}
}0 bits in the mono buffer.Require at least 2 bits per pixel with min-monochrome.
p {
border: 1px solid #94a3b8;
}
@media (min-monochrome: 2) {
p {
border-width: 3px;
border-color: #000;
}
}min-monochrome: 2 needs at least 2 bits/pixel.max-monochrome when you need an upper bound.If nothing looks “grayscale,” you are probably on a color screen.
0Phones, laptops, and most monitors match (monochrome: 0), not the boolean (monochrome).
color featurecolor measures color channel depth. monochrome measures grayscale buffer depth. Check both when classifying a device.
(monochrome) means > 0Like other media features, the bare keyword is true when the value is non-zero.
Exact (monochrome: 8) is brittle. Prefer min-monochrome / max-monochrome for ranges.
True mono hardware is uncommon. Keep contrast and hierarchy clear without the query.
monochrome is a browser media feature. Node.js, Deno, and Bun do not evaluate it.
Widely supported in modern browsers (Chrome, Firefox, Safari, Edge 79+). Matching a positive bit depth still depends on real monochrome hardware.
Bottom line: Safe to teach and use as progressive enhancement. Expect (monochrome: 0) on ordinary color devices. It is not a runtime API.
(monochrome) matches when the value is > 0.min-monochrome / max-monochrome for thresholds.One line: 0 means color; any positive value means grayscale bits — style accordingly, defaults first.
Learn the orientation media feature for portrait and landscape layouts.
8 people found this page helpful