Color Theory

Why Colors Look Different on Your Phone: Display Technology Explained

You design a palette on your calibrated desktop monitor. It looks perfect. Then you check on your phone and the colors look different. Your client checks on their phone and sees something else entirely. This is not a bug. It is physics.

OLED vs. LCD

OLED displays (most modern Samsung and iPhones) produce colors by emitting light from individual pixels. This creates deeper blacks (pixels are truly off), higher contrast, and often more saturated colors than the CSS values specify. LCD displays use a backlight filtered through pixels, producing more muted colors with slightly elevated blacks (the backlight bleeds through).

Display Profiles and Saturation

Samsung phones historically boost saturation significantly in their default "Vivid" display mode. An already-saturated blue becomes almost neon. Apple devices are more accurate to sRGB by default but can display P3 colors when specified in CSS. Budget Android phones often have poorly calibrated displays that shift colors unpredictably.

Brightness and Ambient Light

Auto-brightness changes how colors appear. In bright sunlight, the screen cranks to maximum brightness, which washes out subtle color differences. At night in bed, the screen is dim and may have a night-mode warm filter active, shifting all colors toward amber.

Designing for the Range

You cannot control every viewer's device. But you can design palettes that are resilient across the range. Strong contrast ratios (not just minimum-passing) survive brightness variation. Colors with lightness differences (not just hue differences) remain distinguishable on poorly calibrated screens. These are the same principles PaletteRx enforces through its WCAG compliance checks.

📘 Resilience test: Check your site on a Samsung in Vivid mode, an iPhone in True Tone, and the cheapest Android phone you can find. If the palette works across all three, it is resilient enough for production.

Ready to Build Your Palette?

PaletteRx guides you from color selection to accessible, export-ready design systems in minutes.

🎨 Launch PaletteRx