Color spaces are the most misunderstood concept in digital imaging. Most people think of color as "red is red" — but RGB value (200, 50, 50) in sRGB and the same value (200, 50, 50) in Adobe RGB produce visibly different reds. The numbers are identical; the color spaces interpret them differently.
This matters because file formats interact with color spaces in specific ways. Some formats embed color profiles. Some assume sRGB. Some support HDR and wide gamut natively. Get this wrong and your vibrant sunset turns muddy, your brand colors shift between devices, or your print comes out nothing like your screen.
What Color Spaces Actually Are
A color space is a mapping from numbers to colors. It defines two things: the gamut (which colors can be represented) and the transfer function (how numeric values relate to brightness).
Gamut: The Color Boundary
Human vision can perceive roughly 10 million distinct colors. No color space represents all of them. Each color space carves out a triangular region on the CIE chromaticity diagram — three primary colors (the triangle vertices) and everything that can be mixed between them.
Gamut size comparison (approximate percentage of visible colors):
- sRGB: ~35% of visible colors
- Adobe RGB: ~50% of visible colors
- DCI-P3: ~45% of visible colors (wider in reds/greens, narrower in blues than Adobe RGB)
- ProPhoto RGB: ~90% of visible colors (includes non-visible colors too)
- Rec.2020: ~76% of visible colors (HDR TV/cinema standard)
Gamut is not a quality metric. A wider gamut isn't "better" — it's only useful if your content contains colors in the wider region AND your output device can display them. Using ProPhoto RGB for a web JPEG is counterproductive if the viewer's browser assumes sRGB.
Transfer Functions: Gamma and PQ
The transfer function (also called gamma or OETF/EOTF) defines how numeric values map to brightness. In sRGB, value 128 is not 50% brightness — it's about 21.4% brightness. The curve allocates more of the 0–255 range to darker tones (where human vision is most sensitive) and fewer values to bright tones.
sRGB gamma: Approximately gamma 2.2 with a linear segment near black. The standard for SDR (Standard Dynamic Range) content.
PQ (Perceptual Quantizer): The HDR transfer function used by HDR10 and Dolby Vision. Maps values across a 0–10,000 nit range (versus sRGB's ~80–200 nit range). Requires HDR-capable display and HDR-aware software to render correctly.
HLG (Hybrid Log-Gamma): HDR transfer function that's backward-compatible with SDR displays. Used in HDR broadcast. An HLG image looks reasonable on an SDR display without tone mapping.
sRGB: The Web Standard
sRGB (standard RGB) was defined by HP and Microsoft in 1996 to standardize color on consumer monitors. It became the de facto standard for everything on the internet.
sRGB Specifications
Primaries: Red (0.64, 0.33), Green (0.30, 0.60), Blue (0.15, 0.06) on the CIE diagram. White point: D65 (6504K daylight). Gamma: ~2.2 (precisely: linear below 0.0031308, then 1.055x^(1/2.4) - 0.055).
Where sRGB rules: Web browsers display untagged images as sRGB. CSS colors default to sRGB. Most consumer monitors, phones, and TVs are calibrated to sRGB (or close). Email clients render images as sRGB. Office applications assume sRGB.
Where sRGB falls short: It can't represent highly saturated cyans, teals, and some greens that CMYK printers can produce. Ironic: the print gamut exceeds the screen gamut in certain regions. This means some colors that print beautifully can't be accurately previewed on an sRGB display.
Adobe RGB: The Print Editing Space
Adobe RGB (1998) was designed by Adobe to encompass most of the CMYK gamut reproducible in commercial printing. It's wider than sRGB primarily in the cyan-green region.
Adobe RGB Usage
Gamut advantage: Adobe RGB's green primary is shifted to a much more saturated position than sRGB's. The result: forest greens, teals, and cyans that sRGB clips are fully represented in Adobe RGB. The red and blue coverage is similar to sRGB.
When to use: Photo editing for print output. Capturing images from cameras set to Adobe RGB (most professional cameras offer this). Any workflow where the final output is a wide-gamut printer (inkjet photo printers, offset press).
When not to use: Web delivery. If you export an Adobe RGB JPEG and the browser doesn't read the ICC profile (some older browsers, some email clients), the image appears desaturated — the numbers are mapped to sRGB primaries, which are less saturated, so everything looks washed out. Convert to sRGB for any web-facing output.
Monitor requirement: To see Adobe RGB accurately, you need a wide-gamut monitor covering 90%+ of Adobe RGB. A standard sRGB monitor can't display the extra colors — they get clipped to the nearest sRGB equivalent. Common wide-gamut monitors: BenQ SW series, EIZO ColorEdge, Dell UltraSharp.
DCI-P3 and Display P3: The New Screen Standard
DCI-P3 was originally a cinema projection standard. Apple adapted it as "Display P3" for their devices, and it's now the dominant wide-gamut screen color space.
P3 Specifications and Adoption
DCI-P3: Cinema projection standard. Green-tinted white point, gamma 2.6. Used in digital cinema (DCP projection).
Display P3: Apple's adaptation. Same primaries as DCI-P3, but D65 white point (like sRGB) and sRGB-like transfer function. This is what Apple means when they say "P3" for their displays.
Gamut: 25% wider than sRGB. Significantly wider in reds and oranges, moderately wider in greens. The difference is most visible in saturated red-orange tones — autumn leaves, sunsets, tomatoes, red clothing. Blue coverage is similar to sRGB.
Device support (2026): Every iPhone since iPhone 7 (2016), every Mac since MacBook Pro 2016, every iPad Pro, every Apple Watch. Most Samsung Galaxy flagships. Most modern monitors marketed as "HDR" or "wide color gamut." Estimated 60%+ of web users can see P3 colors.
Web support: CSS color(display-p3 1 0 0) specifies P3 colors. The color-gamut: p3 media query detects P3 displays. Safari, Chrome, and Firefox all support P3 color in CSS and images. Use with sRGB fallback for maximum compatibility.
ProPhoto RGB: Maximum Editing Headroom
ProPhoto RGB (also called ROMM RGB) has the widest gamut of any standard RGB color space, covering ~90% of visible colors and even some colors that don't exist (negative luminance, beyond the spectral locus).
ProPhoto RGB: When and How
Purpose: Internal editing workspace for photographs. Lightroom uses ProPhoto RGB internally by default. The extra gamut prevents clipping during extreme adjustments — a massive saturation push in ProPhoto might clip in Adobe RGB.
Critical requirement: 16-bit only. At 8-bit, ProPhoto's enormous gamut is spread across only 256 levels per channel. The perceptual steps between adjacent values are larger than in sRGB, making banding visible in normal-saturation areas. A ProPhoto 8-bit gradient looks worse than an sRGB 8-bit gradient because each step is a bigger color jump. Always use 16-bit (65,536 levels) or 32-bit float with ProPhoto.
Never deliver ProPhoto to end users. No consumer display can show the full ProPhoto gamut. No web browser handles it correctly. Convert to sRGB (web) or Adobe RGB (print) before export. ProPhoto is a workspace, not a delivery space.
Which File Formats Support Which Color Spaces
| Format | ICC Profile Support | HDR Support | Wide Gamut Notes |
|---|---|---|---|
| JPEG | Yes (embedded) | No | Any RGB space via ICC. 8-bit only. |
| PNG | Yes (iCCP chunk) | No (16-bit for extended range) | Any RGB space via ICC. 8 or 16-bit. |
| WebP | Yes (ICCP chunk) | No | Officially 8-bit sRGB. ICC profiles supported but inconsistently handled. |
| AVIF | Yes (CICP + ICC) | Yes (10/12-bit PQ or HLG) | Native P3, Rec.2020, HDR support. The best modern format for wide color. |
| JPEG XL | Yes (ICC) | Yes (PQ, HLG, 32-bit float) | Full HDR, wide gamut, ICC v4. Best technical spec, limited browser support. |
| TIFF | Yes (ICC) | 32-bit float possible | Any color space via ICC. 8/16/32-bit. Print standard. |
| PSD | Yes (ICC) | 32-bit float | Any color space. Full CMYK support. 8/16/32-bit. |
| SVG | Limited (CSS color()) | No | sRGB default. P3 via CSS color() function in supporting browsers. |
| Yes (ICC, output intents) | No (PDF 2.0 partial) | Any space via ICC. CMYK, Lab, spot colors. The most flexible. | |
| HEIC | Yes (CICP + ICC) | Yes (10-bit) | Native P3 and Rec.2020. Apple ecosystem default. |
Color Management in Web Browsers
Browser color management is the reason your images look different on Safari vs Chrome vs Firefox.
How Browsers Handle Color Profiles
Safari: Full ICC v2/v4 color management. Reads embedded profiles, converts to the display's color space. Tagged P3 images show the full P3 gamut on P3 displays. The most accurate browser for color.
Chrome: Color management enabled for tagged images. Untagged images assumed sRGB. P3 support in CSS and images. Converts to sRGB on non-wide-gamut displays. Accuracy is good but historically has had edge cases.
Firefox: Full color management (enable via gfx.color_management.mode = 1 in about:config, on by default since ~2020). Handles ICC v2 and v4 profiles. P3 support.
The practical impact: If you embed an Adobe RGB profile in a JPEG and display it on the web, color-managed browsers convert it to the display's space correctly. Non-color-managed contexts (some email clients, older browsers, some social media platform previews) assume sRGB, making the image look desaturated. Solution: always convert to sRGB for web delivery. Use P3 only intentionally with proper CSS fallbacks.
HDR and Wide Color Gamut Displays
HDR (High Dynamic Range) and wide color gamut are related but distinct concepts. HDR expands the brightness range (up to 10,000 nits vs SDR's ~200 nits). Wide gamut expands the color range (P3, Rec.2020). Most HDR displays are also wide gamut, but the two can exist independently.
HDR Image Formats
AVIF: The most practical HDR image format for the web in 2026. 10-bit and 12-bit color, PQ and HLG transfer functions, CICP color signaling. Supported in Chrome, Firefox, Safari, Edge. A 10-bit P3 PQ AVIF can represent sunsets and specular highlights that look dramatically better on an HDR display versus SDR.
JPEG XL: Technically superior to AVIF for HDR (32-bit float, smoother gradients, better handling of mixed SDR/HDR content). But browser support is limited — Chrome removed JXL support in 2023, and Safari is the primary supporter. Not recommended for web delivery until browser support stabilizes.
HEIC: Apple's HDR image format. iPhone captures in HEIC with Dolby Vision HDR metadata (12-bit, P3 gamut). These files look stunning on Apple devices. On Windows/Android/web, HDR metadata is often ignored, and the image falls back to SDR rendering.
Convert HEIC to JPG | Convert AVIF to JPG | Convert HEIC to PNG
Practical HDR Workflow
For web in 2026: AVIF with P3 gamut and PQ transfer function for HDR content, with SDR sRGB JPEG/WebP fallback using the <picture> element. The CSS @media (dynamic-range: high) query detects HDR capability.
For photography: Capture in RAW (always HDR-capable), edit in ProPhoto or P3, deliver as SDR sRGB for most clients, and optionally provide HDR HEIC/AVIF for clients with HDR displays.
The current reality: HDR image delivery on the web is technically possible but practically limited. Most CMS platforms, social media, and email don't support HDR images. It's a forward-looking technology for photographers, display manufacturers, and cutting-edge web projects.
Color space literacy is the difference between images that look intentional and images that look broken. The rules are simpler than they appear: sRGB for anything going to a screen you don't control, Adobe RGB for print workflows, P3 for modern devices when you want extra vibrancy, and ProPhoto for internal editing only.
The format you choose determines which color spaces you can use. AVIF and HEIC handle HDR and wide gamut natively. JPEG and PNG handle any color space via ICC profiles. WebP is practically sRGB-only. Match your format to your color requirements, embed the profile, and your colors will display as intended.