Color Fidelity on Mobile: What You Can't Control

Mobile color design has a dirty secret: you do not control what color the user sees. Between your CSS hex value and the photons reaching the user's retina lies a stack of translation layers — the browser or app's color management, the OS's display mode (light/dark/accessibility modes), the display panel's hardware characteristics (OLED vs LCD, 60Hz vs 120Hz, SDR vs HDR), and the manufacturer's tuning choices. A Samsung Galaxy with vivid display mode engaged will show radically more saturated colors than an iPhone in True Tone mode on the same CSS value. The OLED/LCD distinction has major implications for dark mode. OLED panels achieve true black by turning off pixels entirely — every degree of darkness you add to your dark backgrounds saves battery and reduces eye strain in low-light conditions. True black backgrounds (#000000) on OLED look dramatically different from LCD: on LCD they look flat dark gray, on OLED they look like the panel is off, which can create visual artifacts at component edges (halos, contrast banding). A practical dark mode minimum: #0A0A0A or #111111 rather than pure black avoids the worst OLED edge artifacts while still getting most of the battery and contrast benefits. Display P3 is a wider color gamut than sRGB that modern iPhones and many Android flagships support. Colors defined in P3 — particularly highly saturated reds, greens, and cyans — can appear significantly more vivid on these displays than the same values on sRGB displays. If you define a brand accent in P3-saturated space, it will look correct on high-end iPhones and muted on older Android devices. This creates a consistency challenge: either stay within sRGB gamut (safe, consistent, less vivid) or embrace P3 and accept inconsistency (more vivid on supported devices, duller elsewhere). OS dark mode is the layer you have the most control over, via CSS `prefers-color-scheme: dark` and semantic color tokens. The most robust mobile dark mode approach is a two-token layer: a semantic token layer (`--color-surface`, `--color-text-primary`, `--color-accent`) that maps to different primitive values in light vs dark mode. This separation means your components never reference specific hex values and light/dark switching is a pure token-swap operation with no component logic changes. The common failure mode is component-level dark mode logic (`if darkMode then bg-gray-900 else bg-white`) — this spreads dark mode coupling everywhere and makes consistent updates nearly impossible.