Phone screen vs desktop monitor: why the same color can look off

Start on the desktop. Open the tool, create a session and note the 4-character code. Open the tool on your phone, enter that code or open the share link, and the same orange appears on both. Before you compare, set the phone's brightness to a level that matches the room, turn off automatic brightness, and turn off any color or comfort filters, such as night mode or blue light reduction. Hold the phone at a normal distance, about as you'd read a message, and look at the desktop from your usual seat. Compare the orange first. Then type a gray such as #808080 into the HEX field on either device and compare again.

Note whether the orange looks redder, yellower or duller on one device. Then check the gray. A gray that looks warm on one screen and cool on the other is a tint gap. A hex color on a web page is an sRGB value. CSS Color Level 4 says colors in HTML are treated as sRGB unless something else is specified. MDN describes a screen's color gamut as the approximate range of colors it supports, and lists levels from sRGB up to Display P3 and Rec. 2020, each larger than the last. Screens differ in that range, so the same code can look a little different on each one.

This is a comparison by eye, not a measurement, and the tool doesn't know what either device shows. Brightness, picture mode, color temperature and filters all change how a color looks, so a fair test depends on how each device is set. The check matters most when a designer checks a brand color on the devices customers actually use. Measured numbers need a hardware colorimeter, which some people call a calibrator or spectrophotometer, run with its own software.