DisplayPixels

Monitor Color Spaces Explained: sRGB, Adobe RGB, and DCI-P3

A clear guide to the color spaces that define what your monitor can display and why it matters for your work.

Last updated: February 2026

What Is a Color Space?

A color space is a specific, mathematically defined organization of colors. It answers a deceptively simple question: when a digital file says “show red at value 200,” exactly which red should appear on screen? Without a color space to anchor that number to a real-world color, the value 200 is meaningless. Different devices could interpret it as anything from a muted brick red to a vivid scarlet.

Every color space is defined by several components working together. The primary colors (also called primaries) establish the most saturated red, green, and blue the space can represent. The white point defines what “neutral white” looks like, typically D65, a standard that approximates average daylight at 6500K. The transfer function (often loosely called “gamma”) describes the mathematical relationship between the stored numerical value and the actual light output, controlling how brightness is encoded. Together, these components create a complete, unambiguous mapping from numbers in a file to colors on a screen.

The term “color gamut” refers specifically to the range of colors a color space can represent, typically visualized as a triangle on a chromaticity diagram. A wider gamut means the space can describe more saturated, vivid colors. But gamut alone does not define a color space; two spaces could have identical gamuts but different transfer functions, producing different visual results from the same input values. You can test how your display handles color using the DisplayPixels Color and HDR tool.

The CIE Chromaticity Diagram

In 1931, the Commission Internationale de l'Eclairage (CIE) created a mathematical model of human color vision based on experiments with human observers. The resulting CIE 1931 chromaticity diagram is a horseshoe-shaped plot that represents every color visible to the average human eye. The curved edge of the horseshoe corresponds to pure spectral colors (individual wavelengths of light), and the straight bottom edge connects the extreme red and violet ends of the visible spectrum through non-spectral purples.

On this diagram, any color space can be plotted as a triangle (for RGB-based spaces) connecting its three primary colors. The area inside the triangle represents all the colors that space can reproduce by mixing its primaries. This makes comparison intuitive: a larger triangle means a wider gamut. The entire horseshoe represents the full extent of human vision, and no current display technology can reproduce all of it. Even the widest gamut spaces in use today cover only a portion of what the eye can perceive.

It is worth noting that the CIE 1931 diagram has known perceptual non-uniformities: equal distances on the diagram do not represent equally perceptible color differences. The CIE 1976 (u',v') diagram addresses this to some degree, and gamut area percentages differ depending on which diagram is used. When comparing gamut coverage figures from different sources, make sure they reference the same diagram, or the numbers will not be directly comparable.

sRGB: The Universal Standard

sRGB (standard Red Green Blue) was created in 1996 through a collaboration between HP and Microsoft. Its purpose was to establish a single, common color space that would produce consistent color across monitors, printers, scanners, and digital cameras without requiring individual calibration or color management by the end user. It achieved this goal so thoroughly that sRGB became the implicit color space of the internet, digital photography, and consumer electronics for over two decades.

The sRGB primaries were chosen to match the phosphor characteristics of typical CRT monitors of the mid-1990s, which means sRGB represents a relatively modest portion of visible color. It covers approximately 35% of the CIE 1931 diagram and about 68% of the CIE 1976 diagram. In practical terms, sRGB cannot reproduce highly saturated cyans, deep greens, or certain vivid oranges and reds that the human eye can perceive and that other color spaces can represent.

Despite its limitations, sRGB remains critically important. The vast majority of web images, social media photos, and consumer-oriented digital content is encoded in sRGB. Web browsers default to interpreting untagged images as sRGB. If you are creating content for the web, ensuring it looks correct in sRGB is essential, because that is how most viewers will see it. A monitor that covers 100% of sRGB with high accuracy (low Delta E) is more useful for web-targeted work than one that covers a wider gamut but with poor accuracy.

sRGB Transfer Function

The sRGB transfer function is often approximated as “gamma 2.2,” but it is actually a piecewise function: a linear segment near black transitioning to a power curve with an effective gamma of about 2.4 in the mid-to-bright range. This means sRGB encoding allocates more numerical values to darker tones (where the human eye is most sensitive to differences) and fewer to bright tones. This perceptual encoding is efficient because it preserves visible detail in shadows without wasting data on imperceptible brightness differences in highlights.

Adobe RGB: Designed for Print

Adobe RGB (1998) was developed by Adobe Systems specifically to encompass the range of colors achievable by CMYK color printers. The motivation was practical: photographers and designers working in print were frustrated that sRGB could not represent many of the colors they could see in their printed output. The greens of a forest, the deep cyan of a clear sky, and the vivid teal of a tropical ocean all include colors that sRGB simply cannot encode.

Adobe RGB covers approximately 50% of the CIE 1931 diagram, making it substantially wider than sRGB, primarily in the green-to-cyan region. The red primary is identical to sRGB's, but the green primary is shifted toward a more saturated, deeper green, and the blue primary is slightly different as well. This extension into green-cyan means that photographers can capture, edit, and proof images that use the full range of printable colors.

The trade-off is workflow complexity. Adobe RGB images must be properly tagged with an ICC profile and viewed in color-managed applications; otherwise, they will look desaturated or inaccurately colored. Web browsers historically had inconsistent Adobe RGB support (some would display it correctly, others would ignore the profile and interpret the values as sRGB, producing muted colors). For web delivery, images should always be converted to sRGB. Adobe RGB is a working space for the production pipeline, not a delivery space for the end viewer, unless that end viewer has a calibrated wide-gamut display and a color-managed application.

If your workflow involves preparing images for commercial offset printing, fine art giclée prints, or high-quality photo books, editing in Adobe RGB on a monitor that covers 99%+ of the space is genuinely important. It enables accurate soft-proofing, where you simulate on screen how the image will look when printed, including out-of-gamut warnings that flag colors the printer cannot reproduce. Without an Adobe RGB display, you are making assumptions about print colors rather than seeing them.

DCI-P3: Cinema to Consumer

DCI-P3 (Digital Cinema Initiatives – Protocol 3) was established by the Digital Cinema Initiatives consortium as the color space for digital cinema projection. It covers approximately 45% of the CIE 1931 diagram, placing it between sRGB and Adobe RGB in total area but with a different shape. Compared to sRGB, DCI-P3 extends significantly into deeper reds and oranges but offers less extension into the green-cyan region than Adobe RGB.

The consumer impact of DCI-P3 has been enormous, largely because Apple adopted it as the standard color space for its entire ecosystem starting with the iMac 5K in 2015. Every Mac display, iPhone, iPad, and Apple TV since then has targeted DCI-P3 coverage. This made P3 the de facto wide-gamut standard for consumer devices, far outpacing Adobe RGB adoption outside of professional photography.

For content creators, P3 now matters because it represents the colors that hundreds of millions of Apple device users and high-end Android users can actually see. CSS now supports the color(display-p3 r g b) function, allowing web designers to specify colors outside the sRGB gamut for devices that support them, with automatic fallback to the nearest sRGB color on other displays. This means a web designer with a P3-capable monitor can create richer, more vivid designs for compatible screens while still serving acceptable results everywhere else.

The original DCI-P3 specification uses a D63 white point (slightly greenish compared to D65) and a pure gamma 2.6 transfer function, reflecting its cinema projection origins. The Display P3 variant used by Apple and in CSS adopts the D65 white point and sRGB transfer function, making it more compatible with existing content and workflows. When monitor specifications refer to “P3 coverage,” they typically mean Display P3 rather than the theatrical DCI-P3.

Rec. 2020: The HDR Frontier

Rec. 2020 (formally ITU-R Recommendation BT.2020) defines the color space for ultra-high-definition television and HDR content. Its gamut is vast, covering approximately 75% of the CIE 1931 diagram with primaries that correspond to pure spectral wavelengths of light (630 nm red, 532 nm green, 467 nm blue). No current display technology can reproduce the full Rec. 2020 gamut; even the most advanced OLED and quantum-dot displays cover only 70–80% of it.

Rec. 2020 matters because it is the container gamut for HDR formats like HDR10, HDR10+, and Dolby Vision. When a movie or game is mastered in HDR, the color data is encoded in the Rec. 2020 space even though the target displays cannot reproduce all of it. The display's tone mapping engine handles the conversion from Rec. 2020 to whatever the panel can actually show. Think of Rec. 2020 as a future-proof container: as display technology improves, the same content will look progressively better without needing to be re-mastered.

For most content creators and consumers today, Rec. 2020 is relevant primarily as context for understanding HDR specifications. If your monitor advertises “90% Rec. 2020 coverage,” that is an impressively wide gamut. If it says “DCI-P3 coverage of 95%,” that corresponds to roughly 70% of Rec. 2020, which is solid performance for current generation hardware.

Gamut Mapping: What Happens to Out-of-Gamut Colors

When an image contains colors that fall outside your monitor's gamut, the color management system must decide how to handle them. This process is called gamut mapping, and there are four standard rendering intents defined by the ICC (International Color Consortium):

In practice, perceptual and relative colorimetric are the two intents that matter for most photography and design work. Your editing application (Photoshop, Lightroom, Capture One) lets you choose the rendering intent in its color management settings and in its soft-proof configuration.

Choosing the Right Color Space for Your Work

The right color space depends on your output, not on what sounds most impressive in a spec sheet. Here is a practical framework:

Web Designers and Social Media Creators

Prioritize sRGB accuracy (100% coverage, dE < 2). If you want to use CSS display-p3 colors for enhanced visuals on Apple and other P3 devices, add P3 coverage (90%+) to your requirements. See our P3 gamut checker to verify your display's P3 capabilities.

Photographers (Web Output)

An accurate sRGB display is the primary need. Wide gamut is a bonus for evaluating what certain colors would look like on P3 devices, but your deliverables will be sRGB for maximum compatibility. Make sure your export workflow converts to sRGB and embeds the profile.

Photographers (Print Output)

Adobe RGB coverage of 99%+ is important for accurate soft-proofing. Look for monitors with hardware calibration support and gamut emulation modes. See our monitor for photo editing guide for detailed recommendations.

Video Editors and Colorists

For broadcast work targeting Rec. 709, a good sRGB monitor suffices since Rec. 709 shares sRGB's primaries. For cinema and streaming content targeting DCI-P3, a monitor with 95%+ P3 coverage is essential. For HDR grading, you need a reference monitor with high brightness (1000+ nits), wide color volume, and accurate Rec. 2020 to P3 tone mapping.

General Users

A monitor with good sRGB coverage (95%+) and reasonable accuracy is perfectly adequate. Wide gamut support is increasingly common even on mid-range displays and adds value as more content (especially on streaming platforms) is mastered in P3 or wider.

Browser Color Management

Whether colors display correctly on a web page depends on the browser's color management behavior. Historically, this was inconsistent, but modern browsers have converged toward better support.

Safari on macOS has the most complete color management, supporting tagged images in any color space and converting them correctly for the display's profile. It also supports the CSS color(display-p3 ...) function for in-page colors. Chrome and Edge use the display's ICC profile for color-managed rendering of tagged images and support P3 CSS colors. Firefox supports color management for images (enabled by default) and P3 CSS colors.

The important nuance is that untagged images (those without an embedded ICC profile) are treated as sRGB by all browsers. On a wide-gamut display without proper color management, this means untagged sRGB images may appear oversaturated because the browser sends the raw sRGB values to the display, which interprets them in its native (wider) gamut. This is why gamut emulation modes on monitors matter: they clamp the display's output to sRGB when needed, ensuring that even unmanaged content looks correct.

For web developers, the practical advice is to embed ICC profiles in your images (most editing tools do this by default when saving as JPEG or PNG), use the CSS color(display-p3 ...) function with an sRGB fallback for colors you want to appear more vivid on capable displays, and test your work on both sRGB and P3 screens. The DisplayPixels color tester can help you verify how your browser handles color on your specific display.

The Practical Takeaway

Color spaces are not marketing jargon; they are the foundational system that makes consistent color possible across billions of devices. The key insight is that a wider gamut is not inherently better. What matters is that your monitor accurately covers the color space your work targets, and that you understand which space that is. A perfectly calibrated sRGB display will serve a web designer better than a poorly calibrated wide-gamut panel. But for print professionals, video colorists, and creators targeting Apple's ecosystem, the specific wider gamuts (Adobe RGB, P3) are genuine professional tools, not luxuries. For calibration guidance, our calibration guide walks through the process step by step.

Frequently Asked Questions

What is the difference between a color space and a color gamut?

A color gamut is the range of colors that a device can reproduce, visualized as an area on a chromaticity diagram. A color space is a more complete specification that includes the gamut (defined by its primary colors), a white point, a transfer function (gamma curve), and a mathematical model for mapping numerical values to specific colors. sRGB, for example, defines not just which reds, greens, and blues are used, but exactly how the numerical value 128 translates to a specific luminance level.

Is DCI-P3 better than sRGB?

DCI-P3 has a wider gamut than sRGB, covering about 25% more colors, particularly in red and green tones. However, “better” depends on context. For web content, sRGB is the standard and using P3 without proper color management can cause colors to display incorrectly on sRGB screens. DCI-P3 is better for content destined for modern Apple devices, HDR displays, and cinema. The best monitors support both and let you switch between them.

Why do colors look different on my phone versus my monitor?

This happens because your phone and monitor likely have different color gamuts, different calibration accuracy, and different color management behavior. Most modern smartphones cover close to 100% of DCI-P3, while many desktop monitors only cover sRGB. Additionally, phones often boost saturation in their default display modes. Screen brightness, ambient light, and whether the viewing application is color-managed all contribute to the perceived difference.

Do I need a wide-gamut monitor for web design?

For standard web design targeting the broadest audience, an accurate sRGB monitor is more important than a wide-gamut one, because sRGB is still the default color space for the web. However, CSS now supports the display-p3 color space, and Apple devices natively display P3 content. If you want to use these extended colors in your web designs, a P3-capable monitor lets you see what you are creating. The key is having accurate gamut emulation so you can preview both sRGB and P3 rendering.

What happens to out-of-gamut colors?

When an image contains colors that fall outside a display's gamut, those colors must be mapped to the nearest reproducible color through a process called gamut mapping. The specific method depends on the rendering intent: perceptual intent compresses the entire color range to fit, preserving relationships between colors. Relative colorimetric intent clips out-of-gamut colors to the nearest boundary color. Perceptual intent is generally preferred for photographs, while relative colorimetric is common for proofing.