Paletas de colores para las capturas de pantalla de la App Store
La mayoría de las paletas de capturas de pantalla para la App Store fallan de la misma forma: se ven preciosas en un monitor de 27 pulgadas y pierden nitidez al tamaño real con que la App Store las muestra. El carrusel se renderiza a resolución completa en la página del producto, pero a ancho de miniatura en los resultados de búsqueda y en los carriles «Más como este». Si tu paleta solo funciona a uno de esos tamaños, pierdes conversiones en el otro.
Los tres contextos de visualización
Trátalo como tres restricciones de diseño independientes. Una paleta que gana en uno puede perder en otro.
- Tamaño completo (1290 × 2796 en iPhone). El render de la página del producto. Donde llegan los usuarios tras pulsar. Las transiciones de degradado sutiles, el texto más fino y los colores complejos en capas se leen aquí. La mayoría de los diseñadores solo prueba a este tamaño.
- Miniatura de búsqueda (~300 × 650). Los tres primeros paneles del carrusel, junto a los iconos de las apps competidoras en la búsqueda de la App Store. Los detalles finos desaparecen. Los bloques de color con alto contraste se leen; los degradados sutiles se aplanan.
- Contexto adyacente. Tu captura de pantalla nunca aparece sola en la búsqueda. Las otras siete apps a su alrededor tienen sus propias paletas. Si todas las apps de tu categoría van en colores cálidos y tú también vas en cálidos, tu captura se funde con el fondo.
La regla de los cinco colores
Cinco colores es el límite aproximado. Un color dominante de fondo (o un degradado entre dos), un color primario de texto, un acento para énfasis, más los colores que vengan de la captura de pantalla real de tu app. Añadir un sexto color normalmente significa eliminar otro, no sumar encima.
La razón no es estética: es que las miniaturas comprimen la información visual de forma agresiva, y una paleta con demasiados colores se convierte en un borrón beige. Entre cuatro y cinco colores es el rango donde cada color se mantiene diferenciado a 200px.
Contraste: WCAG AA no es opcional
El texto sobre el fondo del panel debería alcanzar WCAG AA (4,5:1 para texto de cuerpo, 3:1 para texto grande de 24pt o más). No porque Apple lo compruebe — no lo hace — sino porque a tamaño de miniatura, cualquier color por debajo de AA se vuelve literalmente ilegible. Usa un verificador de contraste con el color final del texto y el color final del fondo antes de exportar.
Error habitual: texto gris oscuro sobre un degradado gris oscuro ligeramente más claro. Queda sofisticado en Figma. Desaparece por completo a ancho de miniatura.
La convención de categoría como punto de partida, no como regla
Mira las 20 apps más populares de tu categoría en la App Store. Fíjate en los colores dominantes de sus paletas. Esa es la convención de tu categoría — la paleta que los usuarios asocian con «una app creíble en esta categoría». Puedes imitarla (menor riesgo, menor diferenciación) o romperla deliberadamente (mayor riesgo, mayor diferenciación si funciona).
Romper la convención funciona cuando tienes una razón concreta. La categoría de Notion (productividad) apostaba por colores pastel vivos en 2022; Notion fue casi al monocromático con una calidez sutil y transmitió más seriedad. La categoría de Headspace (bienestar mental) estaba saturada de pasteles suaves; el degradado naranja intenso de Headspace destacaba sin resultar agresivo. Imita primero, diferénciate después es la secuencia segura: imita en el primer lanzamiento y rompe solo cuando tengas datos de instalaciones con los que comparar.
La auditoría de «apps adyacentes en búsqueda»
Antes de publicar, haz esto: busca en la App Store dos o tres palabras clave para las que tu app aparece (o quiere aparecer). Mira la franja de capturas de pantalla bajo la app principal para esas palabras clave. ¿Tu paleta va a destacar entre las apps de alrededor o se va a mezclar con ellas?
Es una auditoría de treinta segundos y la mayoría de los equipos se la salta. Una paleta que parecía única de forma aislada puede ser el mismo degradado azul-a-morado que el de cinco competidores por encima y por debajo en la búsqueda. La solución suele ser cambiar un único color de acento.
Oscuro, claro o ninguno de los dos
Elige una posición clara: fondos predominantemente oscuros, predominantemente claros o una familia de degradados coherente entre paneles. Mezclar paneles oscuros y claros en un mismo carrusel es el error más habitual — da la sensación de que el diseño no tuvo un criterio director.
Consulta modo oscuro frente a modo claro para saber cuándo gana cada opción según la categoría. El resumen: el oscuro gana en juegos, música, foto/vídeo e IA; el claro gana en productividad, educación y bienestar; en todo lo demás depende del azar y la marca decide.
Color y localización
Los colores tienen significados distintos según el mercado. El rojo es positivo en los mercados de habla china (prosperidad), más negativo en gran parte de Europa. El blanco es color de luto en buena parte de Asia Oriental. El verde vivo significa «adelante» en algunos lugares y «envidia» en otros. Para la mayoría de las apps estos matices son demasiado sutiles como para superar la coherencia de marca — elige una paleta y publícala a escala global. Preocúpate por una paleta específica por mercado solo si tu marca es una en la que el simbolismo del color forma parte importante del posicionamiento (lujo, bienestar, finanzas) y tienes datos sobre los que actuar.
Qué hacer esta semana
- Revisa tus capturas de pantalla actuales a 200px de ancho. Todo lo que sea ilegible a ese tamaño necesita cambiarse.
- Verifica el contraste WCAG AA de cada texto sobre el fondo de su panel.
- Busca tus tres principales palabras clave y captura el contexto de lo que les rodea. ¿Destaca tu paleta?
- Si vas a publicar un diseño nuevo, limítate a cinco colores como máximo. Añadir un sexto significa eliminar uno.