Color Profiles and sRGB: Why Colors Can Shift When You Convert

Numbers need a ruler

An RGB triple such as (230, 76, 51) says how much red, green and blue to mix, but not which red, green and blue. Different displays and cameras use different primaries, so the same triple can be a slightly different color. A color profile (an ICC profile, in the usual file-embedded form) names the space the numbers refer to.

sRGB is the common baseline: a standard from the late 1990s that the web assumes. An image with no profile is treated as sRGB by browsers. Display P3 is a wider space with more saturated reds and greens than sRGB can represent, and many recent phones and screens use it. A photo tagged P3 has numbers that only mean the right thing in P3.

A worked example: the same colors in two spaces

I converted some Display P3 colors to sRGB using the standard conversion matrices (linearize, matrix, re-encode, with each value rounded to a whole number, so treat each figure as accurate to plus or minus one). The numbers change; where the color fits inside sRGB, the color on screen does not.

Color	Numbers in the P3 file	Same color in sRGB	What happens
Mid gray	128, 128, 128	128, 128, 128	Neutrals pass through unchanged
Orange-red	230, 76, 51	249, 59, 33	Numbers change, color is the same
Pure P3 red	255, 0, 0	255, 0, 0 (clamped)	Redder than sRGB can show; nearest sRGB red used
Pure P3 green	0, 255, 0	0, 255, 0 (clamped)	Greener than sRGB can show; nearest sRGB green used

The orange-red row is the reason you cannot judge color by comparing numbers across profiles. The last two rows are the real cost of going to sRGB: colors outside its range are pulled to the nearest edge. For a pure P3 red, the linear sRGB value would need red at 1.225 and a slightly negative green and blue, which no sRGB screen can produce.

What the converter does with a tagged photo

The browser draws the picture onto an sRGB canvas, converting from the embedded profile as it goes; WebKit's own write-up on canvas color says the default stays sRGB and that drawImage performs any color space conversion needed. The tool then saves those pixels without embedding a profile. In effect, a P3 photo is converted properly to sRGB first and the profile tag is then omitted, which is correct because sRGB is what untagged images are assumed to be.

Two practical consequences follow. The converted file looks right in browsers and almost all other software, with colors matching the original wherever they fit sRGB. And the extra saturation outside sRGB (the last two rows above) is gone from the converted copy, which is invisible in most photos but can slightly flatten very vivid flowers, neon signs or saturated product shots on a wide-gamut screen. The profile and camera data that are dropped are listed in EXIF metadata and privacy when converting.

Diagnosing colors that went wrong

• Dull, flat colors after conversion elsewhere. The classic cause: a wide-gamut image (Adobe RGB or P3) had its profile stripped without converting the numbers first, so software reads wide-gamut numbers as sRGB. Greens and reds turn pale. Fix by converting to sRGB in a program that does the conversion, or by starting from the original.
• Neon, over-saturated colors. The reverse mistake: sRGB numbers read as a wider space, usually by software that mishandles profiles.
• Two programs show different colors for one file. One of them ignores the profile. The file is not wrong; the viewer is.
• A CMYK JPEG that looks odd. CMYK is a print model and software handles CMYK JPEGs inconsistently. Convert it to an RGB version in the program that made it.
• Everything looks slightly off on one screen only. Check the screen: uncalibrated or color-boosted display modes shift every image the same way.

How big the gamut gap is

You can put a number on the difference between the two spaces. On the standard CIE xy chromaticity diagram, sRGB's three primaries form a triangle of area 0.1121 and Display P3's form one of 0.1520, so P3's triangle is about 36 percent larger. That figure is geometry, not perception: other measures give other percentages, and no single number describes how much more color you will see. The practical point is simpler. The extra area sits at the saturated corners (reds and greens), exactly where a clamp in the table above has to happen.

A profile itself is small. The minimal sRGB profile that Pillow builds is 588 bytes, and a profile embedded in a photo is typically somewhere between a fraction of a kilobyte and a few kilobytes, so dropping it never explains a large change in file size; it only changes what the pixel numbers mean.

Choosing sRGB on purpose

For anything seen on screens (web pages, email, chats, upload forms), sRGB is the right target because it is the one space every viewer handles. Treat it as the delivery space, not a downgrade. Where color accuracy is critical, as in photographs sent for professional printing, work in your editing software with the correct profile and export the way the printer asks; printers can convert from sRGB, but some want their own profile or a specific one, as discussed in best image formats for printing.

A scenario shows how this plays out. A product photographer shoots in a wide-gamut space and delivers two things: a high-quality master with the profile embedded for the print shop, and a web copy converted to sRGB for the store page and for email. Nobody has to guess what the numbers mean in either file. The mistake to avoid is making the web copy by only deleting the profile tag, which leaves wide-gamut numbers pretending to be sRGB and produces exactly the dull greens and reds described above.

When pictures come from an iPhone, the capture format and its color settings are covered in iPhone photo formats; for converting, the point is only that a P3-tagged photo ends as sRGB. A quick sanity check after conversion: open the original and the copy next to each other, look at the most saturated area, and decide if you can see the difference at the size the picture will be used. If you cannot, nothing needs fixing.