You export an image, it looks perfect, and then you see it on your phone and the reds have gone slightly orange. Or a client says the blue is wrong and you cannot see anything wrong at all. Or the same photograph looks fine in one browser and washed out in another.
This is color management, it has a reputation for being impenetrable, and the useful part is genuinely small. Here is the version I wish someone had given me.
A number is not a color
Start here, because everything follows from it. When a file says a pixel is (220, 40, 60), that is not a color. It is a recipe: give me 220 parts of your red, 40 of your green, 60 of your blue.
But every screen has different reds. A cheap laptop panel and a good monitor mean genuinely different things by “full red”. So the same numbers produce different colors on different devices, which is exactly the problem you keep running into.
A color profile is what turns the recipe into an actual color. It says which reds, greens and blues these numbers refer to. Numbers plus profile equals a defined color. Numbers alone are ambiguous.
The three you will meet
sRGB is the default of the internet. It describes a fairly modest range of colors, and its great virtue is that everything understands it. If you do nothing else, work in sRGB and export in sRGB and you will never be badly wrong.
Display P3 is wider, particularly in reds and greens, and it is what most modern phones and laptops can actually show. Colors that simply do not exist in sRGB are available here. Good browsers handle it correctly, and older software sometimes does not.
Adobe RGB is a print-oriented wide space, still common in photography workflows. On the web it is the usual cause of the mystery where an image looks flat and desaturated in a browser.
The pattern behind all three: a wider space can hold more colors, but only if everything downstream knows which space you used.
The one mistake that causes most of it
An image gets exported without an embedded profile, or with a wide profile that gets stripped along the way. The browser then does what it must: it assumes sRGB.
If the numbers were actually Adobe RGB numbers, they now describe the wrong colors, and the image looks dull and slightly wrong in a way that is hard to name. This is the washed-out-photo problem, and it is not a browser bug, it is missing information.
The fix is boring and complete: convert to sRGB on export, and embed the profile. Convert means the numbers get recalculated so the colors stay the same. Assign, which some software offers, means the numbers stay and the colors change, which is almost never what you want.
Two things worth knowing while you are here. Optimization tools sometimes strip the profile to save a couple of kilobytes, so check the output of your pipeline rather than the file you exported. And screenshots inherit the profile of your display, which is why a screenshot of a photograph can look different from the photograph.
Why print looks different, briefly
Screens make color by adding light. Paper makes color by subtracting it with ink. The set of colors you can produce with four inks on a particular paper is smaller than the set a screen can emit, and shaped differently.
So some colors you can see cannot be printed, saturated blues and vivid oranges especially. The press does not fail, it substitutes the nearest thing it can mix, which is duller, and the neighbouring colors shift too so the relationships survive.
Soft proofing simulates that on screen using a profile for the specific paper and press. Proof Colors under the View menu is exactly this: a preview of the paper rather than a preview of the design. It is not a perfect prediction, but it tells you which colors are going to disappoint before you commit, which is the entire job.
Your monitor is part of the system
All of this assumes your screen shows sRGB reasonably faithfully. Most do not, out of the box, and that is worth knowing even if you never do anything about it.
If color matters to your work, a hardware calibrator is not expensive and removes an entire category of doubt. If it does not matter enough for that, then at least know that your screen is one opinion among many, and check important work on a second device before deciding something is wrong.
Two habits that cost nothing: turn off any night mode or blue light filter before judging color, and do not judge color with a bright window behind the screen. Both shift your perception far more than the differences you are trying to see.
The short version
- Numbers without a profile are meaningless. Always embed one.
- For the web, convert to sRGB on export and stop worrying.
- Wide spaces are for capture and editing, not for delivery, unless you are certain about the whole chain.
- Convert, do not assign.
- Check the file at the end of your pipeline, not the one you exported.
- Soft proof before you print, and expect saturated colors to calm down.
That is genuinely most of it. Color management sounds like a specialism and turns out to be six rules and one habit, and the habit is simply not letting an image leave without saying what its numbers mean.
