Solución de problemas · Color y diseño
Por qué tus colores se ven mal en móvil
Diseñas una web o una imagen en tu ordenador: los colores se ven perfectos. La abres en el móvil y todo cambia: tonos apagados, colores que «vibran», fondos que no combinan. No es tu imaginación: el mismo color se ve distinto en cada pantalla.
Las diferencias entre pantallas, los modos del sistema y los ajustes automáticos del móvil alteran la percepción del color de formas predecibles. Entenderlas te permite elegir colores que sobrevivan al salto del escritorio al bolsillo.
Causa 1: cada pantalla muestra el color a su manera
Un panel OLED de gama alta y un LCD económico no reproducen igual el mismo código hexadecimal: difieren en brillo, saturación y temperatura de color. Tu diseño se verá distinto en cada dispositivo que lo abra.
Cómo detectarlo: abre tu web en tres dispositivos distintos (móvil, portátil, otro móvil). Si los colores varían notablemente entre ellos, estás viendo la lotería de pantallas.
No puedes controlar las pantallas ajenas, pero sí elegir colores «robustos»: evita los tonos en los extremos (neones muy saturados, grises muy sutiles) que son los que más varían entre paneles. Los colores medios y bien contrastados son los más estables. Prueba siempre en al menos un móvil real, no solo en el monitor.
Causa 2: el modo oscuro invierte tu diseño
Muchos móviles usan modo oscuro por defecto, y los navegadores y sistemas pueden forzar la inversión de colores en webs no preparadas: tus fondos claros se vuelven oscuros y tus textos oscuros, claros... con resultados a menudo horribles en los colores intermedios.
Cómo detectarlo: activa el modo oscuro en tu móvil y visita tu web. Si los colores se ven raros o el contraste se rompe, tu diseño no está preparado.
La solución profesional es diseñar explícitamente para modo oscuro con CSS (prefers-color-scheme): define tu paleta clara y tu paleta oscura como dos juegos coherentes. Al elegir colores base, la herramienta de paletas de Tótem (usatotem.com/herramientas-diseno/paleta-colores/) te ayuda a construir combinaciones armoniosas que luego puedes adaptar a ambas versiones.
Causa 3: brillo automático y filtros de pantalla
El brillo adaptativo, el Night Shift (iOS) o la Luz nocturna (Android) cambian la temperatura de color según la hora: por la noche todo se vuelve más cálido y amarillento. Tus azules fríos cuidadosamente elegidos se ven verdosos a las 11 de la noche.
Cómo detectarlo: mira tu diseño con el filtro nocturno activado al máximo. Si la jerarquía visual se mantiene, tus colores son robustos; si todo se funde en un tono cálido uniforme, dependes demasiado de matices fríos.
Diseña con diferencias de luminosidad además de diferencias de tono: dos colores que se distinguen por claridad además de por matiz sobreviven a los filtros de temperatura. Es el mismo principio que el contraste de accesibilidad, aplicado a la robustez.
Causa 4: la compresión de imagen altera los tonos
Al comprimir una imagen para web (sobre todo en JPG con calidad baja), los colores se degradan: aparecen bandas en los degradados y los tonos se «ensucian». Un fondo con degradado sutil puede acabar con franjas visibles.
Cómo detectarlo: amplía las zonas de degradado o color plano de tus imágenes: si ves bandas o ruido donde debería haber transición suave, la compresión está alterando el color.
Sube la calidad de exportación en imágenes con degradados, o usa PNG para gráficos con colores planos. Y elige los colores de marca pensando en su versión comprimida: los tonos medios sólidos sobreviven mejor que los degradados sutiles.
Causa 5: colores que «vibran» juntos
Ciertas combinaciones (rojo sobre azul, neón sobre neón) producen un efecto de vibración óptica: los bordes parecen moverse y el texto resulta ilegible. En pantallas pequeñas y brillantes el efecto se intensifica.
Cómo detectarlo: si al mirar tu diseño sientes incomodidad visual o los bordes «tiemblan», tienes una combinación vibrante.
Separa los colores en luminosidad: un texto claro sobre fondo oscuro (o al revés) con diferencia clara de claridad nunca vibra. Reserva las combinaciones atrevidas para acentos pequeños, nunca para texto o grandes superficies.
Protocolo: colores a prueba de móviles
Uno: elige tu paleta base con una herramienta como usatotem.com/herramientas-diseno/paleta-colores/, buscando armonía y evitando extremos de saturación.
Dos: define la versión para modo oscuro desde el principio, no como parche.
Tres: verifica el contraste real (texto sobre fondo) con los estándares de accesibilidad.
Cuatro: prueba en al menos dos móviles físicos distintos, con modo oscuro activado y con filtro nocturno: si el diseño sobrevive a esas tres pruebas, sobrevivirá a la mayoría de los bolsillos.
Herramientas gratuitas mencionadas
Generador de paletas
Elige un color base y genera paletas armónicas: análoga, complementaria, triádica y más.
Usar gratisHEX a RGB
Convierte cualquier color hexadecimal a sus valores RGB al instante.
Usar gratisRGB a HEX
Convierte valores RGB (0–255) a código hexadecimal listo para tu CSS.
Usar gratisPreguntas frecuentes
¿Por qué mi logo se ve distinto en cada móvil?
Por las diferencias entre pantallas (OLED vs LCD, calibración) y los ajustes del sistema (modo oscuro, filtros nocturnos). Un logo con colores medios y buen contraste varía menos que uno con neones o tonos muy sutiles.
¿Debo diseñar primero para modo claro u oscuro?
Diseña ambos desde el inicio como dos paletas coherentes, no una como inversión automática de la otra. Piensa qué emoción transmite cada versión: el modo oscuro no es el claro «en negativo», es un diseño propio.
¿Los colores HEX se ven igual en todos los navegadores?
El código es el mismo, pero cada navegador y sistema aplica su gestión de color. En la práctica, las diferencias entre navegadores modernos son pequeñas; las grandes diferencias vienen de las pantallas físicas y los ajustes del sistema.
En resumen
Los colores se ven mal en móvil por pantallas distintas, modo oscuro no diseñado, filtros de temperatura, compresión y combinaciones que vibran. Ninguna tiene que ver con tu gusto: son física y software.
Elige paletas robustas, diseña el modo oscuro de verdad y prueba en dispositivos reales: así tus colores sobrevivirán al bolsillo de tus visitantes.