Color consistency across devices: why the same hex looks different everywhere

A designer specifies #2563EB on a calibrated display. The developer sees a slightly different blue on their laptop. The client reports it looks wrong on their phone. The same hex value, different appearance. This is not a bug — it is color management working as intended, exposing the gap between color as a number and color as a perceptual experience. Display calibration, color profiles, and rendering environments create a physical layer beneath the digital layer that most designers never see until a client complaint forces them to look. Understanding the basics makes hex choices more deliberate and client conversations more productive.

Color Theory UI/UX Design

Highlights

Every display renders RGB values differently because every panel has different phosphor or pixel characteristics. A display running without a color profile is essentially uncalibrated — the operating system applies no correction, and RGB values are sent directly to the panel hardware. A display running with a calibrated ICC profile has its output adjusted so that a measured reference color (e.g., sRGB D65 white point) is rendered accurately. On macOS, most displays use color profiles automatically. On Windows, many displays run without calibration. This means your carefully specified hex values look noticeably different on uncalibrated hardware, and you cannot control this from the design file.

sRGB is the standard color space for web design. It was established in 1996 and is supported by every browser on every device. When you specify a hex color in CSS, browsers assume sRGB. When a display's color profile is set to sRGB (or a manufacturer-mapped equivalent), the hex-to-pixel mapping is consistent and predictable. The design risk arises with wide-gamut displays — Apple's P3, which covers about 25% more color than sRGB. On a P3 display showing sRGB content, colors are mapped correctly and look like sRGB. But images or assets that accidentally include out-of-sRGB colors will appear oversaturated or shifted on non-P3 displays.

Browser color management behavior varies. Safari has supported full color management including P3 for years. Chrome added Display P3 support and applies ICC profiles properly in recent versions. Firefox has variable behavior depending on the operating system. For web design, the practical implication is: always author in sRGB. Use P3 only when you explicitly want to take advantage of wide-gamut displays, and always test on both a P3 display and an sRGB display to verify the fallback appearance.

Practical calibration workflow for design teams

Design teams sharing color specifications can reduce cross-device variance with three practices. (1) All designers should use the same color profile setting on their displays — sRGB is the standard baseline. (2) Design tool exports (PNG, SVG) should be exported with an embedded sRGB ICC profile so browsers apply correct color mapping. In Figma, use the Figma Color Profile setting. In Photoshop, enable 'Embed Color Profile' on export. (3) Client review links should include a note that colors are optimized for calibrated displays and may appear slightly different on uncalibrated hardware — this sets accurate expectations and preempts complaints.

When to specify P3 colors intentionally

CSS Color Level 4 allows explicit P3 color specification: color(display-p3 0.15 0.36 0.92). This is appropriate when designing for Apple platforms where P3 displays are universal, or when you need the most saturated possible blues, greens, or magentas that exceed the sRGB gamut. The correct fallback pattern is @supports with an sRGB hex as the default: .element { color: #2563EB; } @supports (color: color(display-p3 0 0 0)) { .element { color: color(display-p3 0.1 0.38 0.92); } }. Always verify the sRGB fallback is acceptable on its own before adding P3 enhancement.

Newer issue

Color in motion: designing animated color transitions and when timing matters

2027-05-20

Older issue

Color in data visualization: encoding information without misleading your audience

2027-06-03