We're live on Product Hunt!Support us
ColorArchive

A curated color library with 5,000+ algorithmically generated colors. Browse, search, save favorites, and export palette tokens — no account required.

CollectionsFamiliesNotesGuidesFree ResourcesConvertColorblindAboutSupportUpdates
Ready for static export
Privacy·Terms·Refunds·Cookies·Commerce Disclosure
colorarchive.org · © 2026 ColorArchive
Skip to content
ColorArchive
ProLog in
ArchiveAll ColorsCollections
Mobile Design
Search intent: mobile UI color design OLED dark mode contrast touch states cross-device color consistency phone

Color on Mobile: OLED Optimization, Touch States, and Cross-Device Consistency

Mobile UI color design is not simply desktop design scaled down. Small canvas size, OLED panels, variable ambient light, and touch interaction fundamentally change which color decisions matter. This guide covers the mobile-specific constraints that most desktop-trained designers encounter when first working at phone scale.

MobileOLEDDark ModeUI Design
Key points
Pixel density changes perceptual color. The same hex value looks visibly different on a 3x Retina display versus a 1x desktop monitor — colors appear slightly more saturated and darker at 3x because subpixel rendering has less impact. Colors that look appropriately saturated on desktop often look aggressive on high-DPI mobile. Always evaluate mobile palette decisions on an actual device.
Touch targets require different color contrast logic than hover states. On desktop, a hover state needs to be noticeable — 3:1 contrast ratio often suffices. On mobile, there is no hover — the pressed state must be immediately distinguishable from the default state in the brief moment of the interaction. Mobile pressed states need a 20-30% lightness shift, not the subtle 10% that reads well on desktop.
The minimum practical contrast ratio for mobile body text in mixed lighting conditions is 5:1, not the WCAG AA minimum of 4.5:1. The 0.5:1 buffer accounts for sunlight readability degradation — mobile screens are routinely used outdoors in direct sunlight, which washes out low-contrast text that would be perfectly readable indoors.

Adapting a desktop palette for mobile

Three adjustments consistently improve desktop palettes when ported to mobile. First: increase the minimum contrast ratio for body text from 4.5:1 to 5.5:1. This provides a sunlight buffer without requiring a full redesign. Second: darken interactive element backgrounds by 5-10% L in OKLCH. On OLED mobile screens, buttons read as slightly lighter than on LCD desktop monitors at the same hex value — a small lightness reduction compensates. Third: reduce saturation of background accent colors by 10-15%. Background tinting looks appropriate at low saturation on desktop, but accumulates visual fatigue on OLED mobile because the panel renders saturated colors at higher perceived intensity. The same OKLCH chroma value that reads as subtle on desktop reads as loud on OLED mobile. These three adjustments can be implemented as a mobile-specific override layer on top of the existing design token system, without changing the desktop palette.

OLED-optimized dark mode

Mobile dark mode is qualitatively different from desktop dark mode because most mobile flagship devices use OLED panels where true black pixels consume zero power. The difference between a dark mode background of #0a0a0a (near-black) and #1e1e1e (dark gray) is approximately 8-12% battery impact per hour at maximum brightness, documented by Google and Apple measurements. OLED-optimized dark mode guidelines: main background #000000 or #0a0a0a; surface elevation (cards, sheets) #111111–#1a1a1a; elevated interactive surfaces #222222–#2a2a2a. The elevation system uses near-black increments, not the Material Design default gray scale (designed for LCD). Text: off-white at #e8e8e8 rather than pure white — pure white on pure black creates maximum luminance contrast that many users find harsh at low ambient light. Use the ColorArchive Dark Mode UI Kit for a complete OLED-optimized token system.

Featured collection
Modern Seaside

Clear coastal blues and seafoam accents with enough structure for UI and brand systems.

Open collectionAll collections
Open next
Dark Mode UI KitWCAG Contrast AuditorColor Converter
Practical next step

Move from the guide into a concrete palette lane

Guides explain the use case. Collections prove the taste. Pro handles the export and implementation layer.

Upgrade to ProMore guides
Related guides
Mobile Color
Mobile Dark Mode Color: OLED, P3, and System Theming
Between your CSS hex values and the user's eyes: OLED panels, Display P3 gamut, OS dark mode, and manufacturer color tuning. Understanding the translation stack lets you design for it.
Generator Guide
Color Palette Generator: How to Go From a Word or Mood to a Real Palette
Most palette generators give you random swatches. This guide covers how to derive a palette from a concept or keyword, then refine it into something production-ready across formats.
Website Guide
Website Color Palette Ideas for Landing Pages That Still Convert
A practical guide to choosing a website color palette that supports hierarchy, CTA contrast, and brand tone without overwhelming the page.