Design

Why does the same image look different on two screens?

Because every screen renders colour differently, and most are not calibrated. Panels vary in white point, brightness and how much of the colour space they can actually display. On top of that, an image carries a colour profile describing what its numbers mean — and if an app ignores that profile, the same file is displayed with different intent. That is why an image can look warm on a phone and cold on a laptop with neither screen being broken.

sRGB, P3, and why saturated colours shift

sRGB is the safe common denominator that virtually everything can display. Display P3 is wider, covering more intense reds and greens. An image saved in P3 and shown on an sRGB screen has its most saturated colours flattened, because those colours simply do not exist on that panel.

For anything going on the web, export in sRGB. It is the version everyone will actually see correctly.

What you can fix and what you cannot

You can fix profile mismatches by exporting correctly, and you can reduce brightness differences by setting screens to a similar level in similar light. You cannot make a low-gamut panel show colours it does not have, and you cannot control what screen your audience uses.

The practical response is to design so the meaning does not depend on precise colour: adequate contrast, and never colour alone to distinguish two things.

Night modes and automatic warmth

Blue-light shifts and auto-brightness change the colour on the fly, which makes any judgement unreliable. Turn them off before assessing colour, and check in daylight — an image graded at midnight under a warm screen filter almost always looks too blue the next morning.

Vektaro

Our iOS app for exactly this. Runs on your device — no account, no tracking.

See the app →