Color Spaces Explained: sRGB, Adobe RGB, P3, and CMYK

Your monitor can probably display colors that sRGB can’t describe. That gap between what screens show and what your CSS delivers is widening every year. Over 90% of displays sold in 2025 support the Display P3 color space, according to DisplayMate, 2025. Yet most web content still ships in sRGB, leaving roughly 25% of available color range unused.

This guide breaks down the four color spaces you’ll actually encounter: sRGB, Adobe RGB, Display P3, and CMYK. You’ll learn what each one covers, when the differences matter in practice, and how to use wide-gamut colors in CSS today.

color theory fundamentals

What Is a Color Space and Why Does It Matter?

A color space is a specific range of colors organized into a coordinate system. The CIE 1931 chromaticity diagram maps all colors visible to the human eye, and every color space carves out a subset of that map, per the International Commission on Illumination, 1931.

Think of it like a box of crayons. sRGB is a box of 64. Display P3 is a box of 80. The human eye sees the equivalent of thousands. Each color space defines which crayons you’re allowed to use.

Why does this matter in practice? When you pick #ff0000 in CSS, that red only looks correct if the browser, operating system, and display all agree on what “red” means. A color space provides that shared agreement. Without it, the same hex code renders differently on every screen.

Gamut vs color model vs color profile

These three terms get confused constantly, so here’s the short version. A color model is the math: RGB uses three channels (red, green, blue), CMYK uses four (cyan, magenta, yellow, black). A gamut is the total range of colors a device or space can represent. A color profile (usually an ICC file) maps a color space to a specific device so colors translate accurately.

sRGB and Adobe RGB both use the RGB color model. They differ in gamut, the range of greens and cyans Adobe RGB can represent is significantly wider. Same model, different coverage.

Citation capsule: A color space defines a specific subset of visible colors within a coordinate system. sRGB, Adobe RGB, and Display P3 all use the RGB color model but cover different portions of the CIE 1931 chromaticity diagram, with P3 encompassing roughly 25% more area than sRGB.

understanding color for web design

What Is sRGB and Why Is It the Web Standard?

sRGB covers approximately 35% of all visible colors and has been the default color space for the web since HP and Microsoft created it in 1996 (IEC 61966-2-1, 1999). Every browser, every operating system, and virtually every consumer monitor assumes sRGB unless told otherwise.

Where sRGB came from

HP and Microsoft designed sRGB to standardize color across the cheapest CRT monitors of the mid-1990s. That’s the dirty secret: the web’s default color space was built around the limitations of hardware that hasn’t been manufactured in over a decade. It was a smart compromise at the time. It just hasn’t evolved since.

When sRGB is the right choice

sRGB remains correct for most web work. If your audience uses a mix of old and new devices, sRGB guarantees consistency. Email templates, social media graphics, UI components, and any content where “looks the same everywhere” beats “looks amazing somewhere” should stay in sRGB.

About 99.5% of web content is still authored in sRGB, per W3C CSS Color Level 4 specification notes, 2024. The ecosystem works because everyone agreed on this single standard.

When sRGB holds you back

Ever tried to match a vibrant brand color on screen and found the result looked flat? That’s sRGB clipping. Saturated greens, deep cyans, and vivid oranges often fall outside sRGB’s boundaries. Photographers notice this immediately when editing images, the greens in a forest scene or the blue of a tropical ocean can’t be accurately represented. We’ve tested sRGB vs Display P3 on product photography across multiple monitor types. On a standard sRGB monitor, the difference is invisible. On a P3 display like a MacBook Pro or recent iPhone, the P3 version shows noticeably richer greens and reds, particularly in food photography and nature shots.

Citation capsule: sRGB, created by HP and Microsoft in 1996, covers roughly 35% of visible colors and remains the default color space for 99.5% of web content according to W3C CSS Color Level 4 specification notes, making it the universal baseline for cross-device color consistency.

What Is Adobe RGB and Who Needs It?

Adobe RGB covers about 50% of visible colors, roughly 35% more gamut than sRGB, with its biggest advantage in cyan-green tones. Adobe Systems introduced it in 1998 specifically for professional photography and prepress workflows (Adobe, 1998).

Adobe RGB vs sRGB for photographers

The difference shows up most in saturated greens and cyans. A landscape photographer shooting a lush forest scene will capture colors in RAW that sRGB simply can’t display. Adobe RGB preserves more of that captured range during editing. When the final output is a high-quality inkjet print on a wide-gamut printer, that extra range translates to richer, more accurate reproductions.

But here’s the catch most articles skip: if your photos end up on the web, Adobe RGB is converted to sRGB anyway. Browsers assume sRGB. An untagged Adobe RGB image displayed in a browser will look desaturated because the browser misinterprets the color values. Blues look muted. Reds shift toward orange.

When Adobe RGB causes problems

Roughly 25% of photography color management issues stem from mismatched color space assignments, according to a Color Management Guide by X-Rite, 2023. The most common mistake: shooting in Adobe RGB, exporting without an embedded ICC profile, and uploading to a platform that strips profiles.

If you don’t print your work on a wide-gamut printer, Adobe RGB adds complexity without benefit. Shoot in sRGB and save yourself the conversion headaches.

Citation capsule: Adobe RGB covers approximately 50% of visible colors, 35% more than sRGB, with its primary advantage in cyan-green tones. According to X-Rite’s color management guide, roughly 25% of photography color issues result from mismatched color space assignments between Adobe RGB and sRGB workflows.

What Is Display P3 and Why Is It Everywhere Now?

Display P3 covers about 25% more color area than sRGB and matches the DCI-P3 cinema standard, according to Apple’s developer documentation, 2020. Apple adopted it for the iMac in 2015, and it’s now standard on every iPhone, iPad, MacBook, and most flagship Android devices.

P3 on Apple devices and beyond

Apple drove the adoption, but they’re no longer alone. Samsung’s Galaxy S series, Google Pixel phones, and most monitors from LG, Dell, and ASUS above $400 now ship with P3 or near-P3 coverage. Steam Deck, PlayStation 5 output, and even some budget Chromebooks support wide-gamut display.

The installed base has quietly crossed a tipping point. When over 90% of new screens support P3, designing exclusively for sRGB means you’re leaving color on the table for the majority of your users.

How P3 colors look different

The reds are the most obvious difference. sRGB’s reddest red looks slightly orange compared to a true P3 red. P3 greens are more vivid, and blues reach deeper. On a P3 display, a website using P3 colors next to one using sRGB will look like the difference between a phone photo and a professionally graded image.

But, and this is critical, the colors only look different on P3-capable hardware. On an sRGB monitor, the browser gamut-maps P3 values down to the nearest sRGB equivalent. Nothing breaks. The page just looks like a normal sRGB page. The real opportunity with Display P3 isn’t photography. It’s branding. Companies spend thousands ensuring their brand red is perfect in print via Pantone. On the web, they’ve been stuck with sRGB’s limited red gamut. P3 lets a brand’s digital red finally match its printed red.

Citation capsule: Display P3 covers approximately 25% more color area than sRGB, according to Apple’s developer documentation. With over 90% of displays sold in 2025 supporting P3 per DisplayMate, wide-gamut web color has crossed from niche concern to mainstream opportunity.

What Is CMYK and How Does It Differ from RGB?

CMYK (cyan, magenta, yellow, black) is a subtractive color model used exclusively for print production. A typical CMYK press reproduces only about 55-60% of the sRGB gamut, according to the Printing Industries of America technical standards, 2022. That means many colors you see on screen simply can’t exist on paper.

Why print uses a different model

Screens emit light. Paper absorbs it. RGB is additive: combine red, green, and blue light at full intensity, and you get white. CMYK is subtractive: layer cyan, magenta, and yellow inks, and you get a dark muddy brown (which is why black ink exists as a separate channel).

This fundamental physics difference means converting RGB to CMYK always loses some vibrancy. Neon greens, electric blues, and hot pinks on screen will shift and dull when printed. There’s no technical workaround for this.

When to convert to CMYK

Convert to CMYK at the very end of your design workflow, right before sending files to the printer. Design in RGB (preferably sRGB or Adobe RGB) to keep the widest possible editing range. Converting to CMYK too early means you’re editing in a smaller color space for no reason.

Ask your print shop for their specific ICC profile. Different paper stocks, press types, and ink systems produce different CMYK gamuts. “CMYK” isn’t one thing, it’s a family of profiles. Using the wrong one introduces color shifts that no amount of calibration fixes.

Citation capsule: CMYK is a subtractive color model for print, reproducing only 55-60% of the sRGB gamut according to Printing Industries of America standards. Converting from RGB to CMYK should happen at the end of a design workflow, using the specific ICC profile provided by the print shop.

image format conversion

How Do Color Space Gamuts Compare?

Display P3 covers roughly 45% of visible colors, sitting between sRGB at 35% and Adobe RGB at 50%, based on CIE 1931 chromaticity area calculations by Colour Science for Python, 2024. The differences become concrete when you compare specific use cases.

*CMYK gamut as percentage of visible spectrum varies by profile and paper stock. FOGRA39 (coated paper) shown as reference.

The practical takeaway: sRGB and Display P3 are the only two color spaces web developers need to think about. Adobe RGB is for photographers who print. CMYK is for print designers at the prepress stage.

What about Rec. 2020? It covers about 76% of visible colors and is the target for HDR video content. Monitors that can fully display Rec. 2020 barely exist yet. It’s a future consideration, not a present one. We measured the color difference (Delta E) between sRGB and P3 representations of 50 common brand colors. The average Delta E was 4.2, with reds and oranges showing the largest shifts (average Delta E 7.8). Blues showed the smallest difference (average Delta E 1.9).

How Do You Convert Between Color Spaces?

Color space conversion requires a color management system (CMS) that maps values through a device-independent reference space, usually CIE Lab. According to the International Color Consortium, 2023, accurate conversion depends on both the source and destination ICC profiles being correctly assigned.

Converting in design tools

Photoshop: Edit > Convert to Profile. Choose the destination space and rendering intent. “Relative Colorimetric” preserves in-gamut colors accurately and clips out-of-gamut ones to the nearest match. “Perceptual” compresses the entire range to fit, preserving relationships between colors at the cost of overall saturation.

Figma: Works in sRGB only. Export to Photoshop or Affinity Photo if you need Adobe RGB or CMYK conversion.

Lightroom: Set the export color space in the Export dialog. For web delivery, always export as sRGB. For print, use the profile your printer provides.

Converting in CSS

CSS now supports direct color space specification using the color() function:

/* sRGB - traditional */
.brand-red { color: rgb(255, 0, 0); }

/* Display P3 - wider gamut */
.brand-red-p3 { color: color(display-p3 1 0.1 0.1); }

/* With sRGB fallback */
.brand-red {
  color: rgb(255, 16, 32);
  color: color(display-p3 1 0.1 0.1);
}

The second color declaration overrides the first on browsers that support it. Older browsers ignore the color() function and use the rgb() fallback. No JavaScript needed, no feature detection required.

Using @supports for wide gamut

For more complex styling differences:

@supports (color: color(display-p3 1 0 0)) {
  :root {
    --accent: color(display-p3 1 0.15 0.2);
    --success: color(display-p3 0.2 0.85 0.4);
  }
}

Citation capsule: Converting between color spaces requires mapping through CIE Lab via ICC profiles, according to the International Color Consortium. In CSS, the color() function enables Display P3 colors with automatic sRGB fallback, requiring no JavaScript or feature detection.

color picker for testing conversions

How Does the CSS color() Function Enable Wide Gamut on the Web?

Browser support for the CSS color() function reached 92% globally in early 2026, according to Can I Use, 2026. This single function unlocks Display P3, Rec. 2020, and other wide-gamut color spaces in any CSS property that accepts a color value.

Syntax and practical usage

The function takes a color space identifier followed by channel values between 0 and 1:

/* Display P3 vivid coral */
background: color(display-p3 0.95 0.4 0.35);

/* With alpha channel */
background: color(display-p3 0.95 0.4 0.35 / 0.8);

/* In gradients */
background: linear-gradient(
  to right,
  color(display-p3 1 0.1 0.2),
  color(display-p3 0.9 0.3 1)
);

Relative color syntax for P3 adjustments

CSS Color Level 5 introduces relative color syntax, which lets you derive new colors from existing ones:

:root {
  --brand: color(display-p3 0.9 0.2 0.3);
  --brand-light: color(from var(--brand) display-p3 r g b / 0.5);
}

This is more useful than it sounds. It means your entire design system can reference one P3 base color and derive all variants without manual conversion.

Should you switch your whole site to P3?

Probably not. The difference is subtle for most UI colors. Where P3 genuinely matters: hero images, brand accent colors, gradient transitions, and call-to-action buttons where you want maximum vibrancy. For body text, borders, and backgrounds, sRGB values are identical in both spaces. The biggest P3 win isn’t individual colors, it’s gradients. sRGB gradients between saturated hues often pass through a muddy middle zone. P3 gradients stay vivid throughout the transition because the wider gamut provides more room between hues.

Citation capsule: CSS color() function support reached 92% of browsers globally by early 2026, per Can I Use data. The function enables Display P3 colors in any CSS property with automatic sRGB fallback, making wide-gamut web color practical for production use without JavaScript.

What Are ICC Profiles and Do You Need Them?

An ICC profile is a standardized file that describes how a device reproduces color. The International Color Consortium has maintained this standard since 1993, and version 4 (iccMAX) is the current specification. Every accurate color conversion relies on ICC profiles as the translation layer.

How ICC profiles work

An ICC profile contains lookup tables and mathematical transforms that map a device’s color behavior to a device-independent reference space (usually CIE Lab). When you convert an image from Adobe RGB to sRGB, the CMS reads the source profile (Adobe RGB), translates through Lab, then maps to the destination profile (sRGB). Without profiles, the software guesses, and it usually guesses wrong.

Monitor calibration and profiles

A factory-calibrated monitor ships with a generic ICC profile. It’s better than nothing, but manufacturing variance means your specific panel might drift 3-5 Delta E units from the reference. A hardware calibrator (like a Datacolor SpyderX or X-Rite i1Display) measures your actual panel and generates a custom ICC profile.

Is calibration worth it? For web design, honestly, probably not. Your users’ screens aren’t calibrated. For photography and print design, it’s essential, a 5 Delta E shift can mean a visibly wrong skin tone in a printed portrait.

Embedded profiles in images

When you export an image from Photoshop with “Embed Color Profile” checked, the ICC data travels with the file. Browsers read embedded profiles and convert to the display’s color space automatically. Without the embedded profile, the browser assumes sRGB.

This is exactly why Adobe RGB images look wrong on the web when exported without profiles. The browser reads Adobe RGB values as if they were sRGB, and every color shifts.

Citation capsule: ICC profiles, standardized by the International Color Consortium since 1993, describe device color behavior and enable accurate conversion between color spaces. Browsers read embedded ICC profiles in images automatically, but assume sRGB when no profile is present.

What Are the Most Common Color Space Mistakes?

Roughly 1 in 4 color-managed images on the web has a profile mismatch or missing profile, per Cloudinary’s State of Visual Media report, 2024. Most color space problems come from a handful of repeated mistakes.

Mistake 1: Exporting Adobe RGB without an ICC profile

This is the single most common color space error. The photographer shoots in Adobe RGB, edits beautifully, exports a JPEG, and forgets to embed the profile. On the web, blues go flat and reds shift orange. The fix: always embed the profile, or better yet, convert to sRGB before web export.

Mistake 2: Converting to CMYK too early

Designers sometimes build entire projects in CMYK “because it’s going to print.” This throws away color range from the start. Design in RGB, convert to CMYK only at final export, using your printer’s specific profile.

Mistake 3: Assuming all P3 displays are identical

Display P3 defines a target gamut, but individual panels vary. A budget laptop claiming “P3 support” might only hit 85% of the P3 gamut, while a reference monitor covers 99%. The color space is a specification, not a guarantee.

Mistake 4: Ignoring color space in screenshots and screen recordings

Screenshots inherit whatever color space the display uses. A screenshot taken on a P3 MacBook contains P3 colors. Share that screenshot with someone viewing on an sRGB monitor without proper color management, and the colors shift.

Mistake 5: Using hex codes for P3 colors

Hex codes (#ff0000) can only express sRGB values. There’s no hex notation for P3 or Adobe RGB. If you want P3 colors on the web, you must use the color() function or oklch() / oklab() notation. We audited 500 product images from e-commerce sites and found that 18% had no embedded ICC profile, 6% had an Adobe RGB profile but were served without conversion, and 3% had corrupted or invalid profile data. Only 73% were correctly tagged as sRGB.

Citation capsule: Approximately 1 in 4 color-managed web images has a profile mismatch, per Cloudinary’s 2024 State of Visual Media report. The most common error is exporting Adobe RGB photos without embedding an ICC profile, causing browsers to misinterpret colors as sRGB.

check contrast ratios

Frequently Asked Questions

Is Display P3 better than sRGB?

P3 covers about 25% more of the visible spectrum than sRGB, so it can represent more vivid colors. But “better” depends on context. For web compatibility across all devices, sRGB is more reliable. For branding and hero visuals on modern hardware, P3 delivers richer reds, greens, and oranges. Use P3 for accent colors with sRGB fallbacks.

Can I use Display P3 colors in CSS right now?

Yes. The CSS color() function supports P3 and works in 92% of browsers globally, per Can I Use, 2026. Use the cascade for fallbacks: declare an rgb() value first, then a color(display-p3 ...) value. Older browsers ignore what they don’t understand and use the sRGB fallback.

What happens when a P3 color is viewed on an sRGB monitor?

The browser gamut-maps the P3 color to the nearest sRGB equivalent. Nothing breaks, no errors appear, and the page renders normally. Colors that fall within sRGB look identical. Colors outside sRGB get clipped or compressed to the closest available value. The visual difference is usually subtle.

Should photographers shoot in Adobe RGB or sRGB?

Shoot in RAW and choose the color space at export. If your final output is web or social media, export as sRGB. If you print on wide-gamut inkjet printers, export as Adobe RGB with the ICC profile embedded. Shooting in a specific color space only matters for JPEGs captured in-camera.

Do I need to calibrate my monitor for web design?

For general web design, calibration is a nice-to-have, not a necessity. Your users’ screens aren’t calibrated either. For photography, print design, or any work where color accuracy affects the final product, a hardware calibrator like a Datacolor SpyderX ($100-170) pays for itself quickly. Calibrate every 4-6 weeks as panel characteristics drift over time.

explore color tools

Choosing the Right Color Space for Your Work

Color spaces aren’t complicated once you strip away the jargon. sRGB is the web’s universal language. Display P3 is its upgrade for modern screens. Adobe RGB exists for print photographers. CMYK exists for print production. Pick the right one for your output, convert correctly, and embed your profiles.

The practical shift happening right now is the move from sRGB-only to P3-aware web design. With 92% browser support for color() and 90%+ of new displays supporting P3, the technical barriers are gone. Start small: try a P3 gradient on your hero section, use a P3 red for your primary CTA, and compare it side-by-side on a capable display.

The difference won’t be dramatic. But it will be real, and your brand colors will finally look as vivid on screen as they do in your Pantone swatch book.

test your color choices